Hiển thị trạng thái Đường cơ sở trên bài đăng trên blog và bản trình bày

Ngày xuất bản: 23 tháng 10 năm 2024

Trong bài đăng này, hãy tìm hiểu cách bạn có thể sử dụng thành phần web <baseline-status> mới trên trang web của riêng mình và các biểu trưng Baseline trong bản trình bày, bất cứ khi nào bạn viết hoặc nói về các tính năng của nền tảng web.

Hầu hết nhà phát triển đều từng gặp phải tình huống tìm kiếm giải pháp cho một vấn đề về phát triển web, tìm thấy một bài viết mô tả giải pháp hoàn hảo, sau đó nhận ra ngay ở cuối bài viết rằng giải pháp đó chỉ có trong một trình duyệt. Hoặc cảm thấy hào hứng với tính năng mà người thuyết trình tại hội nghị đang mô tả, nhưng sau đó phát hiện ra tính năng đó chỉ là thử nghiệm. Đây là điều mà chúng tôi muốn cải thiện trên các trang web dành cho nhà phát triển Chrome. Trong 2 năm qua, chúng tôi đã thêm dữ liệu về khả năng tương thích từ MDN vào các bài đăng của mình.

Tuy nhiên, đường cơ sở giúp mọi thứ trở nên rõ ràng hơn. Thay vì kiểm tra từng phiên bản trình duyệt, bạn có thể kiểm tra xem một tính năng có phải là Baseline Widely available (Được hỗ trợ rộng rãi) hay không. Nhờ đó, bạn có thể yên tâm sử dụng tính năng này. Hoặc tìm hiểu rằng tính năng này mới có trong Baseline và do đó có thể tương tác, nhưng vì là một tính năng mới nên có lẽ bạn sẽ muốn cân nhắc các chiến lược dự phòng. Trên web.dev, chúng tôi đã bắt đầu thêm một thành phần Trạng thái cơ bản mới vào một số trang của mình. Bạn có thể thấy thành phần này trên bài đăng trên blog về CSS font-size-adjust.

Thành phần cho thấy font-size-adjust là Baseline Newly available (Đường cơ sở mới có sẵn).
Thành phần trên bài đăng font-size-adjust.

Thêm thành phần vào trang web

Thành phần web không chỉ dành cho chúng ta sử dụng. Chúng tôi rất vui khi được chia sẻ thành phần <baseline-status> với bạn. Bạn có thể sử dụng nhãn này để cho biết trạng thái Cơ bản đối với nội dung mà bạn tạo. Bạn có thể cài đặt thành phần này từ npm hoặc biên dịch trước từ CDN – đọc hướng dẫn cài đặt. Sau khi cài đặt, hãy cho thấy trạng thái của một tính năng như trong HTML sau đây cho font-size-adjust.

<baseline-status featureId="font-size-ad><just"/basel>ine-status

Sau đó, thành phần này sẽ tự động cập nhật khi một tính năng chuyển từ trạng thái Có phạm vi cung cấp hạn chế sang trạng thái Mới ra mắt rồi đến trạng thái Có phạm vi cung cấp rộng rãi.

Tìm featureId

featureId được truyền vào thành phần là tên của tính năng trong kho lưu trữ web-features. Thành phần này nhận được trạng thái của tính năng từ dữ liệu được thu thập thông qua dự án tính năng web.

Thêm biểu trưng Baseline

Nếu bạn đang xuất bản nội dung nào đó ở dạng bản in, PDF hoặc trình bày tại một hội nghị, thì có thể các biểu trưng sẽ giúp bạn cho biết trạng thái tại thời điểm đó. Trang tổng quan Trạng thái của nền tảng web có thể giúp bạn kiểm tra trạng thái Đường cơ sở của mọi tính năng.

Hai biểu trưng màu xanh lục có từ Baseline, xuất hiện trên nền trắng và đen.
Nhãn hiệu dạng chữ Baseline ở chế độ sáng và tối.

Bạn được cấp phép sử dụng biểu trưng Baseline trong tất cả các tài liệu của mình, hãy tải biểu trưng xuống ở định dạng PNG và SVG.

Hãy cho chúng tôi biết nơi bạn sử dụng Baseline

Chúng tôi rất mong được biết những nơi đang sử dụng Baseline. Tạo một PR và thêm đường liên kết đến nơi bạn đã sử dụng Baseline in the wild.

Bạn có ý tưởng nào khác về việc tích hợp không?

Bạn có ý tưởng nào khác về cách tích hợp Baseline không? Có thể bạn có một công cụ dành cho nhà phát triển có thể chứa thông tin này hoặc một sản phẩm sẽ được hưởng lợi khi có thể chia sẻ phiên bản Đường cơ sở mà bảng điều khiển quản trị sử dụng. Báo cáo vấn đề về ý tưởng của bạn, chúng tôi rất sẵn lòng trợ giúp.