Điểm mới trên nền tảng web vào tháng 8

Khám phá một số tính năng thú vị đã ra mắt trong các trình duyệt web phiên bản ổn định và thử nghiệm vào tháng 8 năm 2024.

Vào tháng 8 năm 2024, Firefox 129Chrome 128 đã ổn định. Bài đăng này xem xét các tính năng mới được thêm vào nền tảng web.

Nội dung cập nhật về định dạng ruby

Phần tử <ruby> HTML là một công cụ mạnh mẽ để nâng cao khả năng trình bày văn bản, đặc biệt là đối với các ngôn ngữ Đông Á. Phần tử này cho phép bạn hiển thị chú thích về âm vị học hoặc thông tin bổ sung khác ở phía trên hoặc bên cạnh văn bản cơ sở. Kể từ Chrome 128, chú thích ruby có thể ngắt dòng và bạn có thể tạo kiểu văn bản ruby bằng thuộc tính CSS ruby-align.

Tìm hiểu thêm trong phần Thuộc tính <ruby> có thể ngắt dòng và ruby-align CSS.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties cho tính năng Vẽ bằng nhiều bút

Thay đổi này, được cung cấp trong Chrome 128, cung cấp một cách an toàn và đáng tin cậy để xác định từng bút (con trỏ) tương tác với màn hình nhằm đặt màu hoặc hình dạng bút cụ thể cho từng thiết bị tương tác với bộ chuyển đổi kỹ thuật số. Tệp này mở rộng giao diện PointerEvent để thêm một thuộc tính mới là deviceProperties. Thuộc tính này chứa thuộc tính uniqueId, đại diện cho một giá trị nhận dạng duy nhất, riêng biệt với tài liệu, tồn tại trong phiên mà bạn có thể sử dụng một cách đáng tin cậy để xác định từng bút cảm ứng tương tác với trang.

Promise.try

Ngoài ra, trong Chrome 128, Promise.try giúp bạn dễ dàng xử lý lỗi bằng Promise. Có một mẫu mà bạn có một hàm, f. Hàm này có thể không đồng bộ và trả về một Lời hứa hoặc không. Để sử dụng ngữ nghĩa Lời hứa để xử lý lỗi trong cả hai trường hợp, bạn sẽ gói hàm trong một Lời hứa. Điều này thường được thực hiện bằng new Promise(resolve => resolve(f())).

Promise.try là một cách đơn giản hơn để thực hiện việc này. Phương thức này cho phép bạn bắt đầu một chuỗi Promise để phát hiện tất cả lỗi trong trình xử lý .catch thay vì phải xử lý cả luồng ngoại lệ đồng bộ và không đồng bộ.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

Tạo hiệu ứng động cho mục nhập

Firefox 129 bao gồm hai tính năng CSS dùng để tạo hiệu ứng ảnh động cho mục nhập. Các tính năng này hiện đã có trong Baseline Newly Available.

Quy tắc @starting-style xác định các kiểu ban đầu trên một phần tử trước khi phần tử đó hiển thị trên trang. Điều này là bắt buộc đối với các phần tử tạo ảnh động từ display: none, vì các phần tử này cần một trạng thái để tạo ảnh động.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Hiệu ứng nhập cũng yêu cầu ảnh động của các thuộc tính riêng biệt, những thuộc tính không thể nội suy giữa các giá trị. Giờ đây, bạn có thể thực hiện việc này bằng transition-behavior: allow-discrete hoặc giá trị allow-discrete trong viết tắt chuyển đổi. Tính năng này hiện cũng được hỗ trợ trong Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Tìm hiểu thêm trong phần Giờ đây trong Đường cơ sở: tạo hiệu ứng động cho mục nhập.

Nội dung bổ sung cho PerformanceResourceTiming

Firefox 129 thêm các thuộc tính contentTyperesponseStatus của giao diện PerformanceResourceTiming. Các giá trị này lần lượt cho biết loại nội dung của tài nguyên được tìm nạp và mã trạng thái phản hồi HTTP được trả về khi tìm nạp tài nguyên.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Phương thức toJSON() về vị trí địa lý

Ngoài ra, Firefox 129 còn có GeolocationCoordinates.toJSON()GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 hiện hỗ trợ WebDriver BiDi. Điều này có nghĩa là bạn có thể sử dụng Puppeteer với Chrome hoặc Firefox để tự động hoá. Tìm hiểu thêm trong bài viết WebDriver BiDi sẵn sàng cho bản phát hành chính thức trong Firefox, Chrome và PuppeteerThông báo về việc hỗ trợ Puppeteer chính thức cho Firefox.

Bản phát hành trình duyệt beta

Các phiên bản trình duyệt beta cho bạn xem trước những tính năng sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm thích hợp để thử nghiệm các tính năng mới hoặc việc xoá những tính năng có thể ảnh hưởng đến trang web của bạn trước khi chúng được phát hành trên toàn thế giới. Các bản thử nghiệm beta mới là Firefox 130Chrome 129. Bản thử nghiệm Safari 18 vẫn đang diễn ra. Các bản phát hành này mang đến nhiều tính năng tuyệt vời cho nền tảng. Hãy xem ghi chú phát hành để biết tất cả thông tin chi tiết. Sau đây là một số điểm nổi bật.

Firefox 130 hỗ trợ thuộc tính tên của phần tử <details> nhóm các phần tử <details>, trong đó mỗi lần chỉ có thể mở một phần tử trong một nhóm. Điều này cho phép bạn tạo một accordion độc quyền mà không cần sử dụng JavaScript.

Chrome 129 thêm thuộc tính interpolate-size CSS và hàm calc-size().

Thuộc tính interpolate-size CSS cho phép một trang chọn sử dụng ảnh động và hiệu ứng chuyển đổi của các từ khoá định cỡ nội tại CSS như auto, min-contentfit-content, trong trường hợp các từ khoá đó có thể tạo ảnh động.

Hàm calc-size() CSS là một hàm CSS tương tự như calc(), tuy nhiên, hàm này cũng hỗ trợ các thao tác trên đúng một từ khoá định cỡ được hỗ trợ. Các từ khoá định cỡ hiện được hỗ trợ là auto, min-content, max-contentfit-content.

Ngoài ra, trong Chrome 129 còn có Intl.DurationFormat, cung cấp phương thức định dạng thời lượng, ví dụ: "1 giờ 40 phút 30 giây" hỗ trợ nhiều ngôn ngữ.