Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Làm rõ ý nghĩa của các phần tử "Details" và "Summary"

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Don’t Forget the Viewport Meta Tag
Getting Started With Scalable Vector Graphics (SVG)

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Rất nhiều thư viện JavaScript được phát triển để cho phép chúng ta thêm các widget tương tác trên các trang web. Tương tự, HTML5 cũng có một số thành phần tương tác phổ biến, làm cho chúng trở thành tính năng gốc của web. Trong bài này, chúng ta sẽ xem xét một trong những phần tử như vậy được gọi là <details> (và tương tự đó là phần tử <summary>) cung cấp cho chúng ta một widget tương tác tương tự với một accordion.

Sử dụng <details><summary>

Phần tử <details> có thể được sử dụng ở bất cứ đâu trong phạm vi của <body>. Để đưa ra một ví dụ đơn giản, chúng ta có thể thêm nó theo cách này:

Ví dụ ở trên cho thấy phần tử <details> có chứa một đoạn văn, cho thấy sự tương đồng của nó với những phần tử phân đoạn khác của HTML. Nó xác định một phân đoạn có nghĩa mà nó có thể lần lượt chứa các phần tử, chẳng hạn như các tấm hình cùng với phần tử <figure>, các phần tử form như <input><textarea>, và có thể cả các phần tử <details> khác lồng bên trong.

Khác biệt đáng kể duy nhất là cách trình duyệt hiển thị phần tử này trên front-end. Các trình duyệt hỗ trợ như Chrome, Safari, và phiên bản mới nhất của Opera sẽ hiển thị nó với một hình tam giác nhỏ và một dòng Details ở phía bên.

Phần tử <details> hoạt động như một widget accordion trong đó, nội dung ban đầu được ẩn. Nhấn vào mũi tên, hoặc nhấp vào bất cứ nơi nào theo chiều ngang gắn với mũi tên sẽ hiện ra nội dung. Chúng ta cũng có thể chọn nó bằng cách sử dụng phím TabSpace hoặc phím Enter để đóng mở nội dung.

Lưu ý: AccesibleCulture khái quát khả năng truy xuất hoàn toàn trong Screen Readers và details/summary.

Trạng thái mở

Ở phần tử details đã mở, nếu bây giờ bạn nhìn vào mã nguồn với dev tools bạn sẽ thấy rằng trình duyệt đã thêm thuộc tính open khi nó ở trạng thái này. Chúng ta thật sự có thể thêm thuộc tính open vào <details> theo cách thủ công để hiển thị nội dung theo mặc định.

Phần tử Summary

Phần tử <details> đi cùng với một phần tử được gọi là <summary>; hai phần tử này có nghĩa là để sử dụng kết hợp với nhau nhưng sử dụng phần tử <summary> là hoàn toàn không bắt buộc.

Vậy, điều gì xảy ra khi bạn sử dụng nó?

Lấy ví dụ ở trên, mặc định Detail sẽ được thay thế bằng Hello World.

Lồng nhau

Như đã đề cập, phần tử <details> có thể chứa các phần tử <details> khác, giống như:

Điều này cho thấy một vấn đề với (trường hợp này không xảy ra với danh sách lồng nhau) phong cách mặc định của trình duyệt. Như bạn có thể nhìn thấy ở bên dưới, phần tử lồng bên trong được canh về bên trái cùng với phần tử cha làm mất đi sự phân cấp:

Điều này không dễ để giải quyết bằng cách thêm một số phong cách đơn giản. Vì vậy, hãy xem làm thế nào chúng ta định phong cách cho các phần tử này.

Định phong cách cho phần tử Details bằng CSS

Các phần tử <details><summary> có thể được định phong cách giống như bất kỳ phần tử nào khác; chọn chúng thông qua bộ chọn phần tử, một lớp hoặc một id và đặt các phong cách vào nó.

Ngoài ra, bạn có thể sử dụng bộ chọn thuộc tính để xác định phong cách cho trạng thái mở.

Phần tử <summary> cũng có thể được định phong cách. Khi nói về cái mà nếu bạn di chuyển chuột lên một phần tử chẳng hạn như một nút hoặc một liên kết, thì con trỏ bình thường sẽ biến thành một biểu tượng bàn tay. Nhưng đó không phải là trường hợp của phần tử <summary> cái mà cũng có thể nhấp vào. Thay vào đó, con trỏ sẽ biến thành biểu tượng văn bản, trông hơi không tự nhiên, do đó bạn có thể phải sửa đổi phong cách mặc định, định nghĩa pointer như sau.

Định phong cách biểu tượng mũi tên hình tam giác

Và bây giờ đối với câu hỏi bạn rất muốn hỏi: bạn có thể định phong cách cho hình tam giác nhỏ không? Vẫn chưa phải là tiêu chuẩn, nhưng Webkit đã sử dụng một phần tử giả cho mục đích này, ::-webkit-details-marker. Thông qua điều này, chúng ta có thể tùy biến các phong cách mặc định của mũi tên như màu sắc, màu nền, kích thước của mũi tên.

Thật không may, thay thế biểu tượng mũi tên trực tiếp thông qua ::-webkit-details-marker là không thể—ít nhất là tại thời điểm viết bài. Trường hợp khả thi duy nhất để thay thế nó là bằng cách sử dụng các ::before hoặc ::after.

Trình duyệt hỗ trợ

Trình duyệt hỗ trợ cho hai phần tử này đã được cải thiện hơn trong hai năm qua. Quay trở lại năm 2011 và 2012, Chrome là trình duyệt duy nhất có khả năng kết xuất phần tử <details><summary>—mặc dù việc cài đặt gặp một số vấn đề về tính truy xuất. Safari và Opera chỉ chỉ mới gia nhập câu lạc bộ gần đây.

Vì vậy, trong khi chờ đợi Firefox và Internet Explorer hỗ trợ, có một vài polyfill để bắt chước các chức năng, chẳng hạn như một cái được phát triển bởi Mathias Bynens, jQuery Details. Mặc dù polyfill này dường như dựa trên jQuery, nhưng kích thước thì nhỏ hơn nhiều so với thư viện jQuery UI.

Sau khi cài đặt, định phong cách cho nó giống như bình thường.

Thông tin thêm về trình duyệt hỗ trợ có thể được tìm thấy trên caniuse.com.

Trường hợp sử dụng và các ví dụ

Bạn có thể đã từng thấy những phần tử này. Ví dụ, trong khi mua sắm trực tuyến, bạn có thể tìm thấy một số trang web đặt các mô tả sản phẩm của họ trong một accordion. Hoặc họ có thể sử dụng nó trong sidebar để lọc kết quả, ví dụ như Payless.

Các phần tử <details><summary> cũng hoàn toàn phù hợp để tổ chức các câu hỏi thường gặp FAQ và danh sách các tính năng thường được tìm thấy trong cách bố trí bảng giá. Tôi đã tạo ra một bản demo mà bạn có thể xem ở đây, bạn có thể tự do sử dụng nó.

Kết luận

Như Aaron Lumsden nói trong bài viết này

"các trang web đang có xu hướng chứa nhiều dữ liệu và giống với ứng dụng"

vì vậy, phần tử mới này rất được đánh giá cao. Một ngày nào đó, có lẽ với sự ra đời của Web Components, việc xây dựng một trang web hoặc một webapp sẽ ít phụ thuộc vào các thư viện JavaScript hơn khi thêm một widget đơn giản như một Accordion.

Vậy, đã bao giờ bạn sử dụng <details><summary> ở trong trang web của bạn chưa?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.