Le 15 avr. 2013 à 13:53, Jukka K. Korpela jkorp...@cs.tut.fi a écrit :
2013-04-15 2:41, Philippe Wittenbergh wrote:
Another option: generate the bullet yourself, using generated
content. Sample: http://dev.l-c-n.com/_temp/bullet2.html
Works perfectly fine in IE 8 and up, Gecko, WebKit, iOS and Android
devices.
The main problem is probably with IE 7 (and older): no bullets at all.
Yes, that is why I mentioned IE 8 (and up)… In practice that is only a minor
problem on my book, as for most modern sites, you'll need an oldIE specific
stylesheet anyway. And the number of IE7 and older users is really becoming
small.
If the coloured list marker is an absolute, critical necessity, even in older
UA, then yeah, you better look for some other solution.
Another issue is that the CSS-generated bullet is not of the same size as
browser-generated default bullets. Their vertical positions may also differ,
as well as spacing between them and the list item text.
Even with the ‘standard’ list-markers there are small different between various
browsers, even on the same OS. Using this ‘custom list marker’ technique, you
also have control over the size and the placement of the marker. I've had
comments from clients that the standard list makers were either too small or
too big, too close,… As you note below, with current CSSS, the author has very
little control over the list marker.
The ::marker pseudo-element would solve the problem nicely, if its definition
were finalized and, most important, it were implemented. I mention this
because it indicates that in CSS as currently defined and implemented, there
is no direct way to style list markers (bullets or numbers) as generated for
display: list-item.
Yeah the ::marker pseudo-class would be nice (partially implement in Opera, I
think ?). That css 3 module seems to be forgotten by the CSS WG. Too much focus
on whizz-bang effects to full fill the needs of the corporate paymaster.
Assuming that the markup can be changed and that (some) bullet character
(styled some wway) is acceptable , the most robust way is really to make the
bullets part of the content, using e.g.
div class=ul
div class=lispan class=bullbull;/span Item content
...
/div
Though clumsy, this works works robustly across browsers and their settings,
and you can style the bullets as you like, since they are marked up as
elements. Heads up: Your colleagues and other people might say that this is
not semantic and that you must use ul for anything that is an unordered
list, instead of seeing it as one tool for creating a bulleted list. Yet,
ul is often an obstacle to styling a list
By not using a ul, you also loose the accessibility benefits associated with
a HTML list: the AT agent broadcast this information to the user (e.g. ‘This is
a list with 4 items’ - depending on settings).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
