Hãy khám phá cách hoạt động của các chi tiết và các thành phần tóm tắt rất hữu ích cũng như nơi sử dụng chúng.
Tiện ích thông tin công bố là một chế độ điều khiển giao diện người dùng giúp ẩn và hiện nội dung. Nếu bạn đang đọc nội dung này trên web.dev và khung nhìn của bạn rộng hơn 106 ems, hãy nhấp vào "Trên trang này" phía trên đoạn này để xem mục lục của phần này. Nếu bạn không thấy tiện ích này, hãy thu nhỏ trình duyệt để xem bảng điều hướng mục lục trên trang này dưới dạng một tiện ích công bố.
Giao diện người dùng đồ hoạ accordion là một loạt các tiện ích công bố được xếp chồng theo chiều dọc. Một trường hợp sử dụng phổ biến cho giao diện người dùng đàn accordion là trang Câu hỏi thường gặp (FAQ) trên nhiều trang web. Câu hỏi thường gặp về accordion chứa danh sách các câu hỏi hiển thị. Thao tác nhấp vào một câu hỏi sẽ mở rộng hoặc "tiết lộ", câu trả lời cho câu hỏi đó.
jQuery đã bao gồm mẫu giao diện người dùng đàn accordion (ít nhất là từ năm 2009). Giải pháp accordion ban đầu không có JavaScript bao gồm đặt mỗi câu hỏi thường gặp là một <label>, theo sau là dấu kiểm được gắn nhãn, sau đó hiển thị câu trả lời <div> khi dấu kiểm được chọn. CSS có dạng như sau:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Tại sao lại là lịch sử? Kể từ tháng 1 năm 2020, các tiện ích cung cấp thông tin công bố (chẳng hạn như các tiện ích phong cầm (không có JavaScript hoặc tấn công kiểm soát biểu mẫu) là một tiện ích được bổ sung tương đối gần đây. Kể từ tháng 1 năm 2020, các thành phần <details> và <summary> chỉ được hỗ trợ đầy đủ trong tất cả các trình duyệt hiện đại. Giờ đây, bạn có thể tạo các tiện ích thông tin công bố hoạt động, mặc dù có kém hấp dẫn hơn, chỉ bằng cách sử dụng HTML ngữ nghĩa. Các phần tử <details> và <summary> là tất cả những gì bạn cần: chúng là phương thức tích hợp sẵn để xử lý việc mở rộng và thu gọn nội dung. Khi người dùng nhấp hoặc nhấn vào một <summary> hoặc thả phím Enter khi <summary> được lấy tiêu điểm, nội dung của nút bật/tắt <details> mẹ sẽ hiển thị!
Giống như tất cả nội dung ngữ nghĩa, bạn có thể dần cải thiện các tính năng và giao diện mặc định. Trong trường hợp này, một phần nhỏ CSS đã được thêm vào, ngoài ra không có thêm gì khác:
Bạn sẽ lưu ý rằng các Mã hoá này không chứa JavaScript.
Bật/tắt chế độ hiển thị: thuộc tính open
Phần tử <details> là vùng chứa tiện ích thông tin công bố. <summary> là phần tóm tắt hoặc chú giải cho <details> mẹ của nó. Bản tóm tắt luôn hiển thị, hoạt động như một nút bật/tắt chế độ hiển thị nội dung còn lại của thành phần mẹ. Việc tương tác với <summary> sẽ bật/tắt chế độ hiển thị các bản tóm tắt đồng cấp tự gắn nhãn bằng cách bật/tắt thuộc tính open của phần tử <details>.
Thuộc tính open là thuộc tính boolean. Nếu có, bất kể giá trị hay thiếu yếu tố đó, thì điều này cho biết rằng tất cả nội dung <details> đều hiển thị cho người dùng. Nếu thuộc tính open không xuất hiện thì chỉ nội dung của <summary> được hiển thị.
Vì thuộc tính open được thêm và xoá tự động khi người dùng tương tác với chế độ điều khiển, nên thuộc tính này có thể được dùng trong CSS để tạo kiểu cho phần tử khác nhau dựa trên trạng thái của nó.
Bạn có thể tạo một đàn phong cầm với danh sách nhiều phần tử <details>, mỗi phần tử có một phần tử con <summary>. Việc bỏ qua thuộc tính open trong HTML có nghĩa là tất cả <details> sẽ bị thu gọn hoặc đóng, chỉ với các tiêu đề tóm tắt hiển thị khi trang tải; mỗi tiêu đề sẽ là nội dung mở cho phần nội dung còn lại trong <details> mẹ. Nếu bạn đưa thuộc tính open vào HTML, <details> sẽ hiển thị nội dung ở trạng thái mở rộng khi trang tải.
Nội dung ẩn ở trạng thái thu gọn có thể tìm kiếm được trong một số trình duyệt nhưng không tìm kiếm được trong các trình duyệt khác, mặc dù nội dung thu gọn không phải là một phần của DOM. Nếu bạn tìm kiếm trong Edge hoặc Chrome, thông tin chi tiết có chứa cụm từ tìm kiếm sẽ mở rộng để cho thấy lần xuất hiện. Hành vi này không được sao chép trong Firefox hoặc Safari.
<summary> phải là phần tử con đầu tiên của phần tử <details>, đại diện cho bản tóm tắt, chú thích hoặc chú giải cho phần nội dung còn lại của phần tử <details> mẹ mà phần tử này được lồng vào đó. Nội dung của phần tử <summary> có thể là bất kỳ nội dung tiêu đề, văn bản thuần tuý hoặc HTML nào được dùng trong một đoạn văn.
Bật/tắt điểm đánh dấu tóm tắt
Trong 2 mã lập trình trước đó, bạn sẽ lưu ý mũi tên đến cạnh inline-start (bắt đầu cùng dòng) của phần tóm tắt. Tiện ích thông tin công bố thường hiển thị trên màn hình bằng cách sử dụng một hình tam giác nhỏ xoay (hoặc xoắn) để cho biết trạng thái mở/đóng, cùng với nhãn bên cạnh hình tam giác. Nội dung của phần tử <summary> gắn nhãn tiện ích thông tin công bố.
Mũi tên xoay ở đầu mỗi phần là một ::marker được đặt trên phần tử <summary>. Giống như các mục trong danh sách, phần tử <summary> hỗ trợ thuộc tính rút gọn list-style và các thuộc tính dài của nó, bao gồm cả list-style-type.
Bạn có thể tạo kiểu cho hình tam giác thông tin công bố bằng CSS, bao gồm cả việc thay đổi điểm đánh dấu dùng từ hình tam giác thành bất kỳ loại dấu đầu dòng nào khác, bao gồm cả hình ảnh bằng list-style-image.
Để áp dụng các kiểu khác, hãy dùng bộ chọn tương tự như details summary::marker. Phần tử giả ::marker chỉ chấp nhận một số ít kiểu. Phương pháp phổ biến là xoá ::marker và thay thế bằng ::before dễ kiểu hơn, trong đó kiểu CSS sẽ thay đổi kiểu của nội dung được tạo một chút dựa trên sự hiện diện (hoặc không có) của thuộc tính mở. Bạn có thể xoá biểu tượng tiện ích thông tin công bố bằng cách đặt list-style: none hoặc đặt nội dung của điểm đánh dấu thành none, nhưng hãy luôn bao gồm các chỉ báo bằng hình ảnh để cho người dùng sáng mắt biết rằng nội dung tóm tắt là nút bật/tắt có nút bật/tắt, hiện và ẩn nội dung khi kích hoạt.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
Ví dụ này sẽ xoá điểm đánh dấu mặc định và thêm nội dung được tạo để tạo + khi người dùng đóng phần thông tin chi tiết và thêm một - khi mở thông tin chi tiết.
Nếu bạn muốn khối chi tiết mở theo mặc định, hãy thêm thuộc tính open vào thẻ mở <details>. Bạn cũng có thể thêm khoảng cách giữa từng hộp thoại và chuyển đổi cách xoay điểm đánh dấu được tạo bằng nội dung được tạo để cải thiện giao diện:
Cách xử lý lỗi
Nếu bạn không thêm <summary>, trình duyệt sẽ tạo cho bạn một mã đánh dấu và từ "chi tiết". Bản tóm tắt này thuộc thư mục gốc bóng và do đó sẽ không áp dụng kiểu tóm tắt CSS tác giả. Rất tiếc, Safari không đưa các chi tiết vào thứ tự tiêu điểm bàn phím.
Nếu bạn đưa <summary> vào, nhưng đây không phải là phần tử đầu tiên trong <details>, thì trình duyệt vẫn cho thấy phần tóm tắt như mong đợi. Điều này cũng sẽ không bị lỗi nếu bạn đưa đường liên kết, nhãn hoặc phần tử tương tác khác vào bản tóm tắt, nhưng các trình duyệt sẽ xử lý nội dung tương tác trong nội dung tương tác theo cách khác nhau. Ví dụ: nếu bạn đưa một đường liên kết vào phần tóm tắt, một số trình duyệt sẽ thêm cả bản tóm tắt và đường liên kết vào thứ tự sắp xếp thẻ mặc định, nhưng các trình duyệt khác sẽ không tập trung vào đường liên kết theo mặc định.
Nếu bạn nhấp vào <label> lồng trong <summary>, một số trình duyệt sẽ lấy tiêu điểm cho thành phần điều khiển biểu mẫu liên kết; các trình duyệt khác sẽ lấy tiêu điểm cho tuỳ chọn kiểm soát biểu mẫu và chuyển đổi <details> mở hoặc đóng.
Giao diện HTMLDetailsElement
Giống như tất cả phần tử HTML, HTMLDetailsElement kế thừa tất cả các thuộc tính, phương thức và sự kiện từ HTMLElement, đồng thời thêm thuộc tính thực thể open và sự kiện toggle. Thuộc tính HTMLDetailsElement.open là một giá trị boolean phản ánh thuộc tính HTML open, cho biết nội dung của phần tử (không tính <summary>) có được hiển thị cho người dùng hay không. Sự kiện bật/tắt được kích hoạt khi phần tử <details> bật/tắt ở trạng thái mở hoặc đóng. Bạn có thể theo dõi sự kiện này bằng cách sử dụng addEventListener().
Nếu bạn muốn viết một tập lệnh để đóng thông tin chi tiết đã mở khi người dùng mở bất kỳ thông tin chi tiết nào khác, hãy xoá thuộc tính đang mở bằng cách sử dụng removeAttribute("open"):
Đây là ví dụ duy nhất để sử dụng JavaScript. Bạn có thể không cần JavaScript, ngoại trừ chức năng đóng các tiện ích công bố khác đã mở khác.
Hãy nhớ rằng <details> và <summary> có thể được định kiểu quá nhiều và thậm chí có thể được dùng để tạo mẹo cho công cụ.
Tuy nhiên, nếu bạn định sử dụng các phần tử ngữ nghĩa này cho các trường hợp sử dụng mà ngữ nghĩa gốc không phù hợp, hãy luôn đảm bảo rằng bạn duy trì khả năng tiếp cận.
HTML đối với hầu hết các phần đều có thể truy cập theo mặc định. Công việc của chúng tôi với tư cách là nhà phát triển là đảm bảo rằng người dùng luôn truy cập được vào nội dung của mình.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về các chi tiết và bản tóm tắt.
<summary> phải là phần tử con đầu tiên của phần tử nào?
<p><details><fieldset>