Tìm hiểu một số cách sáng tạo và hữu ích để tạo kiểu cho danh sách.
Khi nghĩ đến một danh sách, bạn liên tưởng đến điều gì? Ví dụ dễ thấy nhất là danh sách mua sắm – dạng danh sách đơn giản nhất, là một tập hợp các mặt hàng không theo thứ tự cụ thể. Nhưng chúng tôi sử dụng các danh sách theo nhiều cách trên web. Có một bộ sưu tập các buổi biểu diễn âm nhạc sắp diễn ra tại một địa điểm? Rất có thể là một danh sách. Quy trình đặt vé gồm nhiều bước? Rất có thể là một danh sách. Một thư viện hình ảnh? Thậm chí đó có thể được coi là danh sách hình ảnh có chú thích.
Trong bài viết này, chúng ta sẽ đi sâu vào các loại danh sách HTML khác nhau có sẵn trên web và thời điểm sử dụng các danh sách này, bao gồm cả một số thuộc tính bạn có thể chưa biết. Chúng ta cũng sẽ xem xét một số cách hữu ích và sáng tạo để tạo kiểu cho quảng cáo bằng CSS.
Trường hợp sử dụng danh sách
Bạn nên sử dụng phần tử danh sách HTML khi các mục cần được nhóm theo ngữ nghĩa. Công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình) sẽ thông báo cho người dùng rằng có danh sách và số lượng mục. Giả sử bạn nghĩ về một lưới sản phẩm trên một trang web mua sắm, thì việc biết được thông tin này sẽ rất hữu ích. Do đó, việc sử dụng phần tử danh sách có thể là lựa chọn tốt.
Loại danh sách
Về mã đánh dấu, chúng tôi có 3 phần tử danh sách cho bạn lựa chọn:
- Danh sách không theo thứ tự
- Danh sách theo thứ tự
- Danh sách nội dung mô tả
Cách chọn phương pháp sẽ tuỳ thuộc vào trường hợp sử dụng.
Danh sách không theo thứ tự (ul)
Phần tử danh sách không có thứ tự (<ul>) hữu ích nhất khi các mục trong danh sách không tương ứng với bất kỳ thứ tự cụ thể nào. Theo mặc định, danh sách này sẽ hiển thị dưới dạng danh sách có dấu đầu dòng. Một ví dụ là danh sách mua sắm, trong đó thứ tự không quan trọng.
Một ví dụ phổ biến hơn trên web là trình đơn điều hướng. Khi xây dựng trình đơn, bạn nên gói ul trong phần tử nav và xác định trình đơn bằng nhãn để hỗ trợ các công nghệ hỗ trợ. Chúng ta cũng nên xác định trang hiện tại trong trình đơn bằng cách sử dụng thuộc tính aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
Bài viết này về cấu trúc trình đơn đưa ra một số đề xuất nhằm đảm bảo tất cả mọi người đều truy cập được vào các trình đơn điều hướng của chúng tôi.
Danh sách theo thứ tự (ol)
Phần tử danh sách có thứ tự (<ol>) là lựa chọn phù hợp nhất khi thứ tự của các mục là quan trọng, chẳng hạn như một quy trình nhiều bước. Theo mặc định, các mục trong danh sách được đánh số. Ví dụ: một tập hợp các hướng dẫn, trong đó người dùng phải hoàn tất các bước theo thứ tự.
Cả hai phần tử <ol> và <ul> chỉ có thể chứa các phần tử <li> là phần tử con trực tiếp.
Danh sách mô tả (dl)
Danh sách nội dung mô tả có chứa các cụm từ (các phần tử <dt>) và nội dung mô tả (<dd>). Mỗi cụm từ có thể đi kèm với nhiều nội dung mô tả. Các trường hợp sử dụng có thể bao gồm bảng thuật ngữ hoặc thực đơn nhà hàng. Theo mặc định, danh sách nội dung mô tả không hiển thị cùng với bất kỳ dấu đánh dấu nào, mặc dù trình duyệt có xu hướng thụt lề phần tử <dd>.
Trong HTML, bạn được phép nhóm các từ khoá có nội dung mô tả đi kèm bằng <div>. Điều này có thể hữu ích cho mục đích tạo kiểu, như chúng ta sẽ xem sau.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Định kiểu danh sách đơn giản
Một trong những cách sử dụng danh sách đơn giản nhất là đặt trong một đoạn văn bản nội dung. Thông thường, những danh sách đơn giản này không cần định kiểu phức tạp, nhưng chúng ta có thể muốn tuỳ chỉnh các điểm đánh dấu của danh sách có thứ tự hoặc không theo thứ tự, chẳng hạn như bằng màu thương hiệu hoặc bằng cách sử dụng hình ảnh tuỳ chỉnh cho dấu đầu dòng. Chúng ta có thể làm được khá nhiều thứ với list-style và phần tử giả ::marker!
::điểm đánh dấu
Ngoài việc cung cấp cho điểm đánh dấu danh sách một số kiểu cơ bản, chúng ta có thể tạo dấu đầu dòng theo chu kỳ. Ở đây, chúng ta đang sử dụng 3 URL hình ảnh khác nhau cho giá trị content của phần tử giả ::marker. Giá trị này bổ sung vào cảm giác viết tay như ví dụ về danh sách mua sắm (thay vì việc chỉ sử dụng một hình ảnh duy nhất cho tất cả):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Bộ đếm tuỳ chỉnh
Đối với một số danh sách được sắp xếp theo thứ tự, chúng ta có thể cần sử dụng giá trị bộ đếm nhưng thêm một giá trị khác vào đó. Chúng ta có thể sử dụng bộ đếm list-item làm giá trị cho thuộc tính content của điểm đánh dấu và thêm bất kỳ nội dung nào khác:
::marker {
content: counter(list-item) '🐈 ';
}
Bộ đếm của chúng ta sẽ tự động tăng thêm 1, nhưng chúng ta có thể cho phép tăng thêm một giá trị khác nếu muốn, bằng cách đặt thuộc tính counter-increment trên mục danh sách. Ví dụ: thao tác này sẽ tăng bộ đếm của chúng ta lên 3 lần mỗi lần:
li {
counter-increment: list-item 3;
}
Còn rất nhiều nội dung khác mà chúng ta có thể khám phá về bộ đếm. Bài viết Danh sách CSS, Điểm đánh dấu và Bộ đếm giải thích chi tiết hơn về một số khả năng.
Các điểm hạn chế của kiểu ::marker
Đôi khi, chúng ta có thể muốn kiểm soát nhiều hơn đối với vị trí và kiểu của điểm đánh dấu. Bạn không thể định vị điểm đánh dấu bằng hộp linh hoạt hoặc lưới. Ví dụ: điều này đôi khi có thể là một hạn chế nếu bạn cần một số căn chỉnh khác. ::marker cho thấy một số ít thuộc tính CSS để định kiểu. Nếu thiết kế của chúng ta yêu cầu bất kỳ thông tin nào khác ngoài định kiểu cơ bản, chúng ta nên sử dụng một phần tử giả khác.
Tạo kiểu cho danh sách không giống như danh sách
Đôi khi, chúng ta có thể muốn tạo kiểu cho danh sách theo cách hoàn toàn khác với kiểu mặc định. Điều này thường xảy ra với trình đơn điều hướng, chẳng hạn như khi chúng ta thường muốn xoá tất cả các điểm đánh dấu và có thể hiển thị danh sách theo chiều ngang bằng cách sử dụng flexbox. Có một phương pháp phổ biến là đặt thuộc tính list-style thành none. Điều này có nghĩa là sẽ không thể truy cập được phần tử giả điểm đánh dấu trong DOM nữa.
Điểm đánh dấu tuỳ chỉnh có ::before
Tạo kiểu cho phần tử giả ::before là một cách phổ biến để tạo điểm đánh dấu danh sách tuỳ chỉnh trước khi ::marker ra mắt. Nhưng ngay cả bây giờ, giao diện này có thể cho phép chúng ta linh hoạt hơn (khi cần) để tạo kiểu danh sách có hình ảnh phức tạp.
Giống như ::marker, chúng ta có thể thêm các kiểu dấu đầu dòng tuỳ chỉnh của riêng mình bằng cách sử dụng thuộc tính content. Không giống như sử dụng ::marker, chúng ta cần định vị theo cách thủ công, vì chúng ta không nhận được các lợi ích tự động do list-style-position cung cấp. Tuy nhiên, chúng ta có thể định vị khung này tương đối dễ dàng bằng flexbox, đồng thời mở ra nhiều khả năng căn chỉnh hơn. Ví dụ: chúng ta có thể thay thế vị trí của điểm đánh dấu:
Nếu đang tạo kiểu cho một danh sách có thứ tự bằng phần tử ::before, chúng ta cũng nên sử dụng bộ đếm để thêm điểm đánh dấu dạng số.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Việc sử dụng ::before thay vì ::marker cho phép chúng ta có toàn quyền truy cập vào các thuộc tính CSS để tạo kiểu tuỳ chỉnh, cũng như cho phép ảnh động và hiệu ứng chuyển tiếp (trong đó ::marker chỉ được hỗ trợ).
Danh sách thuộc tính
Phần tử danh sách có thứ tự chấp nhận một số thuộc tính không bắt buộc. Điều này có thể giúp chúng ta sử dụng trong nhiều trường hợp.
Danh sách đảo ngược
Nếu có danh sách 10 đĩa nhạc hàng đầu trong năm qua, chúng ta có thể đếm ngược từ 10 xuống còn 1. Chúng tôi có thể sử dụng bộ đếm tuỳ chỉnh và tăng số lượng bộ đếm tuỳ chỉnh. Hoặc chúng ta có thể chỉ cần sử dụng thuộc tính reversed trong HTML. Tôi cho rằng việc sử dụng thuộc tính reversed thường có ý nghĩa về mặt ngữ nghĩa thay vì tăng theo cách âm bộ đếm trong CSS, trừ phi các bộ đếm đó chỉ mang tính trình bày. Nếu CSS không tải được, bạn vẫn sẽ thấy các con số đếm ngược chính xác trong HTML. Ngoài ra, chúng ta cần xem xét cách trình đọc màn hình sẽ diễn giải danh sách.
Mời bạn xem bản minh hoạ về 10 đĩa nhạc hàng đầu trong năm 2021. Nếu bộ đếm được tăng lên hoàn toàn khi dùng CSS, thì ai đó truy cập vào trang bằng trình đọc màn hình có thể kết luận rằng số được tính tăng, vì vậy số 10 thực sự là số 1.
Bạn có thể thấy trong bản minh hoạ rằng bằng cách sử dụng thuộc tính reversed, các điểm đánh dấu của chúng ta đã có giá trị chính xác mà chúng tôi không cần làm gì thêm! Tuy nhiên, nếu tạo điểm đánh dấu danh sách tuỳ chỉnh bằng phần tử giả ::before, chúng ta sẽ cần điều chỉnh bộ đếm. Chúng ta chỉ cần hướng dẫn bộ đếm mục danh sách tăng theo giá trị âm:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Số lượng này sẽ đủ trong Firefox, nhưng trong Chrome và Safari, các điểm đánh dấu sẽ đếm ngược từ 0 đến -10. Chúng ta có thể khắc phục vấn đề này bằng cách thêm thuộc tính start vào danh sách.
Tách danh sách
Thuộc tính start cho phép chúng ta chỉ định giá trị số bắt đầu danh sách. Tính năng này có thể hữu ích trong trường hợp bạn muốn chia danh sách thành các nhóm.
Hãy cùng xây dựng ví dụ về 10 album hàng đầu của chúng tôi. Có lẽ chúng tôi thực sự muốn đếm ngược 20 đĩa nhạc hàng đầu, nhưng theo nhóm 10 đĩa nhạc. Giữa hai nhóm này có một số nội dung trang khác.
Chúng ta cần tạo hai danh sách riêng biệt trong HTML, nhưng làm cách nào có thể đảm bảo rằng các bộ đếm sẽ chính xác? Vì thẻ đánh dấu của chúng ta hiện đang tồn tại, nên cả hai danh sách sẽ đếm ngược từ 10 xuống 1. Đây không phải là điều chúng ta muốn. Tuy nhiên, trong HTML, chúng ta có thể chỉ định giá trị thuộc tính start. Nếu chúng ta thêm giá trị start là 20 vào danh sách đầu tiên, các điểm đánh dấu sẽ được cập nhật tự động lại một lần nữa!
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Bố cục danh sách nhiều cột
Bố cục nhiều cột đôi khi có thể phù hợp với danh sách của chúng tôi, như bạn có thể thấy trong các bản minh hoạ trước. Bằng cách đặt chiều rộng cột, chúng ta có thể đảm bảo danh sách của mình tự động thích ứng, chỉ được đặt trên hai hoặc nhiều cột khi có đủ không gian. Chúng ta cũng có thể tạo khoảng cách giữa các cột, và để hiệu quả hơn, hãy thêm quy tắc cột theo kiểu (bằng cách viết tắt tương tự như thuộc tính border):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Khi sử dụng cột, đôi khi chúng ta có thể tạo ra những điểm ngắt khó xem trong các mục danh sách – không phải lúc nào cũng là hiệu ứng mà chúng ta mong muốn.
Chúng ta có thể ngăn chặn những dấu ngắt bắt buộc này bằng cách sử dụng break-inside: avoid trên các mục danh sách:
li {
break-inside: avoid;
}
Thuộc tính tuỳ chỉnh
Các thuộc tính tuỳ chỉnh của CSS mở ra vô số khả năng để tạo kiểu cho danh sách. Nếu biết chỉ mục của mục trong danh sách, chúng ta có thể sử dụng chỉ mục đó để tính toán giá trị thuộc tính. Rất tiếc, hiện tại không có cách nào để xác định chỉ mục của phần tử này (theo cách có thể sử dụng được, theo bất kỳ tỷ lệ nào) riêng trong CSS. Bộ đếm chỉ cho phép chúng tôi sử dụng giá trị của chúng trong thuộc tính content và không cho phép tính toán.
Tuy nhiên, chúng ta có thể đặt chỉ mục của phần tử này trong thuộc tính style trong HTML. Điều này có thể giúp việc tính toán trở nên khả thi hơn, đặc biệt là khi chúng ta dùng ngôn ngữ tạo mẫu. Ví dụ này cho thấy cách chúng ta sẽ đặt điều đó bằng cách sử dụng Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js là một thư viện thực hiện chức năng tương tự ở phía máy khách.
Khi sử dụng giá trị thuộc tính tuỳ chỉnh, chúng ta có thể hiển thị tiến trình thông qua một danh sách theo nhiều cách. Bạn có thể sử dụng thanh tiến trình cho danh sách các bước. Trong ví dụ này, chúng ta sử dụng một phần tử giả có độ dốc tuyến tính để tạo một thanh cho mỗi mục hiển thị khoảng cách của người dùng trong danh sách.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Chúng ta cũng có thể điều chỉnh sắc độ khi danh sách phát triển, bằng cách sử dụng hàm màu hsl(). Chúng ta có thể tính toán giá trị hue bằng cách sử dụng thuộc tính tuỳ chỉnh.
Định kiểu danh sách nội dung mô tả
Như đã đề cập trước đó, chúng ta có thể chọn gói các thuật ngữ và định nghĩa của chúng vào một div trong dl, để có thêm nhiều tuỳ chọn định kiểu. Ví dụ: chúng ta có thể muốn hiển thị danh sách dưới dạng lưới. Việc đặt display: grid trên danh sách mà không có trình bao bọc div xung quanh mỗi nhóm có nghĩa là các thuật ngữ và nội dung mô tả sẽ được đặt trong các ô lưới khác nhau. Đôi khi, cách này hữu ích, như trong ví dụ sau hiển thị trình đơn gồm các loại bánh nướng kèm theo nội dung mô tả.
Chúng ta có thể xác định lưới trong chính danh sách và đảm bảo rằng các thuật ngữ và nội dung mô tả sẽ luôn khớp với nhau trong các cột, trong đó chiều rộng cột được xác định theo từ khoá dài nhất.
Mặt khác, nếu chúng ta muốn nhóm riêng biệt các cụm từ theo kiểu thẻ mô tả, thì trình bao bọc <div> sẽ rất hữu ích.
Tài nguyên
- Danh sách Giới thiệu về danh sách và ::points
- Điểm đánh dấu tuỳ chỉnh sử dụng ::marker
- Danh sách CSS có bộ đếm