Đ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? Xem Danh sách thay đổi kho lưu trữ nguồn Chromium.

CSS Paint API

CSS Paint API cho phép 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 hàm tô màu 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 vào tạo hiệu ứng gợn sóng trên nút được tạo kiểu Material, bạn có thể sử dụng API tô màu.

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

Surma có một bài đăng thú vị với 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 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, để máy chủ báo cáo thời gian thực hiện.

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

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ỳ nội dung nào quan trọng đối với bạn, bằng cách thêm tiêu đề Server-Timing vào trả lờ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 phản hồi và lưu chúng cùng với các số liệu phân tích hiệu suất khác của bạn.


display: contents

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

Khi được thêm vào phần tử vùng chứa, bất kỳ phần tử con nào cũng sẽ chiếm vị trí trong DOM, và về cơ bản nó sẽ biến mất. Giả sử tôi có hai chiếc div, một chiếc ở trong khác. 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 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>

Thêm display: contents vào div bên ngoài, 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. Bên trong div hiện đã có chiều rộng là 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.

Cách 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à là dùng Flexbox. Với flexbox, chỉ các phần tử con liền sau của vùng chứa flex trở thành mục linh hoạt.

Tuy nhiên, sau khi bạn áp dụng display: contents cho một thành phần con, các thành phần con đó sẽ trở nên linh hoạt hơn được trình bày bằng cách sử dụng các quy tắc giống như các quy tắc đã được áp dụng cha mẹ của chúng.

Hãy xem bài đăng xuất sắc của Rachel Andrew Hộp cát tường có nội dung trưng bày để biết thêm thông tin chi tiết 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 và còn rất nhiều điều thú vị khác nữa.

  • Cú pháp để chỉ định toạ độ HSL và HSLA cũng như RGB và RGBA cho thuộc tính màu ngay bây giờ khớp với Quy cách màu CSS 4.
  • Có chính sách tính năng mới cho phép bạn để điều khiển các XHR đồng bộ thông qua tiêu đề HTTP hoặc thuộc tính iframe allow của iframe.

Hãy nhớ xem Tính năng mới trong Công cụ của Chrome cho nhà phát triển, để tìm hiểu các tính năng mới của Công cụ cho nhà phát triển trong Chrome 65. Nếu bạn muốn Progressive Web Apps, hãy thử ứng dụng web mới Loạt video về PWA Roadshow. Sau đó, hãy nhấp vào nút đăng ký trên Kênh YouTube và bạn sẽ nhận được 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 khi Chrome 66 được phát hành, tôi sẽ sẵn sàng tại đây để cho bạn biết -- tính năng mới trong Chrome!