¿Debo usar la notación de dos puntos simples o dobles para los pseudoelementos?

108

Dado que IE7 e IE8 no admiten la notación de dos puntos para pseudoelementos (por ejemplo, ::aftero ::first-letter), y dado que los navegadores modernos admiten la notación de dos puntos (por ejemplo :after) para compatibilidad con versiones anteriores, ¿debería usar únicamente la notación de dos puntos y cuándo La cuota de mercado de IE8 cae a un nivel insignificante. ¿Volver y buscar / reemplazar en mi código base? O debería incluir ambos:

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

Usar doble solo parece una tontería si me preocupan los usuarios de IE8 (los pobres queridos).

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element jinglesthula
fuente

Respuestas:

71

No , no usar tanto en combinación 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 CSS 2.1 válido), debe ignorar el selector y el siguiente bloque de declaración (si lo hay) también.

CSS 2.1 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 debe ignorarse 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ías 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.

usuario123444555621
fuente
7
gracias por incluir la información sobre la coma y el ignorar. Eso probablemente me habría hecho (y tal vez a otros) rascándome la cabeza por un tiempo. Parece que lo mejor cuando el 99% de los navegadores en uso admiten la notación de dos puntos es cambiar para usar eso y (porque nadie dejará de admitir dos puntos únicos y romperá la web, por lo que en realidad no hay ni un punto en buscar / reemplazando el código antiguo en ese punto).
jinglesthula
2
Este no es el camino a seguir. El progreso del navegador se acelerará a la fuerza si la gente deja de complacer a los navegadores antediluvianos, rotos y obsoletos.
Gershom
2
@Gershom Maes: Desafortunadamente, eso no es para que lo digas. Creo que una gran parte de los desarrolladores esperan lo mismo, pero simplemente no va a suceder.
BoltClock
@Gershom Maes podemos soñar
James Cushing
1
Creo que es importante tener en cuenta que mantener estilos duplicados puede ser problemático. Como señala cHao a continuación, al código duplicado le encanta divergir. La mayoría de los desarrolladores probablemente tengan que ser mordidos por él unas cuantas veces para
renunciar
62

Desde CSS3 Selectors REC :

Esta :: notación es introducida por el documento actual para establecer una discriminación entre pseudo-clases y pseudo-elementos.
Para compatibilidad con las hojas de estilo existentes, los agentes de usuario también deben aceptar la notación anterior de dos puntos para los pseudoelementos 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 los nuevos pseudoelementos introducidos en esta especificación.

Parece que está seguro al usar (solo) la notación de dos puntos para pseudoelementos que ya existían en CSS2.1, ya que los AU deben ser compatibles con versiones anteriores.

FelipeAls
fuente
1
Para el registro, esta respuesta también podría marcarse como correcta. Proporciona una perspectiva valiosa, a pesar de que el ímpetu de la pregunta original fue específicamente el antes y el después de los pseudoelementos. Gracias por agregarlo.
jinglesthula
¿Cómo llegaste a esa conclusión? Llegué a la conclusión opuesta ... si no se permiten dos puntos simples para nuevos pseudoelementos, ¿no debería comenzar a usar dos puntos dobles para adquirir el hábito?
andrewtweber
@andrewtweber en el contexto de la pregunta original (IE8) usar double rompería el CSS. Dicho esto, en el momento de escribir estas líneas, la mayoría de los sitios probablemente vean el uso de IE8 en un nivel tan bajo como para permitir el doble sin consecuencias significativas. Se puede confiar en que los proveedores de navegadores admitirán la notación única a perpetuidad, pero no hay nada de malo en cambiar los hábitos de codificación en este momento.
jinglesthula
@andrewtweber +1 para OP Sí, IE8 debía tenerse en cuenta en 2012 y, YMMV, todavía está en 2015 en grandes proyectos B2B y similares, pero no en otros proyectos web. Ambas notaciones son perfectamente válidas para estos pseudos existentes. La minificación de CSS ganará 1 byte mediante el uso de la notación de dos puntos. Si quieres usar siempre una notación y prohibir la otra, bueno, eso es una convención, eres completamente libre de hacerlo con tu equipo, pero no es una recomendación.
FelipeAls
@jinglesthula y Felipe, tienes razón, no me di cuenta de la fecha. Sin embargo, tal vez la respuesta deba actualizarse, ya que esta pregunta aparece en los
primeros lugares de
22

No estoy absolutamente de acuerdo con @mddw y @FelipeAls, en lo que respecta a considerar el uso de dos puntos como "seguro".

Esta mentalidad de "lo usaré aunque esté en desuso" es exactamente la razón por la que las tecnologías basadas en navegadores son tan lentas para avanzar y progresar.

SÍ, queremos mantener la compatibilidad con los estándares antiguos. Seamos realistas, es la mano que nos han repartido. PERO, esto no significa que tenga una excusa para ser vago en su desarrollo, ignorando los estándares actuales a favor de los obsoletos.

Nuestro objetivo debe ser mantener el cumplimiento de los estándares actuales, al mismo tiempo que se admite la mayor parte posible del estándar heredado.

Si se usan pseudo-elementos :en CSS2 y ::en CSS3, no deberíamos usar uno u otro; deberíamos usar ambos .

Para responder completamente a la pregunta original formulada, el siguiente es el método más apropiado para respaldar la implementación más actual de CSS (versión 3), mientras se conserva el soporte heredado para la versión 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
fuente
3
Creo que es bastante seguro asumir que los proveedores de navegadores continuarán admitiendo la notación anterior de forma indefinida debido a la cantidad de código que, de manera realista, nunca se actualizará y que quieren que su navegador se muestre 'correctamente'. Por otro lado, creo que mantener copias separadas de los estilos levanta la bandera roja DRY. Creo que es más pragmático que perezoso utilizar la notación de dos puntos hasta que la cuota de mercado de IE7 caiga. Dicho esto, ¡quiero que la web avance tanto como cualquiera!
jinglesthula
9
Si " no está absolutamente de acuerdo " con mi respuesta, entonces está absolutamente en desacuerdo con la palabra debe en una RECOMENDACIÓN del W3C. " Nuestro objetivo debe ser mantener el cumplimiento de los estándares actuales, mientras se respalda la mayor cantidad posible del estándar heredado " . Es lo que se aborda en esta parte del REC y establece explícitamente que los AU no deben obligar a los autores a usar ambas notaciones. y explica cómo deben hacerlo estas AU. No dude en ponerse en contacto con la lista de correo del CSS WG si no está de acuerdo con eso (o en Twitter @glazou copresidente de este grupo de trabajo)
FelipeAls
4
No estoy en desacuerdo con su respuesta completa, solo con respecto al uso de dos puntos como "seguro". La compatibilidad no está permitida para los nuevos pseudo-elementos, lo que significa que los pseudo-elementos futuros solo se implementarán en ::. De acuerdo con su enfoque, los individuos comenzarán a mezclar y combinar el uso de :y ::para pseudo-elementos. Adherirse explícitamente al estándar antiguo (que por el momento puede ser compatible) es una práctica inherentemente mala y debe evitarse siempre que sea razonablemente posible. Si no está de acuerdo con esa afirmación, simplemente tenemos diferentes puntos de vista.
Joshua Burns
4
Adherirse a un estándar explícitamente compatible no es intrínsecamente una mala práctica, si la compatibilidad es un objetivo. Por otro lado, el uso de ambos conduce a estilos duplicados y, como sabe cualquiera que haya estado codificado por un tiempo, al código duplicado le encanta divergir.
cHao
8
@JoshuaBurns Si mi predecesor hubiera duplicado una carga de código para protegerse contra una amenaza futura imaginaria, me sentiría significativamente más "jodido".
Mark Amery
2

Sin embargo, se ha vuelto cada vez más popular usar polyfills tanto para el nuevo javascript como para CSS, por lo que es posible que desee seguir usando la ::sintaxis más reciente de dos puntos ( ) y mantener un polyfill para navegadores más antiguos, siempre que sea necesario.

zpr
fuente
Esto es esencialmente una meta respuesta; no proporciona ninguna información útil. Si una respuesta está desactualizada, vote por ella y / o coméntela indicándolo.
TylerH
2
¿Por qué no vincular también un polyfill de este tipo, para que podamos usarlo sin tener que buscar en Google?
MightyPork
4
eh, la primera parte puede ser meta, pero creo que la segunda parte es una buena respuesta. Donde trabajo, no usamos un preprocesador y / o polyfills, por lo que la respuesta aceptada funciona para mí. Pero para cualquier tienda o desarrollador que use tales herramientas, esta respuesta probablemente sea más útil.
jinglesthula
1

Por lo que vale, según Browser Stats, IE 8.0 se ha reducido a menos del 1% en los EE. UU. Durante el año pasado.

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

En diciembre de 2015, IE 8.0 tenía el 2,92% del mercado. En diciembre de 2016 IE 8.0 tenía .77% del mercado.

A ese ritmo de disminución, no sería la peor idea dejar de admitir versiones antiguas de IE y comenzar a usar :: para Pseudo Elementos.

DR01D
fuente
Lo cual es algo para celebrar :) También vale la pena señalar que todavía depende de la situación. Si es Amazon, el 0,5% de sus usuarios equivale a más de un millón de clientes que piensan que su sitio no funciona. Si está haciendo un blog para una startup de 10 personas, lo que está en juego puede ser diferente.
jinglesthula
Definitivamente cierto sobre una organización como Amazon. Pero ese .77% no se distribuye de manera uniforme en toda la población. Son desproporcionadamente personas mayores o personas con poco dinero que no pueden actualizarse. Desde un punto de vista puramente comercial, probablemente esos no sean mercados objetivo ideales. Entonces, para la mayoría de las empresas, el grupo del 77% es incluso menos significativo de lo que sugiere ese pequeño número. Y ese número solo se hará más pequeño.
DR01D
Buenos puntos. Otro grupo donde la actualización es una batalla cuesta arriba es el gobierno y los grupos empresariales dependen en gran medida de aplicaciones que solo funcionarán con una determinada versión del navegador (aunque afortunadamente los grupos que lo son también disminuirán con el tiempo). Que ninguno de ustedes tenga que codificar para un cliente así :)
jinglesthula
0

Incluir ambas notaciones es ciertamente más seguro, pero no puedo ver que ningún navegador descarte la notación única durante mucho tiempo, por lo que solo una sola estará bien (es CSS2 válido).

Personalmente, solo uso la notación de dos puntos, principalmente por hábito.

mddw
fuente
1
Como dejan en claro las otras respuestas, es un poco más complicado que esto y hay algunas trampas no obvias (por ejemplo, admitir la notación de dos puntos únicos para pseudoelementos de CSS 3 es una violación explícita de las especificaciones, por lo que parece prudente que los autores de CSS no para usar la notación de dos puntos únicos para esos selectores).
Mark Amery