Hoạt hình css có sử dụng gpu không?

Trong tin tức tuần này, Firefox có các đường viền tròn trịa, hoạt ảnh SVG hiện được GPU tăng tốc trong Chrome, không có đơn vị vật lý nào trong CSS, trò chơi ô chữ của The New York Times có thể truy cập được và các biến CSS được giải quyết trước khi giá trị được kế thừa

Hãy nhảy vào tin tức

Các đường viền tròn đang đến với Firefox

Ý tưởng để đường viền đi theo đường cong đường viền đã tồn tại kể từ khi có thể tạo đường viền tròn thông qua thuộc tính

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

6 vào giữa những năm 2000. Nó đã được đề xuất cho Mozilla, , và Chromium hơn mười năm trước và nó thậm chí còn là một phần của từ năm 2015

Các phần của đường viền không bắt buộc phải là hình chữ nhật. Trong phạm vi mà đường viền chạy theo cạnh viền, nó phải chạy theo đường cong

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

6

Tua nhanh đến ngày hôm nay vào năm 2021 và các đường viền vẫn là hình chữ nhật trong mọi trình duyệt mà không có ngoại lệ

Dự phòng nhúng CodePen

Nhưng điều này cuối cùng cũng bắt đầu thay đổi. Trong vài tuần nữa, Firefox sẽ trở thành trình duyệt đầu tiên có đường viền tròn tự động theo hình dạng đường viền. Điều này cũng sẽ áp dụng cho đường viền tiêu điểm mặc định của Firefox trên các nút

Vui lòng gắn dấu sao Sự cố Chromium #81556 [yêu cầu đăng nhập] để giúp ưu tiên lỗi này và sớm đưa các đường viền tròn vào Chrome

Hoạt ảnh SVG hiện được tăng tốc GPU trong Chrome

Cho đến gần đây, việc tạo hoạt ảnh cho phần tử SVG thông qua CSS sẽ kích hoạt vẽ lại trên mọi khung hình [thường là 60 lần mỗi giây] trong các trình duyệt dựa trên Chromium. Việc sơn lại liên tục như vậy có thể có tác động tiêu cực đến độ mượt mà của hoạt ảnh và hiệu suất của chính trang đó

Phiên bản Chrome mới nhất đã loại bỏ vấn đề về hiệu suất này bằng cách tăng tốc phần cứng cho hoạt ảnh SVG. Điều này có nghĩa là hoạt ảnh SVG được giảm tải xuống GPU và không còn chạy trên luồng chính

Trong ví dụ này, vòng tròn SVG liên tục mờ dần qua hoạt ảnh CSS [xem mã]

Việc chuyển sang tăng tốc GPU tự động làm cho hoạt ảnh SVG hoạt động hiệu quả hơn trong các trình duyệt dựa trên Chromium [Firefox cũng làm điều này], đây chắc chắn là một tin tốt cho web

Hoan hô các hoạt ảnh SVG được tăng cường dần dần, dễ tiếp cận với trình đọc màn hình hơn và ít Canvas hơn

Không thể có đơn vị vật lý thực sự trong CSS

CSS định nghĩa sáu , bao gồm

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

8 [inch] và

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

9 [centimet]. Mọi đơn vị vật lý đều có tỷ lệ cố định với đơn vị pixel, là đơn vị chính tắc. Ví dụ:

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

0 luôn chính xác là

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

1. Trên hầu hết các màn hình hiện đại, chiều dài này không tương ứng với 1 inch trong thế giới thực

Trang Câu hỏi thường gặp của Nhóm làm việc CSS hiện là câu hỏi tại sao không thể có các đơn vị vật lý thực sự trong CSS. Nói tóm lại, trình duyệt không phải lúc nào cũng xác định được kích thước và độ phân giải chính xác của màn hình [nghĩ rằng máy chiếu]. Đối với các trang web cần các đơn vị trong thế giới thực chính xác, Nhóm làm việc đề xuất hiệu chuẩn trên mỗi thiết bị

Có trang hiệu chỉnh, nơi bạn yêu cầu người dùng đo khoảng cách giữa hai dòng cách nhau một khoảng CSS [giả sử,

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

2] và nhập giá trị họ nhận được. Sử dụng công cụ này để tìm hệ số tỷ lệ cần thiết cho màn hình đó [độ dài CSS chia cho độ dài do người dùng cung cấp]

Sau đó, hệ số tỷ lệ này có thể được đặt thành thuộc tính tùy chỉnh và được sử dụng để tính toán độ dài chính xác trong CSS

html {
  --unit-scale: 1.428;
}

.box {
  /* 5 real-world centimeters */
  width: calc[5cm * var[--unit-scale, 1]];
}

Người dùng trình đọc màn hình có thể truy cập ô chữ Times

Nhóm NYT Open đã viết về một số cải tiến đối với trang web của New York Times giúp nó dễ truy cập hơn trong những năm gần đây. Trang web sử dụng HTML ngữ nghĩa [_______23,

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

0, v.v. ], tăng độ tương phản trên các thành phần quan trọng [e. g. , đăng nhập và đăng ký] và các liên kết bỏ qua nội dung thích ứng với tường phí của trang web

Ngoài ra, nhóm Trò chơi đã giúp người dùng bàn phím và trình đọc màn hình có thể truy cập trò chơi ô chữ hàng ngày. Trò chơi ô chữ được triển khai dưới dạng lưới gồm các phần tử SVG

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

1. Khi người dùng điều hướng qua câu đố, thuộc tính

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

2 của ô vuông hiện tại [tên có thể truy cập] được cập nhật động để cung cấp ngữ cảnh bổ sung

Trình đọc màn hình thông báo gợi ý, số chữ cái trong giải pháp và vị trí của ô vuông đã chọn

Bạn có thể chơi ô chữ nhỏ mà không cần tài khoản. Hãy thử giải câu đố bằng bàn phím

Các biến CSS được giải quyết trước khi giá trị được kế thừa

Yuan Chuan gần đây đã chia sẻ một bài kiểm tra CSS nhỏ mà tôi đã không trả lời đúng vì tôi không chắc liệu một biến CSS [hàm

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

3] được giải quyết trước hay sau khi giá trị được kế thừa. Tôi sẽ cố gắng giải thích cách thức hoạt động của nó trong ví dụ sau

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

Câu hỏi. Màu của đoạn văn ở chân trang là

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

4 hay

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

5? . Hoặc [A] các giá trị đã khai báo của cả hai thuộc tính tùy chỉnh được kế thừa cho đoạn và sau đó thuộc tính

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

6 phân giải thành

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

5 hoặc [B] thuộc tính

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

8 phân giải thành

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

4 trực tiếp trên phần tử

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

60, sau đó giá trị này được kế thừa cho

Câu trả lời đúng là phương án B [màu đen]. Các biến CSS được giải quyết trước khi giá trị được kế thừa. Trong trường hợp này,

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

8 rơi trở lại

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

4 vì

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

64 không tồn tại trên phần tử

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

60. Quy định này được quy định trong

Điều quan trọng cần lưu ý là các thuộc tính tùy chỉnh giải quyết mọi hàm

html {
  --text-color: var[--main-color, black];
}

footer {
  --main-color: brown;
}

p {
  color: var[--text-color];
}

3 trong các giá trị của chúng tại thời điểm giá trị được tính toán, xảy ra trước khi giá trị được kế thừa

Phần cứng hoạt hình CSS có được tăng tốc không?

CSS được tăng tốc phần cứng trên trình duyệt dành cho máy tính để bàn và thiết bị di động . CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser's slower software rendering engine.

CPU hoạt hình có chuyên sâu không?

Có thể sử dụng nhiều CPU, tùy thuộc vào phần mềm của bạn và hoạt ảnh mà bạn kết xuất . Nói chung, nó rất chuyên sâu về CPU [hoạt hình CSS html 5] hoặc rất chuyên sâu về GPU [kết xuất CAD, v.v. ]

SVG có sử dụng GPU không?

Hoạt ảnh SVG hiện được GPU tăng tốc trong Chrome .

Kiểu nào sau đây có thể cho phép kết xuất được tăng tốc GPU trong CSS?

Để kích hoạt GPU để tổng hợp một phần tử HTML, chúng ta có thể áp dụng quy tắc CSS sau cho một phần tử. biến đổi. giao dịch3d[0,0,0]; .

chuyển tiếp CSS3

Chuyển đổi CSS3 3D

Tranh Canvas

Bản vẽ WebGL 3D