CSS3 – list-style-typeMany web-developers got a cold shower when they found out that their CSS3 (Cascading Style Sheet) no longer validated. Earlier unordered HTML lists (listed items) used the following types: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", or "inherit".
Code (CSS):/*
Example of listed items
*/
ul {
display: block;
}
li {
list-style-type: decimal-leading-zero;
}
/*
Example of <li> element used in eg. menus
*/
ul {
display: inline;
}
li {
list-style-type: none;
}
The code above will not validateThis is because HTML5 do not support the attribute listed-item-type, which now also is introduced in CSS3. Validating listed-items can use the types "inherit", URL to the listed item, or default.
Code (CSS):/*
Example of unnumbered list that validates
*/
ul {
display: block;
}
li#method-one {
list-style-type: inherit;
}
li#method-two {
list-style: url(my_listed_item.png);
}
Transitional HTML5Menus in XHTML 1.1 as well as HTML 4.01, can use the attribute
inline. The <li> element will automatically show without the items in the list. If you don't format any thing, the CSS3 will use default ("disc", "circle", "square" in that order).
Code (CSS):/*
Example of <li> used in validating horozontal menus
If the attribute "inline" are being used, the listed items in the <li> element will automatically be removed.
*/
ul {
display: inline;
}
/*
Example of <li> tag used in vertical menus (that validate)
*/
ul {
display: block;
}
li {
list-style: none;
}
ConclusionIn the future, menus in HTML5 will use semantic navigation with the <nav> element. It will therefore be naturally to use URL, or simply default values, in the listed items.