Dois-je utiliser seul ou à deux points de la notation pour les pseudo-éléments css

Question

Depuis IE7 et IE8 ne prennent pas en charge le double deux-points de la notation pour les pseudo-éléments (par exemple, ::after ou ::first-letter), et depuis les navigateurs modernes soutenir l'-virgule notation (par exemple, :after) pour la compatibilité ascendante, dois-je utiliser uniquement le seul colon notation et quand IE8 de la part de marché tombe à un niveau négligeable revenir en arrière et trouver/remplacer dans mon code de base? Ou dois-je inclure à la fois:

.foo:after,
.foo::after { /*styles*/ }

En utilisant le double seul semble idiot si je me soucie de IE8 utilisateurs (les pauvres chéris).

Answer 1

Ne pas utiliser à la fois combiné avec une virgule. CSS 2.1 conforme (pas de CSS3 capable) de l'agent utilisateur ignore la règle d'ensemble:

Lorsqu'un agent utilisateur ne peut pas analyser le sélecteur (c'est à dire, il n'est pas valide CSS 2.1), il doit ignorer le sélecteur et de la déclaration suivante du bloc (le cas échéant).

CSS 2.1 donne une signification particulière à la virgule (,) dans les sélecteurs. Cependant, puisqu'on ne sait pas si la virgule peuvent acquérir d'autres significations dans les futures mises à jour de CSS, de l'intégralité de la déclaration doit être ignorée si il y a une erreur, n'importe où dans le sélecteur, même si le reste de la sélection peut paraître raisonnable dans CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

Vous pouvez, toutefois, utiliser

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

D'autre part, c'est totalement inutile. Il suffit de coller l'un à deux points de la notation.

Answer 2

De Sélecteurs CSS3 REC:

Ce :: la notation est présenté par le document en cours afin d'établir une discrimination entre les pseudo-classes et pseudo-éléments.
Pour la compatibilité avec les feuilles de style, les agents utilisateurs doivent également accepter la précédente-virgule notation pour les pseudo-éléments introduits dans le CSS niveaux 1 et 2 (à savoir :la première ligne de, :first-letter, :before et :after).
Cette compatibilité n'est pas autorisé pour le nouveau pseudo-éléments introduits dans la présente spécification.

Il semble que vous êtes en sécurité à l'aide de (seulement) un à deux points de la notation pour les pseudo-éléments qui existaient déjà dans CSS2.1 comme le Samu doit être compatible.

Answer 3

J'ai absolument pas d'accord avec @mddw et @FelipeAls, en ce qui concerne la question de l'utilisation de l'un colon "safe".

Ce "je vais l'utiliser même si c'est obsolète" mentalité est exactement pourquoi navigateur basé sur les technologies de la lenteur dans l'avancement et la progression de l'avant.

OUI, nous voulons maintenir la compatibilité avec les anciennes normes. Avouons-le, c'est la main que nous avons été traités. MAIS, cela ne signifie pas que vous avez une excuse à la paresse dans votre développement, en ignorant les normes actuelles en faveur de l'obsolète.

Objectif doit être de maintenir la conformité avec les normes actuelles, tout en soutenant qu'une grande partie de l'héritage standard que possible.

Si les pseudo-éléments, utiliser : en CSS2 et :: en CSS3, nous ne devrions pas utiliser l'un ou l'autre, nous devrions être en utilisant à la fois.

Pour répondre pleinement à la question initiale posée, la suivante est la plus appropriée méthode de soutien le plus courant de la mise en œuvre de CSS (version 3), tout en conservant l'héritage de soutien pour la version 2.

.foo::after {
  /* styles */
}
.foo:after {
  /* same styles as above. */
}

Answer 4

Y compris les deux notations, est certainement plus sûr, mais je ne peux pas voir n'importe quel navigateur abandon de la seule notation pour une longue période, de sorte que seulement un seul serez bien (c'est valable CSS2.)

Personnellement, je n'utilise que le seul colon notation, surtout par habitude.