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 tài sản CSS overflow.
• Feature Policy API được đổi tên thành Permissions Policy.
• Ngoài ra, có một cách mới để triển khai và sử dụng Shadow DOM trực tiếp trong HTML.
• Tôi từng sở hữu một vài chiếc áo khoác gần như y hệt chiếc áo này vào những năm 1990.
• Và nhiều tính năng khác.

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

Ngăn tràn bằng overflow: clip

CSS là tất cả và một túi khoai tây chiên! Tuy nhiên, tôi nghĩ mọi nhà phát triển web đều đã chứng kiến và gặp phải một điều gì đó quá ngại ngùng ở một thời điểm nào đó. Có một bài đăng hay về CSS T thủ thuật về các cách xử lý tràn, chẳng hạn như sử dụng overflow: hidden hoặc auto.

Trong CSS Overflow Spec, có một thuộc tính clip mới hoạt động tương tự như hidden.

.overflow-clip {
  overflow: clip;
}

Bằng cách sử dụng overflow: clip, bạn có thể ngăn mọi kiểu cuộn cho hộp, bao gồm 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; nó không bắt đầu 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.

À, xin lưu ý rằng cũng có overflow-clip-margin, cho phép bạn mở rộng đường viền của đoạn video. Việc này hữu ích cho các trường hợp có tình trạng tràn mực hiển thị.

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

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

Chính sách tính năng hiện được gọi là Chính sách về quyền

Quay lại Chrome 74, chúng tôi đã giới thiệu Feature Policy API, cho phép bạn bật, tắt và sửa đổi có chọn lọc hành vi của một số API và tính năng web nhất định trong trình duyệt. Những chính sách này là hợp đồng giữa bạn và trình duyệt. Các mã 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 sẵn, thì trình duyệt sẽ ghi đè hành vi có trải nghiệm người dùng tốt hơn hoặc chỉ cần nói: "hãy trao đổi" để chặn hoàn toàn API.

Kể từ Chrome 90, Feature Policy API sẽ được đổi tên thành Permissions Policy (Chính sách quyền) và tiêu đề HTTP cũng được đổi tên cùng với API này. Đồng thời, cộng đồng đã chấp nhận 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 chính sách này trên trang web của mình, hãy xem phần Giới thiệu về Chính sách tính năng.

DOM bóng khai báo

DOM tối, một phần của tiêu chuẩn về Thành phần web, cung cấp cách xác định phạm vi kiểu CSS đến một cây con DOM cụ thể và tách riêng 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 DOM bóng là tạo gốc bóng (shadow) 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 hiệu quả khi kết xuất phía máy khách, nhưng không hiệu quả lắm khi hiển thị phía máy chủ khi không có cách nào để thể hiện Nguồn gốc bóng trong HTML được tạo do máy chủ tạo. Tuy nhiên, kể từ Chrome 90, với Declarative Shadow DOM, bạn đã sẵn sàng. Bạn có thể tạo gốc bóng chỉ bằng HTML.

Gốc bóng khai báo là phần tử <template> có thuộc tính shadowroot. Biến 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 sau:

<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 việc đó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ả Gốc bóng (Shadow Root).

Hãy tham khảo Declarative Shadow DOM trên web.dev để biết thêm chi tiết.

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

Và tất nhiên còn nhiều lợi ích khác.

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

Ngoài ra, bộ mã hoá AV1 đang vận chuyển trong Chrome cho máy tính để bàn đượ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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm những 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)
• Ngừng sử dụng và xoá Chrome 90
• Thông tin cập nhật về ChromeStatus.com cho Chrome 90
• Những điểm mới về JavaScript trên Chrome 90
• Danh sách thay đổi kho lưu trữ nguồn Chromium

Đăng ký

Nếu bạn muốn nắm bắt thông tin mới nhất về 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 và ngay khi Chrome 91 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!

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

Tôi rất vui khi quay tập phim mới theo chủ đề những năm 1990 trong Chrome. Cảm ơn rất nhiều cảm ơn của bạn đã đóng góp ý tưởng và tập hợp những con người tuyệt vời đã góp phần mở ra xu hướng thời gian cho đến năm 1990.

Và tất nhiên là Loren Borja, Lee Carruthers và Lukas Holcek, những người thực hiện tất cả các video Mới trong Chrome và giúp tôi trông đẹp hơn thực sự. XIN CẢM ƠN!