css - reglas - ¿Debo usar notación de dos puntos simple o doble para los pseudo-elementos?
notacion cientifica reglas (6)
Dado que IE7 e IE8 no admiten la notación de dos puntos para los pseudoelementos (por ejemplo, ::after o ::first-letter ), y dado que los navegadores modernos admiten la notación de un solo punto (por ejemplo, :after ) para la compatibilidad con versiones anteriores, Uso solo la notación de un solo punto y cuando la cuota de mercado de IE8 cae a un nivel insignificante, ¿volver atrás y buscar / reemplazar en mi base de códigos? O debería incluir ambos:
.foo:after,
.foo::after { /*styles*/ }
Usar doble solo parece tonto si me preocupo por los usuarios de IE8 (los pobres queridos).
Esta notación :: es introducida por el documento actual para establecer una discriminación entre pseudo-clases y pseudo-elementos.
Para la compatibilidad con las hojas de estilo existentes, los agentes de usuario también deben aceptar la notación anterior de un punto para pseudoelementos introducidos en los niveles CSS 1 y 2 (a saber,: primera línea,: primera letra,: antes y después).
Esta compatibilidad no está permitida para los nuevos pseudoelementos introducidos en esta especificación.
Parece que estás seguro usando (solo) la notación de un punto para los pseudo-elementos que ya existían en CSS2.1 ya que los UA deben ser compatibles con versiones anteriores.
Estoy totalmente en desacuerdo con @mddw y @FelipeAls, en lo que respecta a considerar el uso de un punto "seguro".
Esta mentalidad de "lo usaré aunque esté en desuso" es exactamente por qué las tecnologías basadas en navegador son tan lentas en avanzar y avanzar.
SÍ, queremos mantener la compatibilidad con los estándares anteriores. Reconozcámoslo, es la mano que nos han tratado. PERO, esto no significa que tenga una excusa para ser flojo en su desarrollo, ignorando los estándares actuales a favor de los desaprobados.
Nuestro objetivo debe ser mantener el cumplimiento de las normas actuales, al tiempo que apoyamos la mayor cantidad posible de estándares heredados.
Si los pseudo-elementos usan : en CSS2 y :: en CSS3, no deberíamos usar uno u otro; deberíamos usar ambos .
Para responder completamente a la pregunta original, el siguiente es el método más apropiado para admitir la implementación más reciente de CSS (versión 3), al tiempo que conserva la compatibilidad con versiones anteriores para la versión 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
Incluir ambas anotaciones es ciertamente más seguro, pero no puedo ver ningún navegador que omita la notación durante mucho tiempo, por lo que solo una va a estar bien (es un CSS2 válido).
Personalmente, solo uso la notación de dos puntos, principalmente por hábito.
No use ambos combinados con una coma. Un agente de usuario que cumpla con CSS 2.1 (no con capacidad CSS3) ignorará toda la regla:
Cuando un agente de usuario no puede analizar el selector (es decir, no es CSS válido 2.1), también debe ignorar el selector y el siguiente bloque de declaración (si corresponde).
CSS 2.1 le da un significado especial a la coma (,) en los selectores. Sin embargo, dado que no se sabe si la coma puede adquirir otros significados en futuras actualizaciones de CSS, toda la declaración se debe ignorar si hay un error en algún lugar del selector, aunque el resto del selector parezca razonable en CSS 2.1.
http://www.w3.org/TR/CSS2/syndata.html#rule-sets
Sin embargo, podrías usar
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
Por otro lado, esto es más detallado de lo necesario; por ahora, puedes seguir con la notación de un punto.
Por lo que vale según las estadísticas del navegador IE 8.0 ha caído a menos del 1% en los EE. UU. Durante el año pasado.
En diciembre de 2015, IE 8.0 tenía un 2.92% del mercado. En diciembre de 2016, IE 8.0 tenía un .77% del mercado.
A ese ritmo de disminución, no sería la peor idea dejar de soportar las versiones antiguas de IE y comenzar a usar :: for Pseudo Elements.
Sin embargo, cada vez es más popular usar polyfills para los nuevos javascript y CSS, por lo que puede que prefiera usar la sintaxis de dos puntos ( :: :) más reciente y mantener un polyfill para los navegadores más antiguos, siempre que sea necesario. .