Cửa sổ bật lên có ở mọi nơi trên web. Bạn có thể xem các thông báo này trong trình đơn, nút bật/tắt và hộp thoại. Các nút này có thể xuất hiện dưới dạng phần cài đặt tài khoản, tiện ích thông tin công bố và bản xem trước thẻ sản phẩm. Mặc dù các thành phần này phổ biến đến mức nào, việc tạo chúng trong trình duyệt vẫn rất cồng kềnh một cách đáng kinh ngạc. Bạn cần thêm tập lệnh để quản lý trạng thái tiêu điểm, trạng thái mở và đóng, hook có thể truy cập được vào các thành phần, các liên kết bàn phím để truy cập và thoát khỏi trải nghiệm. Tất cả đều là những việc bạn cần làm trước khi bắt đầu xây dựng chức năng cốt lõi hữu ích, độc đáo của cửa sổ bật lên.
Để giải quyết vấn đề này, chúng tôi sắp ra mắt một bộ API HTML khai báo mới để tạo cửa sổ bật lên cho các trình duyệt, bắt đầu bằng API popover trong Chromium 114.
Thuộc tính cửa sổ bật lên
Thay vì tự quản lý tất cả các phức tạp, bạn có thể để trình duyệt xử lý vấn đề đó bằng thuộc tính popover và bộ tính năng tiếp theo. Hỗ trợ cửa sổ bật lên HTML:
- Quảng bá lên lớp trên cùng. Các cửa sổ bật lên sẽ xuất hiện trên một lớp riêng biệt phía trên phần còn lại của trang, vì vậy, bạn không cần phải tìm kiếm lại với chỉ mục z.
- Chức năng loại bỏ ánh sáng. Khi nhấp vào phần bên ngoài vùng cửa sổ bật lên, cửa sổ bật lên sẽ đóng và tiêu điểm trở về.
- Quản lý tiêu điểm mặc định. Mở cửa sổ bật lên khiến thẻ tiếp theo dừng lại bên trong cửa sổ bật lên.
- Các liên kết bàn phím dễ tiếp cận. Khi bạn nhấn phím
esc, cửa sổ bật lên và tiêu điểm sẽ đóng lại. - Liên kết thành phần có thể truy cập được. Kết nối một phần tử cửa sổ bật lên với trình kích hoạt cửa sổ bật lên về mặt ngữ nghĩa.
Giờ đây, bạn có thể tạo cửa sổ bật lên với tất cả các tính năng này mà không cần sử dụng JavaScript. Một cửa sổ bật lên cơ bản cần có 3 yếu tố:
- Thuộc tính
popovertrên phần tử chứa cửa sổ bật lên. - Một
idtrên phần tử chứa cửa sổ bật lên. popovertargetcó giá trịidcủa cửa sổ bật lên trong phần tử mở cửa sổ bật lên.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
Giờ đây, bạn đã có một cửa sổ bật lên cơ bản với đầy đủ chức năng.
Cửa sổ bật lên này có thể được dùng để truyền đạt thông tin bổ sung hoặc dưới dạng tiện ích công bố thông tin.
Mặc định và ghi đè
Theo mặc định, chẳng hạn như trong đoạn mã trước đó, việc thiết lập cửa sổ bật lên có popovertarget có nghĩa là nút hoặc phần tử mở cửa sổ bật lên sẽ đóng/mở cửa sổ bật lên. Tuy nhiên, bạn cũng có thể tạo cửa sổ bật lên rõ ràng bằng popovertargetaction. Thao tác này sẽ ghi đè thao tác toggle mặc định. popovertargetaction lựa chọn bao gồm:
popovertargetaction="show": Hiển thị cửa sổ bật lên.
popovertargetaction="hide": Ẩn cửa sổ bật lên.
Bằng cách sử dụng popovertargetaction="hide", bạn có thể tạo nút "đóng" trong cửa sổ bật lên, như trong đoạn mã sau:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
Cửa sổ bật lên tự động so với cửa sổ bật lên thủ công
Việc sử dụng riêng thuộc tính popover thực ra là một lối tắt cho popover="auto". Khi được mở, popover mặc định sẽ buộc đóng các cửa sổ bật lên tự động khác, ngoại trừ cửa sổ bật lên của đối tượng cấp trên. Người dùng có thể loại bỏ biểu tượng thông qua nút đóng hoặc nút đóng.
Mặt khác, việc đặt popover=manual sẽ tạo ra một loại cửa sổ bật lên khác: cửa sổ bật lên thủ công. Các phần tử này không buộc đóng bất kỳ loại phần tử nào khác và không đóng khi đóng khi đóng ánh sáng. Bạn phải đóng chúng thông qua đồng hồ hẹn giờ hoặc hành động gần rõ ràng. Các loại cửa sổ bật lên thích hợp cho popover=manual là các phần tử xuất hiện và biến mất, nhưng không ảnh hưởng đến phần còn lại của trang, chẳng hạn như thông báo nhanh.
Nếu bạn khám phá bản minh hoạ ở trên, bạn có thể thấy rằng việc nhấp vào bên ngoài khu vực cửa sổ bật lên không đóng lại cửa sổ bật lên. Ngoài ra, nếu có các cửa sổ bật lên khác đang mở, chúng sẽ không đóng.
Cách xem xét những điểm khác biệt:
Cửa sổ bật lên có popover=auto:
- Khi mở, hãy buộc đóng các cửa sổ bật lên khác.
- Có thể đóng đèn.
Cửa sổ bật lên có popover=manual:
- Đừng buộc đóng bất kỳ loại phần tử nào khác.
- Không tắt đèn. Đóng chúng bằng nút bật/tắt hoặc thao tác đóng.
Tạo kiểu cửa sổ bật lên
Cho đến giờ, bạn đã tìm hiểu về cửa sổ bật lên cơ bản trong HTML. Tuy nhiên, popover cũng có một số tính năng tạo kiểu thú vị. Một trong số đó là khả năng tạo kiểu cho ::backdrop.
Trong cửa sổ bật lên auto, đây là lớp ngay bên dưới lớp trên cùng (nơi chứa cửa sổ bật lên), nằm phía trên phần còn lại của trang. Trong ví dụ sau, ::backdrop được gán màu bán trong suốt:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
Sự khác biệt giữa popover và dialog
Điều quan trọng cần lưu ý là thuộc tính popover không tự cung cấp ngữ nghĩa. Mặc dù bạn hiện có thể tạo các trải nghiệm giống hộp thoại phương thức bằng cách sử dụng popover="auto", nhưng giữa 2 công cụ này vẫn có một số khác biệt chính:
Phần tử dialog được mở bằng dialog.showModal (hộp thoại phương thức), là một trải nghiệm yêu cầu người dùng tương tác rõ ràng để đóng cửa sổ phụ.
popover hỗ trợ tính năng loại bỏ ánh sáng. Phương thức dialog thì không.
Hộp thoại phương thức khiến phần còn lại của trang ở chế độ trơ. popover thì không.
Bản minh hoạ ở trên là hộp thoại ngữ nghĩa với hành vi cửa sổ bật lên. Điều này có nghĩa là phần còn lại của trang không ở trạng thái tĩnh và hộp thoại bật lên có hoạt động loại bỏ ánh sáng. Bạn có thể tạo hộp thoại này bằng hành vi cửa sổ bật lên bằng cách sử dụng mã sau:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
Sắp có
Chế độ tương tác vào/ra tương tác
Khả năng tạo ảnh động cho các thuộc tính riêng biệt, bao gồm cả ảnh động đến và từ display: none, cũng như tạo ảnh động cho và từ lớp trên cùng hiện chưa được cung cấp trong các trình duyệt. Tuy nhiên, chúng tôi dự định phát hành phiên bản Chromium sắp tới, ngay sau khi bản phát hành này ra mắt.
Với khả năng tạo ảnh động cho các thuộc tính riêng biệt cũng như sử dụng :popover-open và @starting-style, bạn có thể thiết lập kiểu trước thay đổi và kiểu sau thay đổi để cho phép chuyển đổi suôn sẻ khi mở và đóng cửa sổ bật lên. Hãy xem ví dụ trước. Việc tạo ảnh động cho màn hình trông mượt mà hơn nhiều và hỗ trợ trải nghiệm người dùng linh hoạt hơn:
Định vị neo
Cửa sổ bật lên rất phù hợp khi bạn muốn định vị cảnh báo, cửa sổ phụ hoặc thông báo dựa trên khung nhìn. Tuy nhiên, cửa sổ bật lên cũng hữu ích cho trình đơn, chú giải công cụ và các thành phần khác cần được đặt tương ứng với các thành phần khác. Đây chính là lúc tính năng neo CSS phát huy tác dụng.
Bản minh hoạ trình đơn dạng hình tròn sau đây sử dụng API cửa sổ bật lên cùng với vị trí neo CSS để đảm bảo cửa sổ bật lên #menu-items luôn được liên kết với trình kích hoạt bật/tắt, nút #menu-toggle.
Quá trình thiết lập quảng cáo cố định cũng tương tự như thiết lập cửa sổ bật lên:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
Bạn thiết lập một điểm neo bằng cách cung cấp cho nó một id (trong ví dụ này là #menu-toggle), sau đó sử dụng anchor="menu-toggle" để kết nối hai thành phần này. Giờ đây, bạn có thể dùng anchor() để tạo kiểu cho cửa sổ bật lên. Trình đơn bật lên ở giữa được neo vào đường cơ sở của nút bật/tắt neo có thể được tạo kiểu như sau:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
Giờ đây, bạn đã có trình đơn bật lên có đầy đủ chức năng được neo vào nút bật tắt và có tất cả các tính năng tích hợp của cửa sổ bật lên mà không cần JavaScript!
Kết luận
API Popover là bước đầu tiên trong một loạt các tính năng mới giúp việc xây dựng các ứng dụng web dễ quản lý hơn và dễ truy cập hơn theo mặc định. Tôi rất muốn xem cách bạn sử dụng cửa sổ bật lên!