List styles

You can give quite detailed instructions on the appearance of list items, concerning the bullets or other markers and their position.

list-style-type

The list-style-type declaration allows you to define the type of the list marker. The table below gives compatibility information on values that are supported by at least one browser.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
asterisks
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
armenian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
binary
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
box
  • Test
  • Test
  • Test
  • Test
 No No No No Yes
circle
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
decimal
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
decimal-leading-zero
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
disc
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
footnotes
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
georgian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
lower-alpha
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
lower-greek
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
lower-hexadecimal
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
lower-latin
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
lower-norwegian
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
lower-roman
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
none
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
octal
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
square
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
upper-alpha
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
upper-greek
  • Test
  • Test
  • Test
  • Test
 No Yes No Yes Yes no
upper-hexadecimal
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
upper-latin
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
upper-norwegian
  • Test
  • Test
  • Test
  • Test
 No No Yes Yes No
upper-roman
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

Unsupported values

CSS 3 defined other values that are not yet supported by any browser. Below is an overview; as soon as browsers start to support a value I'll move it to the table above.

CSS3 adds many alphabets, but seems to focus on odd ones. I'm missing Cyrillic and Arab, which have quite large user bases, while the spec does mention tons of obscure Ethiopian and Caucasian alphabets.

If we must support lots of vague alphabets anyway, W3C should add futhark (Germanic runes) and ogham (old Celtic script). It would make ancient historians very happy.

For testing purposes I restricted myself to the European values, because these are the only ones I can check. There's little difference between the Norwegian and the standard Latin alphabet, except for a few extra letters. I'm a little disappointed that even a Norwegian browser famed for its CSS support doesn't support the Norwegian values.

list-style-image

It is also possible to use an image instead of a marker. This is supported by all browsers, though there are some minor incompatibilities in the <li> height. Does this height have to be adjusted for the image? Explorer and Opera don't; Firefox, Safari and iCab do.

list-style-position

Finally, what position should the list marker have. W3C defined inside and outside. Outside is the normal behaviour in most browsers, while inside means that the marker should be an inline element, inside the margin, so that the text may wrap below it.