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

Una Kravets

Cửa sổ bật lên ở 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 rất phổ biến, nhưng 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 phím để nhập và thoát khỏi trải nghiệm. Tất cả những điều này đều cần làm trước khi bạn 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, 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

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Nguồ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. 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 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à 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à tiêu điểm trả lại.
  • 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. Cửa sổ bật lên cơ bản cần có 3 điều sau:

  • Thuộc tính popover trên phần tử có 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ị 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>

Giờ đây, bạn đã có cửa sổ bật lên cơ bản với đầy đủ chức năng.

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 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á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 loại bỏ nhanh.

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.

Để xem lại các điểm khác biệt, hãy làm như sau:

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 với 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

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à 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 bạn 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 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 nhẹ. dialog của cửa sổ bật lên 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 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, các tính năng này dự kiến sẽ có trong một phiên bản Chromium sắp ra mắt, 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 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 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 nú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 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. Bây giờ, 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 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