Lists to get more decorative
Since the move away from tables to CSS-based layouts, lists have become more important in producing semantic markup; in Andy Clarke’s Transcending CSS, he seems at times to be on the verge of saying all content can be marked up with lists!
Yet the basic list itself is let down by the range of markers available; for unordered lists you have disc, circle or square, or images which are implemented so differently across browsers that it’s better not to use them. Perhaps most annoying of all, you can’t have the glyph be a different colour from the content without extra markup:
<li><span>Lorem ipsum</span></li>
That could be set to change with the proposed new lists module which allows a much wider range of glyphs, markers and counters and, more notably, the ability to style them with the ::marker pseudo-element. In a nutshell, this allows you to treat the list-style-type as a separate entity and style it accordingly.
The working draft doesn’t specify exactly what declarations you’ll be able to apply, although it does mention borders, margin, and padding so it’s not a great stretch to imagine that you could add colour and font styles to that also - meaning lists could be set to become a lot more decorative:
li::marker {
background-color: #fff;
border: 2px dotted #f00;
color: #f00;
font-size: 2em;
height: 4em;
text-align: center;
width: 4em;
}
Do I have to include the usual disclaimer? This is still only a working draft of a proposal (and a low priority one at that), and browser support currently stands at nil.
Sounds interesting! All CSS progress is good progress in my eyes.
I can’t think of a reasonable use for borders around list items that can’t already be done with a span, unless people actually think that having the bullet INSIDE the border would be a good stylistic decision (hint: ugly is not a good stylistic decision).
I should have provided an example… an ordered list with nicely decorative numbers, perhaps? And anything that doesn’t involve extra markup is good, right?
To right Peter. I am a bit of a scaleable layout fiend, which causes quite a lot of extra divs. As you examples show in the CSS3 preview section, I should be able to opperate with fewer divs in the not to distant future. Hopefully IE and Opera will actually make proper implementation of the different unites of measurement by then.
This would be wonderfull!
Styling a list still is not so fanny as could be… specially the ordered lists.
::marker para CSS3…
Mediante este pseudoelemento de css3 podemos tener más control sobre cada uno de los bullets de nuestras listas…
I agree with the comments about list-style-image being difficult to use because of their implementation across different browsers but is the easiest solution to this not just to use a background-image on the list?
If you want to apply an image as a bullet that’s say 16×16 pixels for example, then it’s easiest to apply a background-image to the , use background-repeat: no-repeat; and then apply a padding-left of say, 20px to position the text next to the bullet.
A lot of the CSS3 modules will be extremely useful but this seems to just expand on something which there’s already a better alternative for even with CSS2.1
Dave Woods: That’s the easiest way to do it now, but I don’t think that’s the easiest way to do it forever; it’s basically a hack.
Hi Peter, I’m sorry but I disagree, a hack is usually something that involves conditional comments or invalid CSS to compensate for a specific browser(s) rendering inaccuracies. With this method it’s perfectly valid HTML code, doesn’t introduce any extra HTML markup and works consistently across all browsers, even the non-standards compliant browsers including IE5.x.
Maybe I’m misunderstanding the potential uses for this module as it seems to just introduce more list-style-type’s which obviously won’t be supported in older browsers and by the time CSS3 has been widely adopted and can be used, you’d hope that the browser developers would have sorted out the list-style-image consistency problems :)
Dave Woods: when you simulate one (possibly incorrectly implemented) feature instead of the other that is specifically exist for some purpose that’s basically a hack.
I mean “instead of using the other” in the comment above ^^’
“Perhaps most annoying of all, you can’t have the glyph be a different colour from the content without extra markup”
I’ve found that styling the UL or OL one way and the li another works well (eg. ol font size 20px, li font size 12px - for larger numbers). I imagine you could do the same with colors, or not?
[...] CSS3′deki listeler daha süslü olacakmış. Link [...]
@ Natalie: If only it were that easy!
[...] resource for this kind of information and a lot of the content is useful, but the recent post on Lists to get more decorative which contains information on the new lists module got me thinking that some of the modules being [...]
[...] Lists to get more decorative [...]
I tend to use the li styling very often in my menus and they prove very successful and i feel they are flexible in many ways…