¿Debo usar un solo punto y coma (:) o dos puntos dobles (:) para antes, después, primera letra y pseudo-elementos de primera línea?

De MDN:

La notación :: se introdujo en CSS 3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación : presentada en CSS 2.

Si la notación : siempre será aceptada por los navegadores CSS3, ¿debería usarla porque funciona en navegadores antiguos y nuevos?

¿O debería usar ambos, para los navegadores antiguos y para los nuevos, porque la notación : no siempre será aceptada?


Nota : Creo que mi pregunta no es un duplicado. No es un duplicado. ¿Debo usar la notación de dos puntos simple o doble para los pseudo-elementos? porque la otra pregunta pregunta acerca de la notación simple versus doble para TODOS los pseudo-elementos; mientras que mi pregunta es solo sobre pseudo-elementos definidos en CSS2, no los nuevos definidos en CSS3, porque ya sé que con esos debo usar :: .

Por lo que vale, Selectores 4 ahora instruye explícitamente a 1 autores para que usen dobles puntos para todos los pseudoelementos, incluidos los pseudoelementos CSS1 y CSS2 , en adelante (énfasis mío):

Debido a que CSS Level 1 y CSS Level 2 combinaron pseudo-elementos y pseudo-clases al compartir una syntax de un solo punto para ambos, los agentes de usuario también deben aceptar la notación anterior de un punto para los pseudo-elementos de Nivel 1 y 2 ( ::before , ::after , ::first-line , y ::first-letter ). Esta notación de compatibilidad no está permitida en ningún otro pseudo-elemento. Sin embargo, como esta syntax está en desuso, los autores deben usar la syntax de doble punto de Nivel 3+ para estos pseudo-elementos.

Esto significa que el único uso apropiado de la syntax de un solo punto hoy en día es si necesita absolutamente compatibilidad con el navegador heredado: el único navegador que importa aquí es IE8 y una versión anterior. Si no lo hace, debe usar la syntax de dos puntos por coherencia con los pseudoelementos más nuevos que solo aceptarán dos puntos dobles. Además, no tiene sentido utilizar la syntax de un solo punto si, por ejemplo, vas a aplicar propiedades que no son compatibles con IE8 de todos modos , como border-radius o box-shadow , a tus ::before y ::after pseudo-elementos.

Me gustaría creer que Selectores 3 como mínimo implicaba esto en su afirmación de que la syntax de un solo punto no se aplica a ningún pseudo-elemento más nuevo, pero tener este tipo de cosas en blanco y negro nunca hace daño a nadie y es bueno saber que el próximo estándar hace justamente eso.

Además, no hay absolutamente ninguna razón para escribir reglas duplicadas con ambas anotaciones en la misma hoja de estilo (por ejemplo :before, :after { ... } ::before, ::after { ... } ), ya que ningún navegador en existencia admite la nueva syntax sin soportar la anterior.


1 Digo esto con plena conciencia de que probablemente aún no se haya expresado en el momento en que se formuló esta pregunta: el WD de mayo de 2013 ciertamente no lo hizo.

Como mencioné anteriormente en este comentario, http://css-tricks.com/html5-progress-element/#comment-533395

Respuesta corta – Use una sola notación de dos puntos :

Respuesta larga : no hay diferencia real entre :before y ::before , o entre :after y ::after . Pero como los navegadores más antiguos usan una sola notación de dos puntos, entonces usar : siempre es una apuesta más segura. Lea esta especificación definida por W3C en pseudoelementos que establece que,

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 CSS nivel 3.

Me gustaría ir por el single: la gente hoy en día debería tener al menos algunos de los últimos navegadores instalados, por lo que no tiene nada de qué preocuparse.