css - nth - ¿Por qué no es posible combinar los pseudo-elementos/clases específicos del proveedor en un conjunto de reglas?
selector padre css (2)
CSS2.1 states :
El selector (ver también la sección de selectors ) consta de todo hasta (pero sin incluir) el primer corchete izquierdo ({). Un selector siempre va junto con un bloque de declaración. Cuando un agente de usuario no puede analizar el selector (es decir, no es CSS válido 2.1), también debe ignore el selector y el siguiente bloque de declaración (si corresponde).
Tenga en cuenta que dado que CSS2.1 es anterior a CSS3, "no es válido CSS 2.1" se escribe bajo la suposición de que un agente de usuario cumple totalmente con CSS2.1 y que CSS3 no existe en teoría. En la práctica, dondequiera que la especificación diga "no es CSS válido" o algo por el estilo, se debe entender que significa "no es entendido por el agente de usuario". Vea mi respuesta a esta pregunta relacionada para una explicación más detallada.
A saber, dado que el navegador de un proveedor no comprende los prefijos de otros proveedores, debe descartar cualquier regla que contenga esos prefijos no reconocidos en los selectores de pseudo-clase y pseudo-elemento. 1
Para obtener una idea de por qué se implementó dicha regla, vea esta respuesta .
1 Tenga en cuenta que WebKit es notorio por incumplir parcialmente esta regla: no tiene problemas para analizar las reglas cuyos selectores tienen pseudo-elementos prefijados no reconocidos (que en este caso es ::-moz-placeholder ). Dicho esto, la :-moz-placeholder en tu regla combinada hará que se rompa de todos modos.
En CSS, es posible personalizar el texto del placeholder dentro de una entrada usando una combinación de pseudo-clases específicas del proveedor y pseudo-elementos (para obtener la mejor cobertura entre navegadores).
Todos ellos comparten las mismas propiedades básicas (es decir, estilo de texto y declaraciones de color).
Sin embargo, aunque inevitablemente deseo aplicar los mismos estilos independientemente del proveedor del navegador, no parece posible combinarlos en un selector separado por comas (como lo haría con cualquier otra pieza de CSS donde desee compartir dos selectores). los mismos estilos).
Como ejemplo, tiendo a enfocar el estilo de marcador de posición usando los cuatro siguientes selectores:
-
input:-moz-placeholder -
input::-moz-placeholder -
input:-ms-input-placeholder -
input::-webkit-input-placeholder
(aunque :-moz-placeholder está en desuso en favor de ::-moz-placeholder esto solo ocurrió con el lanzamiento de FireFox 19 por lo que en la actualidad ambos son necesarios para una mejor compatibilidad con el navegador).
Lo que es frustrante es que declarar y dar cada estilo (el mismo) lleva a una gran cantidad de repeticiones dentro del CSS.
Entonces, para asegurarme de que el texto de marcador de posición esté alineado a la derecha y en cursiva, terminaría con:
input:-moz-placeholder{
font-style: italic;
text-align: right;
}
input::-moz-placeholder{
font-style: italic;
text-align: right;
}
input:-ms-input-placeholder{
font-style: italic;
text-align: right;
}
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
Lo que realmente quiero hacer es combinarlos como un solo conjunto de reglas separado por coma como este:
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
Sin embargo, a pesar de intentar esto en algunas ocasiones, esto nunca parece funcionar. Me preocupa que haya alguna parte fundamental de CSS que no entiendo.
¿Alguien puede arrojar algo de luz sobre por qué sucede esto?
Las especificaciones dicen que si un agente de usuario no reconoce parte de un selector, tiene que ignorar todo el selector y su bloque.
http://www.w3.org/TR/css3-syntax/#rule-sets
El selector (ver el módulo Selectores [SELECCIONAR]) consta de todo hasta (pero sin incluir) el primer corchete izquierdo ({). Un selector siempre va junto con un {} -bloque. Cuando un agente de usuario no puede analizar el selector (es decir, no es válido CSS3), también debe ignorar el {} -bloque.