Điểm mới trong Chrome 65

Pete LePage

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

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

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

API CSS Paint

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 vẽ mới để vẽ hình ảnh đó – giống như 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 nút được tạo kiểu bằng Material, bạn có thể sử dụng paint API.

Đây cũng là một phương pháp hiệu quả để lấp đầy 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 với 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 API điều hướng và API 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ó một cách dễ dàng để máy chủ báo cáo thời gian hiệu suất của nó.

API thời gian máy chủ 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; giúp bạn hiểu 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"'

Những sự kiện này hiển thị trong Công cụ của Chrome cho nhà phát triển hoặc bạn có thể kéo ra khỏi tiêu đề 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á hấp dẫn!

Khi được thêm vào một phần tử vùng chứa, mọi phần tử con sẽ thay thế phần tử con đó trong DOM và về cơ bản sẽ biến mất. Giả sử tôi có 2 div, một ở trong thành phần 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 trên 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 sẽ nằm trong div bên ngoài.

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

Nếu bạn thêm display: contents vào div bên ngoài, div bên ngoài sẽ 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 nữa. div bên trong hiện có chiều rộ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.

Có nhiều trường hợp chức năng này có thể hữu ích, nhưng trường hợp phổ biến nhất là dùng 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 linh hoạt sẽ trở thành các 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ở thành các mục linh hoạt và được bố trí theo chính quy tắc áp dụng cho thành phần mẹ.

Hãy xem bài đăng tuyệt vời của Rachel Andrew trong bài đăng Hộp làm sạch có nội dung hiển thị để biết thêm chi tiết và các ví dụ khác.

Và nhiều kiến thức khác!

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

Hãy nhớ xem phần Mới trong Công cụ của Chrome cho nhà phát triển để tìm hiểu những 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 đó, 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 bất cứ khi nào 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 -- những điểm mới trong Chrome!