¿Debo usar la notación de dos puntos o uno para pseudo-elementos?
Dado que IE7 e IE8 no admiten la notación de dos puntos para pseudo-elementos (por ejemplo, ::after o ::first-letter), y dado que los navegadores modernos admiten la notación de dos puntos (por ejemplo, :after) para la compatibilidad hacia atrás, ¿debo usar únicamente la notación de dos puntos y cuando la cuota de mercado de IE8 cae a un nivel insignificante, regresar y buscar/reemplazar en mi base de código? O debería incluir ambos:
.foo:after,
.foo::after { /*styles*/ }
Usar doble solo parece tonto si me importan los usuarios de IE8 (los pobres queridos).
6 answers
Do not use ambos combinados con una coma. Un agente de usuario compatible con CSS 2.1 (no compatible con CSS3) ignorará toda la regla:
Cuando un agente de usuario no puede analizar el selector (es decir, no es válido CSS 2.1), debe ignorar el selector y el siguiente bloque de declaración (si lo hay) también.
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, el todo la instrucción debe ser ignorada si hay un error en cualquier parte del selector, aunque el resto del selector puede parecer razonable en CSS 2.1.
Http://www.w3.org/TR/CSS2/syndata.html#rule-sets
Sin embargo, podría usar
.foo:after { /*styles*/ }
.foo::after { /*styles*/ }
Por otro lado, esto es más detallado de lo necesario; por ahora, puede seguir con la notación de dos puntos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-11 13:43:53
De Selectores CSS3 REC :
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 los pseudo-elementos introducidos en los niveles 1 y 2 de CSS (a saber :primera línea,: primera letra,: antes y :después).
Esta compatibilidad no está permitida para el nuevo pseudo-elementos introducidos en esta especificación.
Parece que está seguro de usar (solo) la notación de un punto para pseudo-elementos que ya existían en CSS2.1, ya que los UAs deben ser compatibles con versiones anteriores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-16 21:17:48
Estoy absolutamente en desacuerdo con @mddw y @FelipeAls, en lo que respecta a considerar el uso de un colon "seguro".
Esta mentalidad de "lo usaré a pesar de que está en desuso" es exactamente por qué las tecnologías basadas en navegadores son tan lentas en avanzar y avanzar.
SÍ, queremos mantener la compatibilidad con estándares antiguos. Seamos realistas, es la mano que nos han repartido. PERO, esto no significa que tenga una excusa para ser perezoso en su desarrollo, ignorando los estándares actuales en a favor de los obsoletos.
Nuestro objetivo debe ser mantener el cumplimiento con los estándares actuales, al tiempo que soporta la mayor cantidad posible de los 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 apoyar la implementación más actual de CSS (versión 3), mientras que mantenimiento del soporte heredado para la versión 2.
.foo:after {
/* styles */
}
.foo::after {
/* same styles as above. */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-06 22:30:22
Sin embargo, se ha vuelto cada vez más popular usar polyfills tanto para javascript como para CSS nuevos, por lo que es posible que desee seguir usando la nueva sintaxis de dos puntos (::), y mantener un polyfill para navegadores más antiguos, siempre y cuando sea necesario.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-23 13:58:40
Por lo que vale la pena según las estadísticas del navegador IE 8.0 ha caído a menos de 1% en los EE.UU. en el último año.
En diciembre 2015 IE 8.0 había 2.92% del mercado. En diciembre 2016 IE 8.0 tenía .77% del mercado.
A ese ritmo de declive no sería la peor idea dejar de soportar versiones antiguas de IE y empezar a usar:: for Pseudo Elementos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-26 16:12:44
Incluir ambas notaciones es ciertamente más seguro, pero no puedo ver a ningún navegador dejando caer la notación única durante mucho tiempo, por lo que solo una sola estará bien (es válida CSS2.)
Personalmente solo uso la notación de dos puntos, principalmente por hábito.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-16 21:08:16