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.
• 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

Dịch vụ so sánh giá toàn cầu (CSS) chỉ toàn là một túi khoai tây chiê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 kiểu cuộn trong hộp, bao gồm cả thao tác cuộn có lập trình. Điều đó có nghĩa là hộp không được coi là vùng chứa cuộn; hộp 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 xén trên 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 về quyền và tiêu đề HTTP theo đó cũng được đổi tên. Đồ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 muốn biết cách sử dụng mã này trên trang web của mình, hãy xem nội dung Giới thiệu về Chính sách tính năng.

Shadow DOM khai báo

DOM tối (Shadow DOM) là 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ác kiểu CSS trong một cây con DOM cụ thể và tách riêng cây con đó khỏ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ủ, nơi 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 khai báo là một phần tử <template> có thuộc tính shadowroot. Giá trị này được trình phân tích cú pháp HTML phát hiện và ngay lập tức được áp dụng 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. 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

Nội dung 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 ChromeStatus.com dành 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 bạn muốn cập nhật video, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome của chúng tôi. 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 đã có rất nhiều niềm vui khi quay tập phim mới theo chủ đề những năm 1990 trên Chrome. 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, những người đã làm việc với tất cả các video về tính năng Mới trong Chrome và khiến tôi trông đẹp hơn nhiều so với thực tế. CẢM ƠN BẠN!