HTML lists are often considered to be relatively monotonous and have limited functions, so we often ignore their wide application. Still, we can use some old ways to customize the list, such as removing tags, inverting orders, and creating custom counters.
However, there are also some "new" knowledge points when using the list, including potential risks that need attention. Most of these risks are insignificant, but they occur much more frequently than you think. We will explore these risks, as well as some new list usage, and even some new ideas for improving old methods.
To be clear, the HTML elements discussed in this article include:
<dl></dl>
<menu></menu>
Sorted lists, unordered lists, and interactive lists all contain list items (<code><li>), and their display depends on the list type. Ordered lists (<ol></ol>) Display numbers next to list items; unordered lists (<code><ul></ul>) and menu elements (<menu></menu>) display bullets next to list items. We call these "list tags" and we can even style them using the ::marker pseudo-element. Description lists use descriptive terms (<dt></dt>) and description details (<dd></dd>), rather than numbers or bullets, and are often used to display metadata and vocabulary, but are not common in practical applications.
Let's start with the simple part--how to correctly (at least in my opinion) reset the list style. After that, we'll explore some accessibility issues and then focus on the elusive <menu></menu> elements, which you might be surprised to find…it's actually a kind of list too!
The browser automatically applies its own User Agent style to help the visual structure of the list. This is very useful sometimes! But if we want to start with a blank state without styles, then we have to reset those styles first.
For example, we can easily remove the marker next to the list item. Nothing new here:
/* 清除所有列表标记！ */
ol, ul, menu {
list-style: none;
}But modern CSS provides new ways to help us locate specific list instances. Suppose we want to clear all lists of marks, but keep the marks if these lists appear in long content (such as articles). If we use the newer CSS pseudo-class functions :where() and :not(), we can isolate these instances and allow tags in these cases:
/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}Why use :where() instead of :is()? The specificity of where() is always zero, while :is() takes the specificity of the most specific element in its selector list. Therefore, using :where() is a less mandatory method of coverage and is easily covered by itself.
UA style also applies padding to separate the contents of the list item from its tags. This is a nice default effect in some cases, but if we have removed the list markup like above, we might as well clear the padding as well. This is another use case for :where():
/* 清除所有列表标记！ */
ol, ul, menu {
list-style: none;
}OK, this will prevent the unmarked list items from appearing to be suspended in the space. But we were a little overkill, removing the padding in all cases, including those we had previously isolated in <article></article>. So, now those lists with markers are a little hung outside the edge of the content box.
Note that the UA style applies an additional 40px padding to the <menu></menu> element. So what we have to do is prevent the list marker from "hanging" outside the container. We can use the list-style-position attribute to solve this problem:
Or not… Maybe it depends on style preference?
Unfortunately, even in modern times, there are some accessibility issues with listings. One problem is the result of applying list-style: none;, like we did when resetting the UA style.
In short, Safari does not read ordered and unordered lists that use list-style: none; to the actual list, such as when navigating content with a screen reader. In other words, removing the tag also removes the semantic meaning of the list. The solution is to apply ARIA list roles on the list and apply list item roles on the list item so that the screen reader can recognize them:
/* 对于不是文章中的列表... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}Strangely, Safari treats this as a feature rather than a bug. Basically, users will report that screen readers have announced too many lists (because developers tend to overuse them), so now, it is not actually surprising that only those lists with role="list" will be announced by screen readers. Scott O’Hara describes how this all happened in detail.
The second accessibility issue was not caused by us (Long live!). So, did you know you should add aria-label to elements without titles? Well, it makes sense sometimes to do the same for a list that does not contain title elements that help describe the list.
:where(ol, ul, menu) {
padding-left: 0; /* 或 padding-inline-start */
}You absolutely don't have to use both methods. Using a title or ARIA tag just adds context, not a requirement – be sure to test your website with a screen reader and choose the user experience that best suits the current situation. In related news, Eric Bailey wrote an article about why and how to think
is a code smell.<menu></menu> is also a list? OK, so, you might be wondering about all the <menu></menu> elements I've been inserting in the code examples. This is actually quite simple; the menus are unordered lists, just that they are used for interactive projects. They are even displayed as unordered lists in the accessibility tree. In the early days of Semantic Web, I mistakenly thought menus were similar to <nav></nav> and then thought they were used for context menus (or the "toolbar" as the specification calls it), because that's what an earlier version of the HTML specification said. (If you are interested, MDN has an interesting introduction to all deprecated content related to <menu></menu>.)
Today, however, this is the semantic way of using menus:
/* 清除所有列表标记！ */
ol, ul, menu {
list-style: none;
} Personally, I think <menu></menu> has some good use cases. The last example shows a list of social sharing buttons contained in the <menu></menu> element with tags, and it is worth noting that the Share Articles tag contributes a lot of context and helps describe the button's functionality. Is the menu absolutely necessary? No. Are they HTML milestones? Absolutely not. But if you like less <div> and you think components can use <code>aria-label to provide additional context, then they are there.
Yes, there are the aforementioned <dl></dl> (description list) elements, however, MDN does not seem to think they are the same as other lists—it is a group list of terms—and I can't say that I've actually seen them being used. According to MDN, they should be used for metadata, vocabulary, and other types of key-value pairs. I'd avoid them because all screen readers announce them differently. But let's not end with negative comments. Here are some really cool things you can do with a list:
The above is the detailed content of Newer Things to Know About Good Ol' HTML Lists. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
