CSS3 – list-style-typeMange webutviklere fikk seg en kalddusj da de oppdaget at deres CSS3 stilark ikke lenger validerte. Tidligere uordnede lister (<ul>) brukte nemlig følgende typer: "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", eller "inherit".
Code (CSS):/*
Eksempel på unummerert liste
*/
ul {
display: block;
}
li {
list-style-type: decimal-leading-zero;
}
/*
Eksempel på <li> brukt i f.eks menyer
*/
ul {
display: inline;
}
li {
list-style-type: none;
}
Valgene over vil rett og slett ikke validereDette av at HTML5 ikke støtter attributtvalg (listed-item-type), noe som nå også er innført på CSS3. Uordnede lister (som skal validere) kan bruke typen "inherit", egen
URL til punktlisten, eller default verdiene.
Code (CSS):/*
Eksempel på uordnede lister som validerer
*/
ul {
display: block;
}
li#method-one {
list-style-type: inherit;
}
li#method-two {
list-style: url(my_listed_item.png);
}
Transitional HTML5For menyer i XHTML 1.1 (også HTML 4.01) kan attributtet
inline brukes. <li> vil da automatisk fjerne listemerkingen. Hvis man ikke deklarere noe som helst, vil <li> bruke default verdiene ("disc", "circle", "square" i denne rekkefølgen).
Code (CSS):/*
Eksempel på <li> brukt i horisontale menyer som validerer
I menyer hvor attributtet "inline" brukes, vil listemerkingen i taggen <li> automatisk bli fjernet.
*/
ul {
display: inline;
}
/*
Eksempel på <li> brukt i vertikale menyer som validerer
*/
ul {
display: block;
}
li {
list-style: none;
}
KonklusjonI fremtiden vil HTML5 bruke semantisk navigasjon med <nav> elementet i menyer. Derfor vil det bli naturlig å bruke
URL til punktlistene, eller rett og slett default-verdiene.