Dois-je utiliser la notation simple ou double deux points pour les pseudo-éléments?

108

Puisque IE7 et IE8 ne prennent pas en charge la notation double-virgule pour les pseudo-éléments (par exemple ::afterou ::first-letter), et puisque les navigateurs modernes prennent en charge la notation simple-deux-points (par exemple :after) pour la compatibilité descendante, devrais-je utiliser uniquement la notation simple-deux-points et La part de marché d'IE8 chute à un niveau négligeable revenir en arrière et trouver / remplacer dans ma base de code? Ou devrais-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).

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element jinglesthula
la source

Réponses:

71

N'utilisez pas les deux combinés avec une virgule. Un agent utilisateur conforme 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 que ce n'est pas du CSS 2.1 valide), 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 pourriez 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.

user123444555621
la source
7
merci d'avoir inclus les informations sur la virgule et l'ignorer. Cela m'aurait probablement fait (et peut-être d'autres) me gratter la tête pendant un moment. Il semble que la meilleure chose à faire lorsque 99% des navigateurs en cours d'utilisation prennent en charge la notation double-virgule est de passer à l'utilisation de celle-ci et (car personne ne supprimera la prise en charge des deux points simples et cassera le Web, donc il n'y a même pas vraiment de point dans la recherche ultérieure / remplacer l'ancien code à ce stade).
jinglesthula
2
Ce n'est pas la voie à suivre. La progression du navigateur sera accélérée de force si les gens cessent de se plier aux navigateurs antédiluviens, cassés et obsolètes.
Gershom
2
@Gershom Maes: Ce n'est malheureusement pas à vous de le dire. Je pense qu'une grande partie des développeurs espèrent la même chose, mais cela n'arrivera tout simplement pas.
BoltClock
@Gershom Maes on peut rêver
James Cushing
1
Je pense qu'il est important de noter que le maintien des styles en double peut être problématique. Comme le note cHao ci-dessous, le code dupliqué aime diverger. La plupart des développeurs doivent probablement être mordus par cela plusieurs fois pour le jurer :)
jinglesthula
62

À partir des sélecteurs CSS3 REC :

Cette :: notation est introduite par le document courant 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 deux-points 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éments introduits dans cette spécification.

Il semble que vous soyez en sécurité en utilisant (seulement) la notation à un deux points pour les pseudo-éléments qui existaient déjà dans CSS2.1 car les UA doivent être rétrocompatibles.

FelipeAls
la source
1
Pour mémoire, cette réponse pourrait également être marquée comme correcte. Il fournit une perspective précieuse, même si l'impulsion de la question initiale était spécifiquement les pseudo-éléments avant et après. Merci de l'ajouter.
jinglesthula
Comment êtes-vous arriver à cette conclusion? Je suis arrivé à la conclusion opposée ... si les simples deux-points ne sont pas autorisés pour les nouveaux pseudo-éléments, ne devriez-vous pas commencer à utiliser des doubles-points pour prendre l'habitude?
andrewtweber
@andrewtweber dans le contexte de la question originale (IE8) en utilisant double casserait le CSS. Cela dit, au moment de la rédaction de cet article, la plupart des sites voient probablement l'utilisation d'IE8 à un niveau si bas qu'il en autorise le double sans retombées significatives. On peut compter sur les fournisseurs de navigateurs pour prendre en charge la notation unique à perpétuité, mais rien de mal à changer les habitudes de codage à ce stade.
jinglesthula
@andrewtweber +1 pour OP Oui, IE8 devait être pris en compte en 2012 et - YMMV - l'est toujours en 2015 dans de grands projets B2B et pareil mais pas dans d'autres projets web. Les deux notations sont parfaitement valables pour ces pseudos existants. La minification CSS gagnera 1 octet en utilisant la notation à un deux-points. Si vous voulez toujours utiliser une notation et interdire l'autre, eh bien c'est une convention que vous êtes entièrement libre de le faire avec votre équipe mais ce n'est pas une recommandation.
FelipeAls
@jinglesthula et Felipe, vous avez raison, je n'ai pas remarqué la date. Peut-être que la réponse devrait être mise à jour, car cette question
figure
22

Je ne suis absolument pas d'accord avec @mddw et @FelipeAls, en ce qui concerne l'utilisation d'un deux-points "sûr".

Cette mentalité «je vais l'utiliser même si c'est obsolète» 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. Regardons les choses en face, c'est la main qui nous a été donnée. MAIS, cela ne signifie pas que vous avez une excuse pour être paresseux dans votre développement, en ignorant les normes actuelles au profit de celles obsolètes.

Notre objectif devrait être de maintenir la conformité avec les normes actuelles, tout en prenant en charge autant que possible l'ancienne norme.

Si des pseudo-éléments sont utilisés :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, ce qui suit est le plus approprié méthode pour prendre en charge l'implémentation la plus récente de CSS (version 3), tout en conservant le support hérité de la version 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
la source
3
Je pense qu'il est assez sûr de supposer que les fournisseurs de navigateurs continueront à prendre en charge l'ancienne notation indéfiniment en raison de la quantité de code qui ne sera jamais mis à jour de manière réaliste et qu'ils veulent que leur navigateur s'affiche `` correctement ''. D'un autre côté, conserver des copies séparées des styles soulève le drapeau rouge DRY, je pense. Je pense qu'il est plus pragmatique que paresseux d'utiliser la notation à deux points jusqu'à ce que la part de marché d'IE7 diminue. Cela dit, je veux que le web avance autant que quiconque!
jinglesthula
9
Si vous «êtes absolument en désaccord » avec ma réponse, alors vous n'êtes absolument pas d'accord avec le mot « must» dans une recommandation du W3C. " Notre objectif devrait être de maintenir la conformité avec les normes actuelles, tout en prenant en charge autant que possible la norme héritée. " C'est ce qui est abordé par cette partie de la CER et il stipule explicitement que les UA ne doivent pas forcer les auteurs à utiliser les deux notations et explique comment cela doit être fait par ces UA. N'hésitez pas à contacter la liste de diffusion CSS WG si cela ne vous convient pas (ou sur Twitter @glazou co-président de ce groupe de travail)
FelipeAls
4
Je ne suis pas en désaccord avec votre réponse entière, seulement en ce qui concerne l'utilisation d'un seul deux-points comme «sûr». la compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments, ce qui signifie que les futurs pseudo-éléments ne seront implémentés que dans ::. Selon votre approche, les individus commenceront alors à mélanger et assortir l'utilisation de :et ::pour les pseudo-éléments. Adhérer explicitement à l'ancienne norme (qui pour le moment peut être soutenue) est une pratique intrinsèquement mauvaise et devrait être évitée chaque fois que cela est raisonnablement possible. Si vous n'êtes pas d'accord avec cette affirmation, nous avons simplement des points de vue différents.
Joshua Burns
4
Adhérer à une norme explicitement compatible n'est pas en soi une mauvaise pratique, si la compatibilité est un objectif. D'un autre côté, l'utilisation des deux conduit à des styles dupliqués - et comme le sait quiconque a codé pendant un certain temps, le code dupliqué adore diverger.
cHao
8
@JoshuaBurns Si mon prédécesseur avait dupliqué une charge de code pour se protéger contre une future menace imaginaire, je me sentirais beaucoup plus «foutu».
Mark Amery
2

Cependant, il est de plus en plus populaire d'utiliser des polyfills pour les nouveaux javascript et CSS, donc vous voudrez peut-être simplement vous en tenir à l'utilisation de la nouvelle ::syntaxe double-virgule ( ), et maintenir un polyfill pour les navigateurs plus anciens, tant que cela est nécessaire.

zpr
la source
Ceci est essentiellement juste une méta-réponse; il ne fournit aucune information utile. Si une réponse est obsolète, évaluez-la et / ou commentez-la en l'indiquant.
TylerH
2
pourquoi ne pas également lier un tel polyfill, afin que nous puissions l'utiliser sans plus chercher sur Google?
MightyPork
4
eh, la première partie peut être méta, mais je pense que la deuxième partie est une bonne réponse. Là où je travaille, nous n'utilisons pas de préprocesseur et / ou de polyfills, donc la réponse acceptée fonctionne pour moi. Mais pour tout magasin ou développeur qui utilise de tels outils, cette réponse est probablement plus utile.
jinglesthula
1

Pour ce que ça vaut selon les statistiques du navigateur, IE 8.0 est tombé à moins de 1% aux États-Unis au cours de l'année écoulée.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

En décembre 2015, IE 8.0 détenait 2,92% du marché. En décembre 2016, IE 8.0 détenait 0,77% du marché.

À ce taux de déclin, ce ne serait pas la pire des idées d'arrêter de supporter les anciennes versions d'IE et de commencer à utiliser :: pour les pseudo éléments.

DR01D
la source
Ce qui est quelque chose à célébrer :) Il convient également de souligner que cela dépend toujours de la situation. Si vous êtes Amazon, 0,5% de vos utilisateurs équivaut à plus d'un million de clients qui pensent que votre site est cassé. Si vous créez un blog pour une startup de 10 personnes, les enjeux peuvent être différents.
jinglesthula
Certainement vrai pour une organisation comme Amazon. Mais ce 0,77% n'est pas réparti uniformément sur l'ensemble de la population. Ce sont des personnes disproportionnellement âgées ou des personnes avec peu d'argent qui ne peuvent pas se mettre à niveau. D'un point de vue purement commercial, ce ne sont probablement pas des marchés cibles idéaux. Donc, pour la plupart des entreprises, le groupe de 0,77% est encore moins important que ce que ce petit nombre suggère. Et ce nombre ne fera que diminuer.
DR01D
Bons points. Un autre groupe où la mise à niveau est une bataille ardue est le gouvernement et les groupes commerciaux dépendent fortement des applications qui ne fonctionneront qu'avec une certaine version du navigateur (bien que, heureusement, les groupes qui sont de cette façon diminuent également avec le temps).
Qu'aucun
0

Inclure les deux notations est certainement plus sûr, mais je ne vois aucun navigateur abandonner la notation unique pendant longtemps, donc une seule suffira (c'est du CSS2 valide.)

Personnellement, je n'utilise que la notation à deux points, principalement par habitude.

mddw
la source
1
Comme les autres réponses le montrent clairement, c'est un peu plus compliqué que cela et il y a des pièges non évidents (par exemple, prendre en charge la notation à un seul deux-points pour les pseudo-éléments CSS 3 est une violation explicite des spécifications, il semble donc sage pour les auteurs CSS de ne pas pour utiliser la notation à deux points pour ces sélecteurs).
Mark Amery