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

Pete LePage

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

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 93.

Tập lệnh mô-đun CSS

Giờ đây, bạn có thể tải trang kiểu CSS bằng câu lệnh import, giống như các mô-đun JavaScript. Sau đó, bạn có thể áp dụng các trang kiểu cho tài liệu hoặc gốc bóng theo cách tương tự như các trang kiểu có thể tạo.

Tính năng Tập lệnh mô-đun CSS mới rất phù hợp với các phần tử tuỳ chỉnh. Và không giống như các cách áp dụng CSS khác từ JavaScript, bạn không cần tạo các phần tử hoặc làm rối mã JavaScript của văn bản CSS.

Để sử dụng, hãy nhập trang tính kiểu bằng assert {type: 'css'}, sau đó áp dụng trang tính kiểu đó cho document hoặc shadowRoot bằng cách gọi adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Nhưng hãy cẩn thận, nếu bạn bỏ qua assert, tệp sẽ được coi là JavaScript và sẽ không hoạt động!

Hãy xem bài viết Sử dụng tập lệnh mô-đun CSS để nhập các tệp định kiểu trên web.dev để biết thông tin chi tiết đầy đủ.

API vị trí cửa sổ nhiều màn hình

Đối với một số ứng dụng, việc mở cửa sổ mới và đặt các cửa sổ đó ở những vị trí cụ thể hoặc màn hình cụ thể là một tính năng quan trọng. Ví dụ: khi sử dụng Trang trình bày để trình bày, tôi muốn các trang trình bày xuất hiện ở chế độ toàn màn hình trên màn hình chính và ghi chú của người nói xuất hiện trên màn hình còn lại.

API Vị trí cửa sổ nhiều màn hình cho phép liệt kê màn hình được kết nối với máy của người dùng và đặt cửa sổ trên các màn hình cụ thể. Đây là lần thử nghiệm thứ hai về nguồn gốc và chúng tôi đã thực hiện một số thay đổi dựa trên ý kiến phản hồi của bạn.

Bạn có thể nhanh chóng kiểm tra xem có nhiều màn hình được kết nối với thiết bị hay không:

const isExtended = window.screen.isExtended;
// returns true/false

Tuy nhiên, chức năng chính nằm trong window.getScreens(), cung cấp tất cả thông tin chi tiết về màn hình đính kèm.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Ví dụ: bạn có thể xác định màn hình chính, sau đó sử dụng requestFullscreen() để hiển thị một phần tử trên màn hình đó.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Đồng thời, lớp này cung cấp một cách để theo dõi các thay đổi, chẳng hạn như nếu màn hình mới được cắm hoặc xoá.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Hãy xem bài viết của Tom Quản lý nhiều màn hình bằng API Vị trí cửa sổ nhiều màn hình trên web.dev để tìm hiểu sâu hơn.

Rút ngắn chu kỳ phát hành

Vào tháng 3, chúng tôi đã thông báo về kế hoạch rút ngắn chu kỳ phát hành và phát hành phiên bản Chrome mới mỗi 4 tuần.

Thời điểm đó đã đến và chúng tôi sẽ phát hành Chrome 94 vào ngày 21 tháng 9. Bạn có thể tìm thấy ngày phát hành dự kiến cho từng phiên bản trên Lịch Chrome.

Các tính năng mới của PWA

Nếu bạn đang xây dựng một Ứng dụng web tiến bộ, bạn nên tham khảo hai thử nghiệm mới về nguồn gốc.

Trình xử lý URL cho PWA

Nếu đã cài đặt một PWA và nhấp vào đường liên kết đến PWA đó, có thể bạn muốn đường liên kết đó mở trong PWA, chứ không phải trong thẻ trình duyệt.

Bằng cách chỉ định url_handlers trong tệp kê khai ứng dụng web và thêm tệp web-app-origin-association vào thư mục .well-known/, bạn có thể cho trình duyệt biết rằng nếu người dùng nhấp vào một đường liên kết đến PWA, thì đường liên kết đó sẽ mở trong PWA đã cài đặt.

Ví dụ về url_handlers trong tệp manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Tệp web-app-origin-association mẫu:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Và chỉ cần xác minh thêm một chút, bạn thậm chí có thể yêu cầu PWA xử lý các đường liên kết từ các nguồn gốc khác mà bạn sở hữu.

Tất cả thông tin chi tiết về thử nghiệm nguồn gốc đều có trong bài viết PWA làm Trình xử lý URL trên web.dev.

Lớp phủ chế độ điều khiển cửa sổ

Lớp phủ điều khiển cửa sổ mở rộng khu vực ứng dụng để bao phủ toàn bộ cửa sổ, bao gồm cả thanh tiêu đề và các nút điều khiển cửa sổ, chẳng hạn như nút đóng, phóng to và thu nhỏ.

Bạn có thể sử dụng tính năng này để làm cho PWA đã cài đặt trông giống các ứng dụng đã cài đặt khác.

Để biết thêm thông tin về bản dùng thử theo nguyên gốc, hãy xem bài viết Tuỳ chỉnh lớp phủ chế độ điều khiển cửa sổ trên thanh tiêu đề của PWA.

Hội nghị PWA

Hội nghị PWA sắp diễn ra vào tháng 10. Đây là một hội nghị trực tuyến miễn phí, tập trung vào việc giúp mọi người thành công với Ứng dụng web tiến bộ. PWA Summit là một sự kiện cộng tác giữa các chuyên gia đến từ một số công ty tham gia vào việc tạo ra các công nghệ PWA: Google, Intel, Microsoft và Samsung.

Có rất nhiều nội dung và bài nói chuyện thú vị. Bạn có thể tìm hiểu thêm và đăng ký tại PWASummit.org.

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

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

  • Các mục flexbox và flexbox đã hỗ trợ thêm các từ khoá căn chỉnh: start, end, self-start, self-end, left và right.
  • API bảng nhớ tạm không đồng bộ hiện hỗ trợ các tệp SVG.
  • Ngoài ra, thuộc tính media sẽ được áp dụng khi thiết lập meta theme-color, vì vậy, bạn có thể chỉ định các màu giao diện khác nhau cho chế độ sáng và tối.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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 các thay đổi trong Chrome 93.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, 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 94 đượ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!