Ra mắt API cửa sổ bật lên

Una Kravets

Cửa sổ bật lên xuất hiện ở khắp mọi nơi trên web. Bạn có thể thấy các thẻ này trong trình đơn, lời nhắc bật/tắt và hộp thoại. Các thẻ này 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 tạo các thành phần này trong trình duyệt vẫn còn rất cồng kềnh. 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 móc truy cập vào các thành phần, các liên kết bàn phím để nhập và thoát khỏi trải nghiệm. Đó là tất cả những gì bạn cần làm ngay cả trước khi bắt đầu xây dựng chức năng cốt lõi, hữu ích và độc đáo của cửa sổ bật lên.

Để giải quyết vấn đề này, một bộ API HTML khai báo mới để tạo cửa sổ bật lên sẽ ra mắt trên 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 vấn đề phức tạp, bạn có thể để trình duyệt xử lý vấn đề này bằng thuộc tính popover và các tính năng tiếp theo. Hỗ trợ cửa sổ bật lên HTML:

• Được quảng bá lên lớp cao nhất. 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 phải lo lắng về chỉ mục z.
• Chức năng đóng nhẹ. 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à trả về tiêu điểm.
• Quản lý tiêu điểm mặc định. Khi mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng bên trong cửa sổ bật lên.
• Các liên kết bàn phím hỗ trợ tiếp cận. Thao tác nhấn phím esc sẽ đóng cửa sổ bật lên và trả về tiêu điểm.
• Liên kết thành phần hỗ trợ tiếp cận. Kết nối phần tử popover với trình kích hoạt popover 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. Một cửa sổ bật lên cơ bản cần có ba thành phần:

• Thuộc tính popover trên phần tử chứa cửa sổ bật lên.
• id trên phần tử chứa cửa sổ bật lên.
• popovertarget có giá trị của id củ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>

Bây giờ, bạn đã có một cửa sổ bật lên cơ bản hoạt động đầy đủ.

Bạn có thể dùng cửa sổ bật lên này để truyền đạt thêm thông tin hoặc làm tiện ích thông tin công bố.

Giá trị mặc định và giá trị ghi đè

Theo mặc định, chẳng hạn như trong đoạn mã trước, việc thiết lập một 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ẽ bật và tắt cửa sổ đó. Tuy nhiên, bạn cũng có thể tạo các 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 tuỳ chọn popovertargetaction 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.

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 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 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ác cửa sổ bật lên gốc. Bạn có thể đóng thông báo này bằng cách nhấn vào nút đóng hoặc nút đóng nhẹ.

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 qua thao tác đóng nhẹ. Bạn phải đóng các cửa sổ này thông qua một bộ hẹn giờ hoặc hành động đóng rõ ràng. Các loại cửa sổ bật lên phù hợp với popover=manual là các phần tử xuất hiện và biến mất, nhưng không được ả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 khu vực cửa sổ bật lên sẽ không làm đó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ổ đó sẽ không đóng.

Cách xem xét sự khác biệt:

Cửa sổ bật lên bằng popover=auto:

• Khi mở, hãy buộc đóng các cửa sổ bật lên khác.
• Có thể đóng bằng cách nhấn nhẹ.

Cửa sổ bật lên bằng popover=manual:

• Không buộc đóng bất kỳ loại phần tử nào khác.
• Không đóng bằng thao tác nhấn nhẹ. Đóng các cửa sổ đó bằng thao tác bật/tắt hoặc đóng.

Định kiểu cửa sổ bật lên

Cho đến nay, bạn đã tìm hiểu về các 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 rất hữu ích. Một trong số đó là khả năng định kiểu cho ::backdrop.

Trong cửa sổ bật lên auto, đây là một lớp nằm ngay bên dưới lớp trên cùng (nơi cửa sổ bật lên nằm) và nằm phía trên phần còn lại của trang. Trong ví dụ sau, ::backdrop được 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 cần lưu ý là thuộc tính popover không tự cung cấp ngữ nghĩa. Mặc dù hiện tại bạn có thể tạo trải nghiệm tương tự như 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 hai loại hộp thoại này:

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 đòi hỏi người dùng phải tương tác rõ ràng để đóng phương thức. popover hỗ trợ tính năng đóng nhẹ. dialog của cửa sổ bật lên thì không. Hộp thoại phương thức khiến phần còn lại của trang không hoạt động. popover thì không.

Bản minh hoạ ở trên là một hộp thoại ngữ nghĩa có hành vi bật lên. Điều này có nghĩa là phần còn lại của trang không bị bất động và cửa sổ bật lên của hộp thoại sẽ có hành vi đóng nhẹ. Bạn có thể tạo hộp thoại này bằng hành vi bật lên bằ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ó

Thao tác nhập và thoát 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à đi từ display: none cũng như ảnh động đến và đi từ lớp trên cùng chưa có trong trình duyệt. Tuy nhiên, chúng tôi dự định sẽ ra mắt các tính năng này trong một phiên bản Chromium sắp tới, ngay sau 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 và sử dụng :popover-open và @starting-style, bạn có thể thiết lập kiểu trước khi thay đổi và sau khi thay đổi để chuyển đổi mượt mà khi mở và đóng cửa sổ bật lên. Hãy xem ví dụ trước. Ảnh động vào và ra 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:

Vị trí neo

Cửa sổ bật lên rất hữu ích khi bạn muốn định vị một cảnh báo, cửa sổ bật lên 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 các trình đơn, chú giải công cụ và các thành phần khác cần được định vị tương ứng với các thành phần khác. Đây là lúc bạn cần sử dụng tính năng liên kết CSS.

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 rằng cửa sổ bật lên #menu-items luôn được neo vào trình kích hoạt bật/tắt của nó, nút #menu-toggle.

Cách thiết lập neo tương tự như cách 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 neo bằng cách cung cấp cho neo đó một id (trong ví dụ này là #menu-toggle), sau đó sử dụng anchor="menu-toggle" để kết nối hai phần tử. Bây giờ, bạn có thể sử dụng anchor() để tạo kiểu cho cửa sổ bật lên. Bạn có thể tạo kiểu cho 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 như sau:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Bây giờ, bạn đã có một trình đơn bật lên có đầy đủ chức năng được liên kết với nút bật/tắt và có tất cả các tính năng tích hợp của trình đơn bật lên, 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 giúp việc xây dựng ứng dụng web dễ quản lý và dễ tiếp cận hơn theo mặc định. Tôi rất mong được xem cách bạn sử dụng cửa sổ bật lên!

Tài liệu đọc thêm

• Hộp thoại và cửa sổ bật lên có vẻ tương tự nhau. Điểm khác biệt là gì?
• Ngữ nghĩa và thuộc tính cửa sổ bật lên
• Tài liệu MDN về cửa sổ bật lên
• Thông tin giải thích về cửa sổ bật lên OpenUI