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à chụp ảnh tại nhà. Hãy cùng tìm hiểu sâu hơn và xem có gì 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 biểu định kiểu CSS bằng câu lệnh import, giống như mô-đun JavaScript. Sau đó, bạn có thể áp dụng biểu định kiểu cho tài liệu hoặc gốc bóng theo cách tương tự như biểu định 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. Ngoài ra, không giống như những cách khác để áp dụng CSS từ JavaScript, bạn không cần tạo các phần tử hoặc kết hợp với các chuỗi văn bản CSS trong JavaScript.

Để sử dụng kiểu này, hãy nhập biểu định kiểu bằng assert {type: 'css'}, sau đó áp dụng biểu đị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 lưu ý rằng nếu bạn thoát khỏi assert – tệp này sẽ được coi là JavaScript và không hoạt động!

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

API Vị trí cửa sổ đa 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í 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 toàn màn hình trên màn hình chính và ghi chú của người thuyết trình sẽ xuất hiện trên màn hình khác.

API Vị trí cửa sổ đa màn hình giúp bạn có thể liệt kê các 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à bản dùng thử theo nguyên gốc thứ hai nên 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ể kiểm tra nhanh 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ề các 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);
}

Ngoài ra, API này còn 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 vào hoặc bị gỡ bỏ.

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 về Quản lý một số màn hình bằng API Vị trí cửa sổ đa màn hình trên web.dev để tìm hiểu kỹ 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 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 bốn tuần một lần.

Thời điểm đó đã đến và chúng tôi sẽ vận chuyển 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 liên quan đến PWA

Nếu đang xây dựng một Ứng dụng web tiến bộ, bạn nên dùng thử hai bản dùng thử theo nguyên gốc mới.

Trình xử lý URL cho PWA

Nếu đã cài đặt PWA và nhấp vào một đường liên kết đến PWA đó, bạn có thể muốn PWA mở trong PWA, không phải 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 của bạn, đườ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/*"]
      }
    }
  ]
}

Ngoài ra, 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ừ những nguồn gốc khác mà bạn sở hữu.

Mọi thông tin chi tiết về bản dùng thử theo nguyên gốc đều có trong PWA dưới dạng 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 khách để 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ổ, như các nút đóng, phóng to và thu nhỏ.

Bạn có thể dùng tính năng này để làm cho PWA đã cài đặt trông giống với 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ẽ 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ộ. Hội nghị PWA là sự kiện cộng tác giữa các thành viên thuộc một số công ty liên quan đến việc tạo ra công nghệ PWA: Google, Intel, Microsoft và Samsung.

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

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

Tất nhiên, vẫn còn nhiều lý do khác.

  • Các mục trong hộp linh hoạt và hộp linh hoạt đã hỗ trợ thêm cho 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ợ tệp SVG.
  • Đồng thời, thuộc tính media sẽ được áp dụng khi đặt meta theme-color, vì vậy, bạn có thể chỉ định 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

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

Đăng ký

Để 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 và ngay sau khi Chrome 94 đượ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!