Cửa sổ bật lên ở mọi nơi trên web. Bạn có thể thấy các thông tin này trong các trình đơn, mẹo bật/tắt và hộp thoại, có thể xuất hiện dưới dạng chế độ 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 như thế nào, việc xây dựng chúng trong trình duyệt vẫn rườm rà đáng ngạc nhiên. Bạn cần thêm tập lệnh để quản lý tiêu điểm, trạng thái mở và đóng, các hook có thể truy cập 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, và tất cả những việc này thậm chí trước khi bạn bắt đầu xây dựng chức năng cốt lõi và 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ẽ 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ả những công việc phức tạp, bạn có thể để trình duyệt xử lý việc này bằng thuộc tính popover và nhóm tính năng tiếp theo. Cửa sổ bật lên HTML hỗ trợ:
- Quảng bá lên lớp trên cùng. Cửa sổ bật lên sẽ xuất hiện trên một lớp riêng phía trên phần còn lại của trang, vì vậy, bạn không phải mất công sử dụng chỉ mục z.
- Chức năng đóng mở đèn. Thao tác nhấp vào bên ngoài vùng cửa sổ bật lên sẽ đóng cửa sổ bật lên và tiêu điểm trả lại.
- Quản lý tiêu điểm mặc định. Khi bạn mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng lại bên trong cửa sổ bật lên.
- Liên kết bàn phím hỗ trợ tiếp cận. Thao tác nhấn phím
escsẽ đóng cửa sổ bật lên và tiêu điểm trả lại. - Liên kết thành phần có thể truy cập. Việc kết nối một phần tử cửa sổ bật lên với một cửa sổ bật lên sẽ kích hoạt theo 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. Cửa sổ bật lên cơ bản cần có 3 điều sau:
- Thuộc tính
popovertrên phần tử có chứa cửa sổ bật lên. 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 trên 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ó 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ải thông tin bổ sung hoặc dưới dạng tiện ích công bố thông tin.
Chế độ 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 bằng popovertarget có nghĩa là nút hoặc phần tử mở cửa sổ bật lên sẽ chuyển đổi cửa sổ bật lên ở trạng thái mở và đóng. 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 bật/tắt mặc định. Các lựa chọn popovertargetaction bao gồm:
popovertargetaction="show": Hiện cửa sổ bật lên.
popovertargetaction="hide": Ẩn cửa sổ bật lên.
Khi sử dụng popovertargetaction="hide", bạn có thể tạo nút "đóng" trong một 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 tự sử dụng thuộc tính popover thực ra là một phím 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ể tắt chế độ này bằng nút đóng hoặc đóng đèn.
Mặt khác, việc đặt popover=manual sẽ tạo 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 loại 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 bằng tính năng đóng đèn. Bạn phải đóng chúng thông qua bộ tính giờ hoặc thao tác đóng rõ ràng. Các loại cửa sổ bật lên phù hợp với popover=manual là những 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 ngắn.
Nếu 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 vùng cửa sổ bật lên không đóng 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ở, thì các cửa sổ này sẽ không đóng.
Để xem lại sự khác biệt:
Cửa sổ bật lên với popover=auto:
- Khi mở, hãy buộc đóng các cửa sổ bật lên khác.
- Có thể đóng mở bằng đèn.
Cửa sổ bật lên với popover=manual:
- Không buộc đóng bất kỳ loại phần tử nào khác.
- Đừng đóng đèn khi đóng. Đóng chúng bằng thao tác bật/tắt hoặc đóng.
Tạo kiểu cửa sổ bật lên
Tới đây, 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 đẹp mắt. 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 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 cấp một 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 bạn cần lưu ý là thuộc tính popover không tự cung cấp ngữ nghĩa. Và mặc dù giờ đây bạn có thể xây dựng trải nghiệm giống hộp thoại phương thức bằng popover="auto", nhưng có một vài điểm khác biệt chính giữa 2 loại này:
Phần tử dialog 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 phải tương tác rõ ràng thì mới đóng cửa sổ phụ.
popover hỗ trợ tính năng đóng dựa trên ánh sáng. Phương thức dialog thì không.
Hộp thoại phương thức làm cho phần còn lại của trang trở thành trạng thái trơ. popover thì không.
Bản minh hoạ ở trên là một 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 bị trơ và hộp thoại bật lên có hành vi đóng đèn 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 đoạn 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ó
Ra vào 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ả tạo ả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ó trong trình duyệt. Tuy nhiên, họ dự kiến sẽ phát hành phiên bản Chromium sắp tới, theo sát bản phát hành này.
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à sau thay đổi để cho phép chuyển đổi mượt mà khi mở và đóng cửa sổ bật lên. Hãy lấy ví dụ trước. Việc tạo ảnh động cho giao diện trong và ngoài trông mượt mà hơn, hỗ trợ trải nghiệm người dùng linh hoạt hơn:
Định vị quảng cáo cố định cuối màn hình
Cửa sổ bật lên là lựa chọn tuyệt vời khi bạn muốn đặt cảnh báo, phương thức 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ú thích và các phần tử khác cần được đặt tương ứng với các phần tử khác. Đây là lúc tính năng neo CSS xuất hiện.
Bản minh hoạ trình đơn 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 neo 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 liên kết bằng cách gán id (trong ví dụ này là #menu-toggle), sau đó sử dụng anchor="menu-toggle" để kết nối 2 phần tử với nhau. Giờ đây, bạn có thể sử 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 liên kết với đường cơ sở của nút bật/tắt neo có thể có 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 với đầy đủ chức năng được liên kết với nút bật tắt và có tất cả tính năng tích hợp sẵn của cửa sổ bật lên mà không cần JavaScript!
Kết luận
API Cửa sổ bật lên là bước đầu tiên trong một loạt các tính năng mới nhằm giúp việc tạo ứng dụng web trở nên dễ quản lý và dễ truy cập hơn theo mặc định. Tôi rất hào hứng được thấy cách bạn sử dụng cửa sổ bật lên!