Différence entre :before et ::before, les pseudos-éléments en CSS3

| Louis Lazaris | traduit par debray jerome |

Traducteur

ornitho13

Cet article est la traduction de : What's the Difference Between ":before" and "::before" ?.

Lorsque vous utilisez ou que vous faites une recherche sur les pseudo-éléments en CSS, vous pouvez constater différentes syntaxes pour les pseudo-éléments :before et :after, notamment en les voyant précédés de deux-points doublé (::), au lieu du traditionnel deux-points. Cela peut sembler un peu déroutant de prime abord mais il y a, en fait, une explication plutôt simple.

J'avais supposé qu'il y avait une différence de fonctionnement entre les deux types de syntaxe, mais ce n'est pas le cas comme le montre, ci dessous, l'explication courte et l'explication longue.

Commentez

- Titre : Différence entre :before et ::before, les pseudos-éléments en CSS3

- Auteurs : Louis Lazaris, traduit par debray jerome

- Traducteur : ornitho13

- Parution : 1 mars 2011

- Licence : Copyright ® 2011 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. L'explication courte

- II. L'explication longue

- III. Un peu trop tard ?

- IV. Remerciements

I - L'explication courte

En dehors de la compatibilité du navigateur, il n'y a aucune différence entre :before et ::before, ni entre :after et ::after.

II - L'explication longue

La syntaxe deux-points simples (c'est à dire ":before" ou ":after") est la syntaxe utilisée à la fois pour les pseudo-sélecteurs et les pseudo-classes dans toutes les versions CSS avant la version CSS3. Avec l'introduction du CSS3, dans le but de faire une différenciation entre les pseudo-classes et les pseudo-éléments (oui, il y en a une), tous les pseudo-éléments doivent utiliser la syntaxe deux-points doublé ("::") et toutes les pseudo-classes doivent utiliser la syntaxe de deux-points simples (":").

La spécification dit ceci :

La notation de deux-points doublé est introduite ... dans le but d'établir une discrimination entre les pseudo-éléments et les pseudo-classes. Pour maintenir une compatibilité avec les styles existants, les navigateurs devront également accepter la précédente syntaxe de simple deux-points pour les pseudo-éléments introduits dans CSS niveaux 1 et 2 (nommément, :first-line, :first-letter, :before and :after). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits en CSS niveau 3.

III - Un peu trop tard ?

Alors que je suis ravi par les améliorations bénéfiques apportées par la spécification, il me semble malgré tout que ce changement vient trop tard. Il y a des centaines de millions de pages internet dans la nature qui utilisent la syntaxe de deux-points simples pour les pseudo-éléments.

Comme annoncé dans l'extrait de la spécification, tous les navigateurs modernes doivent supporter l'ancienne syntaxe et cela pour l'éternité. Par exemple, si, dans dix ans, Firefox atteint une version 7, ils devront toujours supporter la syntaxe de simple deux-points afin d'éviter de "casser le web".

Alors pourquoi le faire ? Il semble que ce soit un peu trop tard. Oui les sites modernes (les plus récents) auront la nouvelle syntaxe, mais seulement si les développeurs sont au fait de ces changements - ce qui sera le cas pour seulement un faible pourcentage de développeurs.

Je suppose que cela servira à aider à différencier les deux types de sélecteurs pour faciliter la maintenance des feuilles de style.

IV - Remerciements

Un grand merci à Bovino pour sa relecture attentive et ses conseils.
Merci à Louis Lazaris pour ce tutoriel.