Các tính năng cơ bản bạn có thể dùng ngay hôm nay

Tìm hiểu về một số tính năng có trong Baseline.

Mariko Kosaka

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

Web luôn phát triển và trình duyệt liên tục cập nhật để cung cấp cho nhà phát triển các công cụ mới nhằm đổi mới trên nền tảng này. Những thứ trước đây yêu cầu thư viện trợ giúp trở thành một phần của nền tảng web và được hỗ trợ trên tất cả trình duyệt, cùng với các cách ngắn gọn hoặc dễ dàng hơn để mã hoá các thành phần thiết kế.

Mặc dù việc liên tục phát triển và thích ứng này rất hữu ích, nhưng cũng có thể gây nhầm lẫn. Có thể bạn sẽ khó nắm bắt được tất cả nội dung cập nhật này. Là nhà phát triển, chúng tôi có những câu hỏi như "Khi nào tất cả công cụ trình duyệt sẽ hỗ trợ tính năng mới này?" "Khi nào tôi có thể bắt đầu sử dụng các tính năng đó trong mã sản xuất?" "Chúng tôi nên hỗ trợ các trình duyệt cũ trong bao lâu?"

Câu trả lời chính xác là "tuỳ trường hợp". Những gì cần thiết và có thể sử dụng thực sự phụ thuộc vào cơ sở người dùng, ngăn xếp công nghệ, cấu trúc nhóm và các thiết bị được hỗ trợ. Tuy nhiên, có một điều mà chúng ta đều đồng ý là bối cảnh hiện tại của web có thể khiến việc đưa ra những quyết định đó trở nên khó khăn.

Nhóm Chrome đang cộng tác với các công cụ trình duyệt khác và cộng đồng web để làm rõ hơn vấn đề này. Điều này bao gồm cả công việc của chúng tôi trên các dự án như Interop 2023, giúp cải thiện khả năng tương tác của một nhóm tính năng chính. Nhưng còn những tính năng ra mắt trong vài năm qua thì sao? Các tính năng thử nghiệm mà chúng ta tìm hiểu được cách đây 2 năm đã sẵn sàng để sử dụng chưa?

Trong bài đăng này, tôi muốn nêu bật một số tính năng hiện có trên tất cả các công cụ trình duyệt chính cho hai phiên bản chính trước đây. Đây là điểm cắt mà chúng tôi cảm thấy phần lớn nhà phát triển sẽ cảm thấy an toàn khi sử dụng một tính năng và đây cũng là nhóm tính năng mà chúng tôi gọi là Đường cơ sở. Để biết thêm thông tin, vui lòng xem thông báo về Đường cơ sở tại đây.

Phần tử hộp thoại

Phần tử <dialog> là một phần tử HTML mới để tạo lời nhắc hộp thoại, chẳng hạn như cửa sổ bật lên và cửa sổ phương thức.

Để sử dụng, hãy xác định phần tử phương thức, sau đó mở hộp thoại bằng cách gọi phương thức showModal() trên phần tử hộp thoại.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

Là một phần tử HTML tích hợp, các tính năng như quản lý tiêu điểm, theo dõi thẻ và duy trì ngữ cảnh xếp chồng được tích hợp sẵn. Để biết thêm thông tin, hãy đọc bài viết Tạo thành phần hộp thoại.

Các thuộc tính biến đổi CSS riêng lẻ

Sử dụng phép biến đổi CSS là một cách hiệu quả để thêm chuyển động vào trang web của bạn. Bạn có thể quen với việc viết các phép biến đổi CSS với ba thuộc tính trong một dòng. Với các thuộc tính biến đổi riêng lẻ, giờ đây, bạn có thể chỉ định từng thuộc tính biến đổi. Điều này sẽ hữu ích khi bạn viết ảnh động khung hình chính phức tạp.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Để biết nội dung giải thích chuyên sâu về thay đổi này, hãy đọc bài viết Kiểm soát chi tiết hơn đối với các phép biến đổi CSS bằng các thuộc tính biến đổi riêng lẻ.

Đơn vị khung nhìn mới

Trên thiết bị di động, kích thước khung nhìn chịu ảnh hưởng của việc có hay không có thanh công cụ động. Đôi khi, bạn có thể thấy thanh địa chỉ và thanh công cụ điều hướng, nhưng đôi khi các thanh công cụ đó lại bị thu gọn hoàn toàn. Kích thước thực tế của khung nhìn sẽ khác nhau tuỳ thuộc vào việc thanh công cụ có hiển thị hay không. Các đơn vị khung nhìn mới như svhlvh giúp nhà phát triển web kiểm soát tốt hơn khi thiết kế cho thiết bị di động. Bạn có thể tìm hiểu thêm trong bài viết Các đơn vị khung nhìn lớn, nhỏ và linh động.

Sao chép sâu trong JavaScript

Trước đây, để tạo một bản sao sâu của một đối tượng không tham chiếu đến đối tượng ban đầu, một cách hack phổ biến là JSON.stringify kết hợp với JSON.parse. Đây là một thủ thuật hack phổ biến đến mức V8 (công cụ JavaScript của Chrome) đã cải thiện hiệu suất của thủ thuật này một cách mạnh mẽ. Tuy nhiên, bạn không cần phải dùng thủ thuật này nữa với structuredClone.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Hãy tham khảo phần Sao chép sâu trong JavaScript bằng structuredClone để biết thêm chi tiết.

Lớp giả :focus-visible

Là nhà phát triển web, chúng ta đều quen thuộc với "vòng tròn tiêu điểm" xuất hiện khi bạn điều hướng trang bằng bàn phím hoặc nhấp vào các phần tử đầu vào. Đây là một tính năng cần thiết để hỗ trợ tiếp cận, nhưng đôi khi lại gây cản trở cho thiết kế hình ảnh đối với nhiều người dùng. Lớp giả lập CSS :focus-visible kiểm tra xem trình duyệt có cho rằng tiêu điểm phải hiển thị hay không. Giờ đây, bạn có thể chỉ định kiểu chỉ khi tiêu điểm hiển thị.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Hãy xem mục Tiêu điểm trên trang Tìm hiểu CSS để biết thêm thông tin.

Giao diện TransformStream

Giao diện TransformStream của API Luồng cho phép chuyển luồng vào nhau.

Ví dụ: bạn có thể truyền trực tuyến dữ liệu từ một nơi, sau đó nén luồng dữ liệu đó đến một vị trí khác khi dữ liệu được truyền. Bài viết Yêu cầu truyền trực tuyến bằng API tìm nạp sẽ hướng dẫn bạn thực hiện trường hợp sử dụng mẫu này.

Tóm tắt

Gần đây, có nhiều tính năng khác đã trở nên tương tác và ổn định để sử dụng trên nền tảng web. Từ giờ trở đi, chúng tôi sẽ hợp tác với Nhóm cộng đồng WebDX để làm rõ hơn các bộ tính năng cơ sở này. Hãy tham khảo Trang cơ sở để biết các điểm phát triển mới.

Nếu bạn muốn nắm bắt thông tin mới nhất, nhóm của chúng tôi sẽ xuất bản các bài viết khi một tính năng có thể tương táccập nhật hằng tháng về những gì đang diễn ra trên nền tảng web, từ các tính năng thử nghiệm đến các tính năng mới có thể tương tác.

Chúng tôi luôn muốn biết liệu những gì chúng tôi đang làm có giúp ích cho bạn hay không hoặc liệu bạn có cần được hỗ trợ theo nhiều cách khác hay không. Vì vậy, vui lòng liên hệ với chúng tôi tại Nhóm cộng đồng WebDX.