La propriété list-style est une propriété raccourcie qui définit en une seule déclaration les valeurs de trois propriétés liées aux listes :

//CSS
ul {
  list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

Voici un exemple de syntaxe :

//CSS
ul {
  list-style: square outside none;
}

Cette syntaxe est équivalente à la version “longue” :

//CSS
ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

Dans la version raccourcie, si une valeur est omise elle revient à son état initial.

Valeurs de list-style-type

La propriété list-style-type définit le type de liste c'est à dire le marqueur figurant devant la liste (point, nombre, etc.). Les mots-clés acceptés sont :

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

Des valeurs nouvelles sont introduites dans CSS3, mais il n'y a pour l'instant aucune compatibilité.

La démo suivante présente un groupe de listes non ordonnées montrant le résultat de chaque mot-clé :

See the Pen list-style-type examples by Louis Lazaris (@impressivewebs) on CodePen.

La propriété list-style-type s'applique à toutes les listes, et à tout élément défini avec display: list-item.

La couleur du marqueur de liste sera la couleur de l'élément, définie via la propriété color.

Valeurs de list-style-position

La propriété list-style-position définit où positionner le marqueur de liste, elle accepte l'une des deux valeurs suivantes : “inside” ou “outside” (à l'intérieur/à l'extérieur). “Inside” indique que le marqueur est à l'intérieur du bloc (la “boîte”) contenant la liste, tandis que “outside” signifie que le marqueur n'est pas contenu dans le bloc contenant la liste. Ces deux valeurs sont montrées ci-dessous, avec une liste sans padding et une bordure rouge ajoutée :

See the Pen list-style-position examples by Louis Lazaris (@impressivewebs) on CodePen.

Valeurs de list-style-image

La propriété list-style-image détermine si le marqueur de liste est une image et accepte une valeur de none ou une URL pointant vers une image.

//CSS
ul {
  list-style-image: url(images/bullet.png);
}

Autres démos

See the Pen HTML List Demos by Matt West (@matt-west) on CodePen.

(publicité)

Autres ressources à consulter sur ce sujet :

Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.