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.

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à những gì có thể sử dụng thực sự phụ thuộc vào cơ sở người dùng, bộ phần mềm cơ sở, 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 các 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 chính là điểm yếu mà chúng tôi cảm thấy phần lớn nhà phát triển sẽ cảm thấy một tính năng an toàn để sử dụng. Đây cũng là bộ tính năng mà chúng tôi gọi là Baseline. Để 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 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à phần tử HTML gốc, các tính năng như quản lý tiêu điểm, theo dõi thẻ và giữ 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.
Giờ đây, với các thuộc tính biến đổi riêng lẻ, 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 URL 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ư svh và lvh giúp nhà phát triển web có nhiều quyền kiểm soá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);

Vui lòng tham khảo bài viết 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, tất cả chúng ta đều quen thuộc với "vòng tập trung" xuất hiện khi bạn điều hướng một trang bằng bàn phím hoặc nhấp vào các phần tử nhập. Đây là một tính năng cần thiết để hỗ trợ tiếp cận, nhưng đôi khi tính năng này lại cản trở việc thiết kế hình ảnh của những người dùng khác nhau. 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 chỉ có thể chỉ định kiểu cho thời điểm cần hiển thị tiêu điểm.

/* 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ể phát trực tuyến dữ liệu từ một nơi, sau đó nén luồng dữ liệu đó vào 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ẽ làm việ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. Vui lòng truy cập vào web.dev/baseline để biết thông tin chi tiết liên tục.

Nếu bạn muốn cập nhật thông tin, nhóm 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ác và xuất bản thông tin cậ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 cho đến tính năng mới có khả năng 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.