Tìm hiểu một số tính năng trong Baseline.
Web luôn phát triển và các trình duyệt liên tục cập nhật để cung cấp cho nhà phát triển những công cụ mới nhằm đổi mới trên nền tảng. Những tính năng trước đây cần đến 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 mọi trình duyệt, cùng với các cách mã hoá phần tử thiết kế ngắn hơn hoặc dễ dàng hơn.
Mặc dù sự phát triển và thích ứng liên tục này rất hữu ích, nhưng nó cũng có thể gây ra nhầm lẫn. Bạn có thể gặp khó khăn khi thao tác trên tất cả những 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ác công cụ trình duyệt sẽ hỗ trợ tính năng mới này?" "Khi nào thì tôi có thể bắt đầu sử dụng các tính năng đó trong mã phát hành chính thức của mình?" "Chúng tôi sẽ hỗ trợ các trình duyệt cũ hơn trong bao lâu?"
Câu trả lời đúng là "còn phụ thuộc". 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, nhóm công nghệ, cấu trúc nhóm của bạn và các thiết bị được hỗ trợ. Nhưng có một điều mà tất cả chúng ta đều đồng ý là bối cảnh hiện tại của web có thể khiến bạn khó đưa ra những quyết định đó.
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 để mang đến sự rõ ràng hơn. Trong đó có cả nỗ lực của chúng tôi đối với các dự án như Interop 2023 nhằm 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. Thế 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 tôi tìm hiểu cách đây 2 năm có sẵn sàng cho bạn sử dụng không?
Trong bài đăng này, tôi muốn nhấn mạnh một số tính năng hiện có sẵn cho tất cả các công cụ trình duyệt chính trong hai phiên bản chính vừa qua. Đây là điểm hạn chế mà chúng tôi cảm thấy rằng 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, và 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 của Baseline tại đây.
Thành phần 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ụ.
Để sử dụng thành phần này, hãy xác định thành phần phụ, sau đó mở hộp thoại bằng cách gọi phương thức showModal() trên thành phần 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 gốc, 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. Để biết thêm, hãy đọc phần Xây dựng thành phần hộp thoại.
Từng tài sản chuyển đổi CSS
Sử dụng phép biến đổi CSS là một cách hiệu quả để thêm một chuyển động vào trang web của bạn.
Có thể bạn đã quen với việc viết các phép biến đổi CSS với 3 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 các thuộc tính biến đổi riêng lẻ. Điều này rất hữu ích khi bạn đang viết các hoạt ảnh khung hình chính phức tạp.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
Để hiểu rõ hơn về thay đổi này, hãy đọc bài viết Kiểm soát chi tiết hơn đối với việc chuyể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 sẽ thấy thanh URL và thanh công cụ điều hướng, nhưng đôi khi các thanh công cụ đó sẽ được rút lại 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à động.
Hỗ trợ trình duyệt
- 108
- 108
- 101
- 15,4
Bản sao sâu trong JavaScript
Trước đây, để tạo bản sao sâu của một đối tượng mà không tham chiếu đến đối tượng gốc, một kiểu tấn công phổ biến là JSON.stringify kết hợp với JSON.parse. Đây là một vụ tấn công phổ biến đến mức V8 (công cụ javascript của Chrome) đã cải thiện mạnh mẽ hiệu suất của thủ thuật này. Tuy nhiên, với structuredClone, bạn không cần đến phiên tấn công này nữa.
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 cấu trúcClone để 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 tiêu điểm" 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 phần tử nhập. Đây là một tính năng cần thiết cho khả năng tiếp cận, nhưng đôi khi tính năng này ảnh hưởng đến 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 thấy tiêu điểm hay không. Giờ đây, bạn có thể chỉ định kiểu cho thời điểm chỉ 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 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 giúp bạn có thể chuyển các 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 sang một vị trí khác khi dữ liệu được truyền. Bài viết Truyền trực tuyến yêu cầu bằng API tìm nạp sẽ hướng dẫn bạn tìm hiểu trường hợp sử dụng mẫu này.
Tóm tắt
Có nhiều tính năng khác gần đây đã có khả năng tương tác và ổn định để sử dụng trên nền tảng web. Từ nay trở đi, chúng tôi sẽ làm việc với Nhóm cộng đồng WebDX để hiểu rõ hơn về các bộ tính năng của Baseline. Vui lòng truy cập vào web.dev/baseline để biết thông tin chi tiết.
Nếu bạn muốn cập nhật thông tin, nhóm chúng tôi sẽ xuất bản bài viết khi một tính năng có khả năng tương tác và xuất bản thông tin cập nhật hằng tháng về những hoạt động đang diễn ra trên nền tảng web, từ các tính năng thử nghiệm sang các tính năng mới có khả năng tương tác.
Chúng tôi luôn tò mò liệu những gì chúng tôi đang làm có giúp ích cho bạn hay cần loại hỗ trợ khác 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.