Điểm mới trong Chrome 65

Pete LePage

Và nhiều lợi ích khác!

Tôi là Pete LePage. Hãy cùng tìm hiểu có gì mới dành cho nhà phát triển trong Chrome 65!

Bạn muốn xem danh sách đầy đủ các thay đổi? Hãy xem danh sách thay đổi kho lưu trữ nguồn Chromium.

CSS Paint API

CSS Paint API hỗ trợ bạn tạo hình ảnh theo phương thức lập trình cho các thuộc tính CSS như background-image hoặc border-image.

Thay vì tham chiếu hình ảnh, bạn có thể sử dụng chức năng vẽ mới để vẽ hình ảnh – giống như một phần tử canvas.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Ví dụ: thay vì thêm các phần tử DOM bổ sung để tạo hiệu ứng gợn sóng trên một nút có kiểu Material, bạn có thể sử dụng API vẽ.

Đây cũng là một phương pháp mạnh mẽ để chèn polyfill các tính năng CSS chưa được hỗ trợ trong trình duyệt.

Surma có một bài đăng rất hay, trong đó có một số bản minh hoạ trong phần giải thích của mình.

API Thời gian máy chủ

Hy vọng bạn đang sử dụng các API điều hướng và thời gian tài nguyên để theo dõi hiệu suất của trang web đối với người dùng thực. Cho đến nay, vẫn chưa có cách nào dễ dàng để máy chủ báo cáo thời gian hoạt động của máy chủ.

Server Timing API mới cho phép máy chủ của bạn truyền thông tin thời gian đến trình duyệt; mang lại cho bạn thông tin rõ hơn về hiệu suất tổng thể của mình.

Bạn có thể theo dõi bao nhiêu chỉ số tuỳ thích: thời gian đọc cơ sở dữ liệu, thời gian khởi động hoặc bất kỳ chỉ số nào quan trọng đối với bạn, bằng cách thêm tiêu đề Server-Timing vào phản hồi:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Chúng hiển thị trong Công cụ của Chrome cho nhà phát triển hoặc bạn có thể kéo chúng ra khỏi tiêu đề phản hồi và lưu cùng với các số liệu phân tích hiệu suất khác.


display: contents

Thuộc tính CSS display: contents mới khá mượt mà!

Khi được thêm vào một phần tử vùng chứa, mọi phần tử con đều chiếm vị trí trong DOM và về cơ bản phần tử này sẽ biến mất. Giả sử tôi có hai div, một cái bên trong cái còn lại. div bên ngoài của tôi có đường viền màu đỏ, nền màu xám và tôi đã đặt chiều rộng là 200 pixel. div bên trong có đường viền màu xanh dương và nền màu xanh dương nhạt.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Theo mặc định, div bên trong nằm trong div bên ngoài.

Tôi là người trong <div>

Việc thêm display: contents vào div bên ngoài sẽ làm cho div bên ngoài biến mất và các quy tắc ràng buộc của nó không còn được áp dụng cho div bên trong. div bên trong hiện có chiều rộng bằng 100%.

Sử dụng Công cụ cho nhà phát triển để kiểm tra DOM và nhận thấy div bên ngoài vẫn tồn tại.

Tính năng này có thể hữu ích trong nhiều trường hợp, nhưng trường hợp phổ biến nhất là với hộp linh hoạt. Với flexbox, chỉ các phần tử con trực tiếp của vùng chứa flex mới trở thành mục linh hoạt.

Tuy nhiên, sau khi bạn áp dụng display: contents cho phần tử con, phần tử con của phần tử con đó sẽ trở thành các mục linh hoạt và được bố trí theo cùng các quy tắc đã áp dụng cho phần tử mẹ.

Hãy xem bài đăng xuất sắc của Rachel Andrew về Những hộp quà tặng có nội dung hiển thị để biết thêm thông tin và các ví dụ khác.

Và nhiều tính năng khác!

Tất nhiên, đây chỉ là một vài thay đổi trong Chrome 65 dành cho nhà phát triển, còn rất nhiều thay đổi khác nữa.

  • Cú pháp để chỉ định HSL và HSLA cũng như RGB và RGBA cho thuộc tính màu nay khớp với thông số màu CSS 4.
  • Chúng tôi có chính sách về tính năng mới cho phép bạn kiểm soát các XHR đồng bộ thông qua tiêu đề HTTP hoặc thuộc tính allow iframe.

Hãy nhớ xem bài viết Tính năng mới trong Công cụ của Chrome cho nhà phát triển để tìm hiểu tính năng mới trong Công cụ cho nhà phát triển trong Chrome 65. Ngoài ra, nếu bạn quan tâm đến Ứng dụng web tiến bộ, hãy xem loạt video mới về PWA Roadshow. Sau đó, nhấp vào nút đăng ký trên kênh YouTube của chúng tôi để nhận thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage và ngay sau khi Chrome 66 được phát hành, tôi sẽ có mặt tại đây để cho bạn biết -- tính năng mới trong Chrome!