Quelles sont les propriétés qui s'appliquent à :first-letter ?

Astuce par (Consultant Web)
Créé le , mis à jour le (14499 lectures)
Tags : css, first-letter, first, letter

Toutes les propriétés CSS ne sont pas applicables au pseudo-élément :first-letter, attention notamment aux différences entre CSS2 (la théorie recopiée par certains sites) et CSS2.1 (la réalité).

Propriétés non applicables :

  • Les propriétés display, width et height sont laissés à l'appréciation du navigateur (ces propriétés sont généralement non appliquées ou différentes selon le navigateur).
  • text-shadow ne s'applique plus depuis CSS2.1
  • clear n'est plus obligatoirement applicable depuis CSS2.1 (laissé à l'appréciation des navigateurs)

Propriétés appliquables selon la norme :

  • toutes les propriétés non listées ci-dessus sont susceptibles d'être appliquées
  • letter-spacing et word-spacing sont obligatoirement applicables, mais chaque navigateur peut y ajouter d'autres propriétés.

Bugs :

  • Internet Explorer 6 ne reconnait pas first-letter lorsqu'il n'y a pas d'espace entre le sélecteur et l'accolade (ex : .toto:first-letter{propriétés;}).

Aller plus loin :

  • line-height "remplace" en quelque-sorte la propriété height. S'il n'est pas appliqué à float, c'est l'équivalent d'un line-height sur :first-line. Dans le cas contraire, il permet le plus souvent d'obtenir un effet similaire à height.
  • width est sans effet, mais letter-spacing, éventuellement associé au padding, permet le plus souvent de produit l'effet recherché avec width.

Ressources