-
200729 Aug
Posted in Declarations, Modules
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
::markerpseudo-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.
You can skip to the end and leave a response.
-
Comments
-
01.
Sounds interesting! All CSS progress is good progress in my eyes.
-
02.
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).
-
03.
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?
-
04.
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.
-
05.
This would be wonderfull!
Styling a list still is not so fanny as could be… specially the ordered lists. -
06.
::marker para CSS3…
Mediante este pseudoelemento de css3 podemos tener más control sobre cada uno de los bullets de nuestras listas…
-
07.
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
-
08.
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.
-
09.
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 :)
-
10.
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.
-
11.
I mean “instead of using the other” in the comment above ^^’
-
12.
“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?
-
13.
Fatih Hayrioğlu’nun not defteri » 03 Eylül 2007 Web’den Seçme Haberler says:Comment » September 3rd, 2007 at 9:25 am
[…] CSS3′deki listeler daha süslü olacakmış. Link […]
-
14.
-
15.
Dave Woods - HTML, CSS, Web Design » Are we getting carried away with CSS3? says:Comment » September 3rd, 2007 at 1:27 pm
[…] 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 […]
-
16.
[…] Lists to get more decorative […]
-
17.
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…
- 18.
-
19.
I continue to struggle with lists – often going over the same territory. If ever there was a part of HTML that needs a total make-over, it is lists.
A) That damned bullet. should be added where wanted, not eliminated where not.
B) That damned bullet should be whatever glyph we want, not just a choice of four meaningless styles (square,disc or circle, it’s still semantically null).
C) Lining up the damned bullet – always a pain
D) controlling the indent of that damned bullet – ouch!And then the are horizontal menus: IMHO a menu is not a list. Give horizontal menus their own semantic element in the DOM.
#JustSaying – @cwebba1
-
01.
