Tính năng mới trong Chrome 90

Pete LePage

Dưới đây là những gì bạn cần phải biết:

• Có một giá trị mới cho thuộc tính overflow của CSS.
• API Chính sách về tính năng đã được đổi tên thành Chính sách về quyền.
• Ngoài ra, còn có một cách mới để triển khai và sử dụng Shadow DOM trực tiếp trong HTML.
• Tôi đã sở hữu một vài chiếc áo khoác gần giống như thế này vào những năm 1990.
• Và còn nhiều tính năng khác.

Tôi là Pete LePage và tôi có 411 dành cho nhà phát triển trong Chrome 90, theo phong cách của năm 1990!

Ngăn tình trạng tràn bộ nhớ bằng overflow: clip

CSS là tất cả những gì bạn cần! Tuy nhiên, tôi nghĩ rằng mọi nhà phát triển web đều đã thấy và trải nghiệm một số vấn đề tràn viền một cách khó xử tại một thời điểm nào đó. Có một bài đăng tuyệt vời trên CSS Tricks về nhiều cách để xử lý tình trạng tràn, chẳng hạn như sử dụng overflow: hidden hoặc auto.

Trong Thông số kỹ thuật CSS Overflow, có một thuộc tính clip mới hoạt động tương tự như hidden.

.overflow-clip {
  overflow: clip;
}

Khi sử dụng overflow: clip, bạn có thể ngăn mọi loại thao tác cuộn cho hộp, bao gồm cả thao tác cuộn theo lập trình. Điều đó có nghĩa là hộp này không được coi là vùng chứa cuộn; hộp này không bắt đầu một ngữ cảnh định dạng mới. Nếu cần, bạn có thể áp dụng tính năng cắt cho một trục thông qua overflow-x và overflow-y.

Ngoài ra, xin lưu ý rằng còn có overflow-clip-margin cho phép bạn mở rộng đường viền của phần cắt. Điều này hữu ích trong trường hợp có tràn mực cần hiển thị.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Xem overflow: clip hoạt động tại https://petele-css-is-awesome.glitch.me/

Chính sách về tính năng hiện là Chính sách về quyền

Trong Chrome 74, chúng tôi đã ra mắt API Chính sách tính năng. API này cho phép bạn bật, tắt và sửa đổi hành vi của một số API và tính năng web nhất định trong trình duyệt. Các chính sách này là một hợp đồng giữa bạn và trình duyệt. Các hành động này sẽ thông báo cho trình duyệt về ý định của bạn.

Nếu mã của bạn hoặc bất kỳ thư viện bên thứ ba nào mà bạn sử dụng vi phạm các quy tắc đã chọn trước, thì trình duyệt sẽ ghi đè hành vi đó bằng trải nghiệm người dùng tốt hơn hoặc chỉ nói "nói chuyện với tay", chặn hoàn toàn API.

Kể từ Chrome 90, API Chính sách tính năng sẽ được đổi tên thành Chính sách quyền và tiêu đề HTTP cũng được đổi tên theo đó. Đồng thời, cộng đồng đã quyết định sử dụng một cú pháp mới, dựa trên Giá trị trường có cấu trúc cho HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Nếu bạn quan tâm đến cách sử dụng tính năng này trên trang web của mình, hãy xem bài viết Giới thiệu về Chính sách về tính năng.

Shadow DOM khai báo

Shadow DOM (DOM tối), một phần của tiêu chuẩn Thành phần web, cung cấp cách để xác định phạm vi của các kiểu CSS cho một cây con DOM cụ thể và tách biệt cây con đó với phần còn lại của tài liệu. Cho đến nay, cách duy nhất để sử dụng Shadow DOM là tạo một gốc bóng bằng JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Phương thức này hoạt động tốt đối với hoạt động kết xuất phía máy khách, nhưng không hiệu quả lắm trong hoạt động kết xuất phía máy chủ, vì không có cách tích hợp sẵn để thể hiện Shadow Roots trong HTML do máy chủ tạo. Tuy nhiên, kể từ Chrome 90, với DOM bóng đổ khai báo, bạn có thể bắt đầu sử dụng. Bạn có thể tạo gốc bóng đổ chỉ bằng HTML.

Gốc bóng đổ khai báo là một phần tử <template> có thuộc tính shadowroot. Trình phân tích cú pháp HTML sẽ phát hiện phần tử này và áp dụng ngay làm gốc bóng của phần tử mẹ.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Tải kết quả đánh dấu HTML thuần tuý trong cây DOM này:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Điều này mang lại cho chúng ta các lợi ích của tính năng đóng gói và chiếu khe của Shadow DOM trong HTML tĩnh. Bạn không cần JavaScript để tạo toàn bộ cây, bao gồm cả Shadow Root.

Hãy xem bài viết Shadow DOM khai báo trên web.dev để biết thêm thông tin chi tiết.

Và các dữ liệu khác

Và tất nhiên còn nhiều tính năng khác.

Để giúp cải thiện quyền riêng tư và thậm chí là tốc độ tải cho người dùng truy cập vào các trang web hỗ trợ HTTPS, theo mặc định, thanh địa chỉ của Chrome sẽ sử dụng https://. Nếu bạn chưa thiết lập lệnh chuyển hướng tự động từ HTTP sang HTTPS, thì đây là thời điểm thích hợp để làm việc đó.

Ngoài ra, trình mã hoá AV1 cũng được cung cấp trong Chrome dành cho máy tính. Trình mã hoá này được tối ưu hoá riêng cho tính năng hội nghị truyền hình có tích hợp WebRTC.

Tài liệu đọc thêm

Phần này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm về các thay đổi khác trong Chrome 90.

• Tính năng mới trong Công cụ của Chrome cho nhà phát triển (90)
• Các tính năng ngừng hoạt động và bị xoá trong Chrome 90
• Nội dung cập nhật của ChromeStatus.com cho Chrome 90
• Tính năng mới trong JavaScript trên Chrome 90
• Danh sách thay đổi về kho lưu trữ nguồn Chromium

Đăng ký

Nếu muốn cập nhật video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. 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. Ngay khi Chrome 91 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!

Lời cảm ơn đặc biệt

Tôi rất vui khi quay tập Mới trong Chrome theo chủ đề thập niên 1990. Cảm ơn Sean Meehan rất nhiều vì ý tưởng này và đã tập hợp những người tuyệt vời đã giúp mở ra cánh cổng thời gian đến năm 1990.

Và tất nhiên, Loren Borja, Lee Carruthers và Lukas Holcek đã làm việc trên tất cả các video của tôi về tính năng mới trong Chrome và giúp tôi trông tốt hơn nhiều so với thực tế. RẤT CẢM ƠN!