Ngày xuất bản: 31 tháng 3 năm 2025
Một tháng nữa đã trôi qua và kể từ bản tin tổng hợp hằng tháng gần đây nhất về Điểm chuẩn, đã có rất nhiều điều xảy ra! Trong ấn bản này, chúng tôi sẽ tóm tắt một số bài đăng mà chúng tôi đã xuất bản tại web.dev, một số tính năng mới có sẵn trong Baseline và một số nội dung cập nhật về công cụ trong cộng đồng.
Phát hành ESLint 0.6.0
Gần đây, chúng tôi đã đăng về việc ESLint ra mắt tính năng hỗ trợ tìm lỗi mã nguồn CSS. Trong lần ra mắt này, chúng tôi đã thêm một quy tắc ESLint mới – require-baseline – để tìm lỗi mã nguồn các tính năng CSS mà bạn sử dụng trong dự án và liệu các tính năng đó có đạt đến một ngưỡng Baseline cụ thể hay không.
Gần đây, ESLint đã ra mắt phiên bản 0.6.0 của gói @eslint/css, trong đó có một bản cập nhật mới quan trọng đổi tên quy tắc require-baseline thành use-baseline. Mặc dù có vẻ như đây là một bản cập nhật nhỏ, nhưng bản cập nhật này giúp cải thiện khả năng đọc của quy tắc. Bản phát hành này cũng có một số tính năng và bản sửa lỗi quan trọng khác, chẳng hạn như tính năng bổ sung của quy tắc use-baseline để tìm lỗi mã nguồn cho các khối CSS lồng nhau. Nếu bạn đang sử dụng phiên bản cũ của @eslint/css, hãy xem bản cập nhật này!
Cách truy vấn Trang tổng quan về nền tảng web
Đầu tháng này, chúng tôi đã xuất bản một bài đăng về cách truy vấn Trang tổng quan của nền tảng web. Bạn có thể truy vấn trang tổng quan này trên phần giao diện người dùng, cũng như thông qua API HTTP. Điều này có thể hữu ích cho công cụ Đường cơ sở, vì bạn có thể truy vấn API để tìm các tính năng đã đạt đến một ngưỡng Đường cơ sở cụ thể.
API này có thể hữu ích cho công cụ mà bạn cần nhanh chóng nhận được thông tin về các tính năng cụ thể. Ví dụ: bạn có thể sử dụng loại công cụ này để viết một tập lệnh cho biết những tính năng nào gần đây đã trở thành Mới có sẵn trong cơ sở đường cơ sở hoặc Có sẵn rộng rãi. Nếu bạn thấy thông tin này hữu ích, hãy đọc bài đăng này!
Cách suy nghĩ về Baseline và polyfill
Nhiệm vụ của Baseline là giúp bạn biết rõ những tính năng nào có thể sử dụng một cách an toàn. Tuy nhiên, ngay cả khi đã có thông tin rõ ràng hơn, bạn vẫn phải suy nghĩ về cách áp dụng các tính năng sao cho phù hợp với ứng dụng web của mình. Polyfill đóng vai trò quan trọng trong quá trình đó. Đường cơ sở không xem xét polyfill trong việc liệu các tính năng có Mới hay Phổ biến hay không và không cố gắng cho bạn biết liệu có nên sử dụng các tính năng đó hay không. Quyết định đó là dành riêng cho ứng dụng của bạn, nhưng đây là một yếu tố quan trọng cần cân nhắc!
Gần đây, chúng tôi đã xuất bản một bài đăng về cách suy nghĩ về Đường cơ sở và polyfill. Chúng tôi cho rằng bài đăng này cung cấp một khung hữu ích về cách suy nghĩ về việc sử dụng các tính năng này. Chúng tôi hy vọng rằng khi các tính năng trở thành Mới hoặc Phổ biến trong Đường cơ sở, thì polyfill sẽ không còn cần thiết nữa. Không nghi ngờ gì về việc polyfill là những công cụ hữu ích trong hộp công cụ phát triển của bạn, nhưng chúng cũng có những hạn chế – có thể ảnh hưởng tiêu cực đến hiệu suất của trang web và trong một số trường hợp, thậm chí có thể gây ra vấn đề về khả năng hỗ trợ tiếp cận. Hy vọng hướng dẫn này sẽ giúp bạn giải quyết câu hỏi khó khăn này!
contenteditable="plaintext-only" hiện là Đường cơ sở Mới có
Thuộc tính contenteditable trên phần tử HTML cho phép người dùng thay đổi nội dung của phần tử đó như thể đó là một trường văn bản. Ví dụ: điều này có nghĩa là bạn có thể đặt thuộc tính trên phần tử <p> và người dùng có thể tương tác với phần tử đó như một <textarea>. Trong một số trường hợp sử dụng, việc sử dụng contenteditable mang lại nhiều lợi thế so với các phần tử biểu mẫu thông thường.
Tuy nhiên, người dùng dán nội dung vào các phần tử có thể chỉnh sửa và nội dung họ dán có thể chứa định dạng văn bản đa dạng thức. Điều này có thể gây khó chịu cho những người dùng chỉ muốn dán văn bản chưa định dạng vào một trường. Tổ hợp thuộc tính/giá trị contenteditable="plaintext-only" ngăn chặn việc này xảy ra và gần đây đã trở thành Đường cơ sở mới có sẵn. Để tìm hiểu thêm, hãy đọc bài đăng thông báo và tìm hiểu cách bạn có thể mang đến trải nghiệm chỉnh sửa tốt hơn cho những người dùng chỉ muốn dán văn bản vào các mục mà không cần phải làm gì khác.
Intl.DurationFormat hiện là Đường cơ sở Mới có
Có thể bạn đã từng truy cập vào một trang web và thấy một đoạn văn bản cho biết khoảng thời gian cho đến hoặc sau một sự kiện nào đó, thường là ở dạng chuỗi như "2 ngày, 6 giờ, 3 phút". Dữ liệu này rất hữu ích để truyền đạt bất kỳ thông tin nào kịp thời, nhưng thường do thư viện cung cấp. Ngoài ra, bạn có thể muốn xuất thông tin này bằng nhiều ngôn ngữ.
Nhập Intl.DurationFormat, một tính năng quốc tế hoá gần đây đã trở thành Baseline Newly available (Cơ sở mới có sẵn). Với lớp Intl.DurationFormat, bạn có thể truyền một đối tượng vào hàm khởi tạo của lớp này chứa các đơn vị thời gian mà bạn muốn định dạng thành một chuỗi và bằng hầu hết ngôn ngữ mà bạn có thể nghĩ đến:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
Điều thú vị là nếu ứng dụng của bạn dựa vào thư viện để định dạng chuỗi như thế này, thì bạn sẽ sớm có thể làm như vậy mà không cần thư viện, giúp người dùng tiết kiệm hàng kilobyte. Để biết thêm thông tin, hãy đọc bài đăng thông báo về Intl.DurationFormat và tìm hiểu cách tận dụng tính năng mới hữu ích này!
Đường cơ sở tại Ngày thảo luận chuyên sâu của W3C năm 2025
Gần đây, W3C đã tổ chức phiên Breakouts Day năm 2025, trong đó các thành viên đã trình bày về nhiều chủ đề và một phiên hữu ích về Baseline vào ngày 26 tháng 3.
Nếu bạn mới sử dụng Baseline, phiên này sẽ cung cấp thông tin tổng quan nhanh. Tài liệu này trình bày các khái niệm cơ bản về Đường cơ sở, chẳng hạn như khái niệm Mới và Phổ biến, nhưng cũng trình bày cách dữ liệu xác định các định nghĩa đó, bắt đầu từ browser-compat-data, cho đến dữ liệu web-features giúp chúng tôi xác định những tính năng nào đang ở ngưỡng Đường cơ sở nào.
Đừng lo nếu bạn đã bỏ lỡ buổi đào tạo này! Bạn có thể xem các trang trình bày của phiên này. Hãy xem nếu bạn tò mò.
Vậy là xong!
Bản tin tóm tắt hằng tháng này không chỉ đánh dấu sự kết thúc của tháng mà còn đánh dấu sự kết thúc của quý. Nếu bạn đã bỏ lỡ các phiên bản trước của bản tin tóm tắt, hãy xem các ấn bản tháng 1 và tháng 2 để nắm bắt mọi thông tin về Baseline trong quý đầu tiên của năm nay. Như thường lệ, hãy cho chúng tôi biết nếu chúng tôi bỏ lỡ bất kỳ thông tin nào liên quan đến Đường cơ sở. Chúng tôi sẽ đảm bảo thông tin đó được đưa vào phiên bản sau này. Hẹn gặp lại bạn sau một tháng!