Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Petit point sur les listes en XHTML et CSS

Je m’aperçois quelques fois que les listes en XHTML, c’est-à-dire les balises ol et ul, ne sont pas exploitées à leur maximum. Connaissiez-vous les attributs type, start et compact ? Ainsi que les listes stylisées entre autres en katakana-iroha ? Allez, une p’tite révision ne fera pas de mal…

Publié il y a déjà trop longtemps…

A noter, les listes sont recomandées pour l’accessibilité des sites Internet.

Liste numérotées ol en XHTML

Ci-après les attributs disponibles en XHTML Transitionnel et Frameset et leur compatibilité navigateur.

Liste numérotées par défaut

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotées compactes

Attribut compact="compact"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotées initialisées

Attribut start (ici initialisé à « 1234 »)

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotées par type

Liste numérotées type numérique arabe

Attribut type="1"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste numérotées type alphabétique minuscules

Attribut type="a"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste numérotées type alphabétique majuscules

Attribut type="A"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste numérotées type romain minuscules

Attribut type="i"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste numérotées type romain majuscules

Attribut type="I"

  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotées ol en CSS

Voici un petit tableau récapitulatif des styles de liste via la propriété list-style-type :

Ci-après les valeurs de la propriété list-style-type et leur compatibilité navigateur.

Liste numérotés par glyphes

Liste stylisées en circle
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en disc
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en square
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotés par chiffres

Liste stylisées en decimal
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en decimal-leading-zero
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotés par langues (minuscules / majuscules)

Liste stylisées en lower-alpha
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en upper-alpha
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en lower-latin
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en upper-latin
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en lower-roman
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en upper-roman
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en lower-greek
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Liste numérotés par langues

Liste stylisées en armenian
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en cjk-ideographic
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en georgian
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en hebrew
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en hiragana
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en hiragana-iroha
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en katakana
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0
Liste stylisées en katakana-iroha
  1. Firefox 1.5
  2. Firefox 2.0
  3. Internet Explorer 5.5
  4. Internet Explorer 6.0
  5. Internet Explorer 7.0
  6. Safari 2.0
  7. Opera 9.0

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

  1. pup

    Ca c’est super sympa, merci.

  2. Hikapa

    S’il te plaît, pourrais-tu donner des détails sur le "compact", je vois pas comment tester …
    Merci pour l’article !

    • Shemu

      Lorsqu’il est mentionné, cet attribut booléen provoque le resserrement des éléments d’une liste (verticalement).

  3. happynoff

    heu petite note, je crois que les types :

    – cjk-ideographic
    – hiragana
    – hiragana-iroha
    – katakana
    – katakana-iroha

    ne sont pas compatibles avec firefox 2.
    Je suis sous firefox 2.0.0.2 ca affiche uniquement des ?

    • Shemu

      Ils fonctionnent… Celà doit venir de ta configuration des langues.

  4. happynoff

    c’est possible, j’ai des problemes avec les accents…
    la seule fois ou j’ai reussi a corriger ca le systeme plantait apres…

    donc vi ca doit venir de chez moi, dsl :)

Les commentaires sont clos.