Dois-je utiliser une notation double ou simple pour les pseudo-éléments?
Étant donné qu'IE7 et IE8 ne prennent pas en charge la notation à deux points pour les pseudo-éléments (par exemple ::after ou ::first-letter), et puisque les navigateurs modernes prennent en charge la notation à deux points (par exemple :after) pour la compatibilité descendante, dois-je utiliser uniquement la notation à deux points et lorsque la part de marché d'IE8 chute à un niveau négligeable, revenir en arrière et trouver/remplacer dans ma base de code? Ou dois-je inclure les deux:
.foo:after,
.foo::after { /*styles*/ }
Utiliser le double seul semble idiot si je me soucie des utilisateurs d'IE8 (les pauvres chéris).
N'utilisez pas les deux combinés avec une virgule. Un agent utilisateur compatible CSS 2.1 (non compatible CSS3) ignorera toute la règle:
Lorsqu'un agent utilisateur ne peut pas analyser le sélecteur (c'est-à-dire qu'il n'est pas valide CSS 2.1), il doit également ignorer le sélecteur et le bloc de déclaration suivant (le cas échéant).
CSS 2.1 donne une signification particulière à la virgule (,) dans les sélecteurs. Cependant, comme on ne sait pas si la virgule peut acquérir d'autres significations dans les futures mises à jour de CSS, l'instruction entière doit être ignorée s'il y a une erreur n'importe où dans le sélecteur, même si le reste du sélecteur peut sembler raisonnable dans CSS 2.1.
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
Vous pouvez cependant utiliser
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
D'un autre côté, c'est plus verbeux que nécessaire; pour l'instant, vous pouvez vous en tenir à la notation un-deux-points.
De Sélecteurs CSS3 REC :
Cette notation :: est introduite par le document actuel afin d'établir une discrimination entre pseudo-classes et pseudo-éléments.
Pour la compatibilité avec les feuilles de style existantes,les agents utilisateurs doivent également accepter la notation précédente à un point-virgule pour les pseudo-éléments introduits dans les niveaux CSS 1 et 2(à savoir ,: première ligne,: première lettre,: avant et: après).
Cette compatibilitén'est pas autorisée pour les nouveaux pseudo-élémentsintroduits dans cette spécification.
Il semble que vous puissiez utiliser (uniquement) la notation un-deux-points pour les pseudo-éléments qui existaient déjà dans CSS2.1 car les UA doivent être rétrocompatibles.
Je suis absolument en désaccord avec @mddw et @FelipeAls, en ce qui concerne l'utilisation d'un seul côlon "sûre".
Cette mentalité "je vais l'utiliser même si elle est déconseillée" est exactement la raison pour laquelle les technologies basées sur les navigateurs sont si lentes à avancer et à progresser.
OUI, nous voulons maintenir la compatibilité avec les anciennes normes. Avouons-le, c'est la main qui nous a été distribuée. MAIS, cela ne signifie pas que vous avez une excuse pour être paresseux dans votre développement, en ignorant les normes actuelles en faveur de celles obsolètes.
Notre objectif devrait être de maintenir la conformité aux normes actuelles, tout en soutenant autant que possible la norme existante.
Si les pseudo-éléments utilisent : en CSS2 et :: en CSS3, nous ne devrions pas utiliser l'un ou l'autre; nous devrions utiliser les deux.
Pour répondre pleinement à la question initiale posée, voici la méthode la plus appropriée de prise en charge de l'implémentation la plus récente de CSS (version 3), tout en conservant la prise en charge héritée de la version 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
Cependant, il est devenu de plus en plus populaire d'utiliser polyfills pour les nouveaux javascript et CSS, vous pouvez donc simplement continuer à utiliser le nouveau double-point (::) et maintenez une polyfill pour les navigateurs plus anciens, tant que cela est nécessaire.
Pour ce que cela vaut selon les statistiques du navigateur IE 8.0 a chuté à moins de 1% aux États-Unis au cours de la dernière année.
En décembre 2015 IE 8.0 avait 2,92% du marché. En décembre 2016, IE 8.0 avait . 77% du marché.
À ce rythme de déclin, ce ne serait pas la pire idée d'arrêter de prendre en charge les anciennes versions de IE et de commencer à utiliser :: pour les pseudo-éléments.
L'inclusion des deux notations est certainement plus sûre, mais je ne vois aucun navigateur abandonner la notation unique pendant une longue période, donc une seule suffira (c'est CSS2 valide).
Personnellement, je n'utilise que la seule notation du côlon, principalement par habitude.