Secció 3: Propietats

5. Llistes i markers

5.3. list-style-type

Aquesta propietat especifica l'aparença del marcador quan list-style-image té el valor 'none', o bé si la imatge indicada a l'adreça no es troba.

list-style-type pren com a valor una de les paraules clau que es llisten a continuació (prepara't, n'hi ha 21!). Per què serveixi com a exemple, cada item de la llista següent té un marcador corresponent a l'explicació.

• none. No hi ha cap marcador.
• disc (valor per defecte). Doncs això, un disc. :)
• circle. Igual que 'disc', però buit per dins.
• square. Un quadrat.

Fins aquí els tipus que s'utilitzen en llistes no numerades. Són els mateixos que es podien fer servir amb l'atribut type de l'element UL en HTML. A continuació veurem els tipus numerats, i aquí sí que trobarem alguna novetat respecte l'atribut type de l'element OL.

• decimal. Números decimals (1, 2, 3, ...)
• decimal-leading-zero. Números decimals, però amb un zero davant quan calgui (01, 02, ... , 09, 10, 11, ...)
• lower-roman. Numeració romana, amb lletres minúscules (i, ii, iii, iv, ...)
• upper-roman. Numeració romana, amb lletres majúscules (I, II, III, IV, ...)
• lower-latin o lower-alpha. Lletres minúscules (a, b, c, ...). Posats a triar, millor utilitzar 'lower-alpha', ja que 'lower-latin' és un valor que Internet Explorer no entén.
• upper-latin o upper-alpha. Lletres majúscules (A, B, C, ...)
• lower-greek. Lletres gregues minúscules (alpha, beta, ...)
• hebrew. Numeració hebrea tradicional
• georgian. Numeració georgiana tradicional (an, ban, gan, ... , he, tan, in, in-an, ...)
• armenian. Numeració armenia tradicional
• cjk-ideographic. No sé què vol dir, algú em pot ajudar?
• hiragana (a, i, u, e, o, ka, ki, ...)
• katakana (A, I, U, E, O, KA, KI, ...)
• hiragana-iroha (i, ro, ha, ni, ho, he, to, ...)
• katakana-iroha (I, RO, HA, NI, HO, HE, TO, ...)

Uf, no està malament! Probablement utilitzaràs els sis primers, la resta són sistemes de numeració d'altres països o cultures, i per tant de dubtosa utilitat per a nosaltres. El W3C es caracteritza entre altres coses per preocupar-se per l'accessibilitat i la internacionalització dels seus sistemes; els diferents valors possibles de list-style-type en són una bona mostra.

Comprovaràs que el teu navegador no entén tots els valors (si no és així, digue'm quin navegador fas servir!!). Internet Explorer 6 només entén 'decimal', 'lower-alpha', 'upper-alpha', 'lower-latin' i 'upper-latin', Netscape 6 alguns més. Probablement això no sigui un problema, ja que els sistemes de numeració més usuals sí estan perfectament suportats (llevat potser de 'decimal-leading-zero', no suportat per Internet Explorer). Un cop més els navegadors no s'adeqüen a l'especificació CSS, ja que en teoria quan un tipus no està suportat, s'ha d'utilitzar en el seu lloc el valor 'decimal', i no és el que fan ni IE ni Netscape.

Recorda que si hi ha un valor vàlid per a list-style-image, el valor de list-style-type serà ignorat.

Aquí hauríeu d'estar pensant que alguna cosa falla. Com és que podem utilitzar elments OL per fer llistes numerades, si el valor per defecte de list-style-type és disc? La resposta és que els navegadors incorporen un style sheet per defecte que defineix quina és l'aparença 'normal' de cada element HTML. En aquest style sheet hi haurà una sentència del tipus:

UL LI { list-style-type: disc; }
OL LI { list-style-type: decimal; }

Una altra possibilitat és utilitzar els elements OL i UL com a selectors enlloc de LI. Ambdós no són de tipus list item, però les propietats que tinguin assignades seran heretades pels seus elements fill de tipus list item, és a dir, els LI. Probablement aquesta seria la manera més adequada d'utilitzar les propietats relacionades amb les llistes, si no fos perquè alguns navegadors tenen problemes en determinats casos. Si volem evitar possibles resultats indesitjats, el més segur és utilitzar LI com a selector, combinat si cal amb selectors contextuals, selectors de classe...

OL LI { list-style-type: upper-roman; }
OL    { list-style-type: upper-roman; }

Les dues sentències són equivalents, tot i que la segona pot produir conflictes en alguns navegadors.