Chi tiết và tóm tắt

Khám phá cách các phần tử tóm tắt và chi tiết rất hữu ích hoạt động cũng như nơi cần sử dụng chúng.

Tiện ích thông tin công bố là một chế độ kiểm soát 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 nhỏ hơn 106 ems, nhấp vào "Trên trang này" phía trên đoạn này hé lộ mục lục cho phần này. Nếu bạn không nhìn thấ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 thông tin công bố.

Giao diện người dùng đồ hoạ accordion là một loạt các xếp chồng theo chiều dọc thông tin công bố. 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. Phần Câu hỏi thường gặp về đàn accordion có một danh sách các câu hỏi mà bạn có thể thấy; việc nhấp vào một câu hỏi sẽ mở rộng hoặc "công bố", 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 từ năm 2009. Không có JavaScript gốc giải pháp phong cầm bao gồm đặt mỗi câu hỏi thường gặp thành <label>, theo sau là dấu kiểm được gắn nhãn, sau đó hiển thị <div> trả lời 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;
}

Vì sao lại như vậy? Các tiện ích thông tin công bố (chẳng hạn như đàn phong cầm, không có JavaScript hoặc tấn công quyền kiểm soát biểu mẫu) là một công cụ tương đối mới cộng; <details> và <summary> Chúng tôi chỉ hỗ trợ đầy đủ các phần tử này trên tất cả trình duyệt hiện đại kể từ tháng 1 năm 2020. Giờ đây, bạn có thể tạo báo cáo hoạt động, mặc dù giảm so với những tiện ích thông tin công bố hấp dẫn chỉ sử dụng HTML có 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à một cách tích hợp sẵn để xử lý 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ó tâm điểm, nội dung của nút bật/tắt <details> mẹ sẽ hiển thị!

Giống như mọi nội dung có ngữ nghĩa, bạn có thể cải thiện dần các tính năng và giao diện mặc định. Trong trường hợp này, một chút Đã thêm CSS, nhưng chưa thêm nội dung nào khác:

Bạn sẽ nhận thấy rằng các Codepen 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ẹ. Chiến lược phát hành đĩa đơn phầ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ị các nội dung còn lại của thành phần mẹ. Tương tác với <summary>, bạn có thể bật/tắt chế độ hiển thị các màn hình đồng cấp tóm tắt tự gắn nhãn bằng cách bật/tắt <details>' thuộc tính open của phần tử.

Thuộc tính open là một thuộc tính boolean. Nếu có, bất kể giá trị hay thiếu giá trị đó, giá trị này chỉ ra rằng tất cả <details> nội dung được hiển thị cho người dùng. Nếu không có thuộc tính open thì chỉ có nội dung của <summary> được hiển thị.

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 có thể được sử dụng trong CSS để tạo kiểu cho phần tử theo cách khác nhau dựa trên trạng thái của phần tử đó.

Bạn có thể tạo một đàn phong cầm có danh sách gồm nhiều phần tử <details>, mỗi phần tử có một phần tử con <summary>. Bỏ qua thuộc tính open trong HTML của bạn nghĩa là <details> đều sẽ được thu gọn hoặc đóng, chỉ với tiêu đề tóm tắt hiển thị khi trang tải; mỗi tiêu đề là phần 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ị ở trạng thái mở rộng (cùng với nội dung hiển thị) 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 thể tìm kiếm được trong các trình duyệt khác, ngay cả khi nội dung được 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ì thông tin chi tiết có chứa cụm từ tìm kiếm sẽ mở rộng để hiển thị 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 nội dung tóm tắt, chú thích hoặc chú thích cho phần còn lại của nội dung 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à tiêu đề bất kỳ nội dung, văn bản thuần tuý hoặc HTML có thể được sử dụng trong một đoạn.

Bật/tắt điểm đánh dấu tóm tắt

Trong hai mã trước đó, bạn sẽ lưu ý mũi tên đến phương thức inline-start của phần tóm tắt. Tiện ích thông tin công bố thường xuất hiện trên màn hình bằng một tam giác nhỏ có thể xoay (hoặc xoắn) để cho biết trạng thái mở/đóng bằng 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à ::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ợ list-style thuộc tính viết tắt và các thuộc tính dài của nó, bao gồm cả list-style-type. Bạn có thể dùng CSS để tạo kiểu cho hình tam giác công bố thông tin, 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 một hình ảnh có list-style-image.

Để áp dụng các kiểu khác, hãy sử dụng bộ chọn tương tự như details summary::marker. Chiến lược phát hành đĩa đơn Phần tử giả ::marker chỉ chấp nhận một số kiểu giới hạn. Việc xoá ::marker và thay thế bằng ::before dễ tạo kiểu hơn là phương pháp thông dụng, với kiểu CSS 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 vắng mặt) 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 cài đặt nội dung của điểm đánh dấu vào none, nhưng luôn bao gồm các chỉ báo trực quan để người dùng có thể nhìn thấy biết rằng nội dung tóm tắt là một nút bật/tắt sẽ hiển thị 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 xoá điểm đánh dấu mặc định và thêm nội dung đã tạo để tạo một + khi hệ thống đã đóng thông tin chi tiết và một - khi thông tin chi tiết được mở.

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 không gian giữa mỗi hộp thoại và chuyển đổi hướng xoay của điểm đánh dấu được tạo bằng nội dung đã 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 một thẻ cho bạn: kèm theo điểm đánh dấu và từ "chi tiết". Thông tin tóm tắt này là một phần của gốc bóng và do đó sẽ không áp dụng kiểu tóm tắt CSS của tác giả. Rất tiếc, Safari không bao gồm thông tin chi tiết trong thứ tự lấy 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 thông tin tóm tắt như bình thường. Cũng sẽ không có lỗi nếu bạn thêm một đường liên kết, nhãn hoặc các phần tử tương tác khác vào trong bản tóm tắt, nhưng các trình duyệt xử lý nội dung tương tác trong nội dung tương tác theo cách khác. 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ả phần tóm tắt và đường liên kết vào thứ tự sắp xếp các 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 một <label> lồng trong <summary>, một số trình duyệt sẽ chuyển tiêu điểm vào thành phần điều khiển biểu mẫu được liên kết; các trình duyệt khác sẽ lấy tiêu điểm vào thành phần điều khiển biểu mẫu và chuyển đổi giữa <details> mở hoặc đóng.

Giao diện HTMLDetailsElement

Giống như tất cả các phần tử HTML, HTMLDetailsElement kế thừa tất cả thuộc tính, phương thức và sự kiện từ HTMLElement, đồng thời thêm phương thức thuộc tính thực thể open và toggle sự kiện. Thuộc tính HTMLDetailsElement.open là một boolean phản ánh thuộc tính HTML open, cho biết liệu 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> được bật/tắt ở trạng thái mở hoặc đóng. Bạn có thể nghe 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 các chi tiết đã mở khi người dùng mở bất kỳ chi tiết nào khác, hãy xoá thuộc tính mở 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 đã mở các tiện ích thông tin công bố.

Hãy nhớ rằng <details> và <summary> có thể được tạo kiểu rất kỹ lưỡng và thậm chí còn có thể được dùng để tạo các mẹo về công cụ. Tuy nhiên, nếu bạn định 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 khớp, hãy luôn đảm bảo rằng bạn duy trì khả năng hỗ trợ tiếp cận. Hầu hết HTML đề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 nhà phát triển là đảm bảo mọi người vẫ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.