I love a short and powerfully useful article. This one is especially useful to me, because I account for the problem Manuel is solving in my CSS reset:
ul[role='list'],
ol[role='list'] {
list-style: none;
}
The reason I have it in the reset is because I’m making a presumption about my and/or my team’s CSS because if there’s a class being added to a list, it almost certainly isn’t going to look like one. It’s a useful hook!
Because of Safari removing list semantics — as referenced in Manuel’s post — we have a policy of “if a list gets a class added, it gets a list role added too”. That policy lives, but I think I’m going to seriously think about removing the above snippet from the reset.
Well, I say that, but I might go back to how I once reset lists:
ul[class], ol[class] {
list-style: none;
}
But update it as:
:is(ul, ol)[class] {
list-style-type: "";
}
I know, I know, attaching this to items with a class is very controversial, but remember, the reset is what works for me and the team, not what works for everyone!
Anyway, read Manuel’s post because it’s fantastic.