¿Por qué no es posible combinar pseudoelementos/clases específicas del proveedor en un conjunto de reglas?
En CSS es posible aplicar estilo al placeholdertexto dentro de una entrada utilizando una combinación de pseudoclases y pseudoelementos específicos del proveedor (para obtener la mejor cobertura en todos los navegadores).
Todos ellos comparten las mismas propiedades básicas (es decir, estilo de texto y declaraciones de color).
Sin embargo, aunque inevitablemente quiero 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 en la que desee compartir dos selectores). los mismos estilos).
Como ejemplo, tiendo a apuntar al estilo de marcador de posición utilizando los cuatro selectores siguientes:
input:-moz-placeholderinput::-moz-placeholderinput:-ms-input-placeholderinput::-webkit-input-placeholder
(aunque :-moz-placeholder está en desuso porque ::-moz-placeholderesto solo ocurrió con el lanzamiento de FireFox 19, por lo que actualmente ambos son necesarios para una mejor compatibilidad con el navegador).
Lo frustrante es que declarar y dar a cada (el mismo) estilo genera mucha repetición dentro del CSS.
Entonces, para asegurarme de que el texto del 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 único conjunto de reglas separadas por comas 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 varias ocasiones, parece que nunca funciona. Me preocupa que haya alguna parte fundamental de CSS que no entiendo.
¿Alguien puede arrojar alguna luz sobre por qué sucede esto?
CSS2.1 estados :
El selector (consulte también la sección sobre selectores ) consta de todo hasta (pero sin incluir) la primera llave izquierda ({). 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 2.1 válido), también debe ignorar el selector y el siguiente bloque de declaración (si lo hay).
Tenga en cuenta que, dado que CSS2.1 es anterior a CSS3, "no es CSS 2.1 válido" se escribe bajo el supuesto de que un agente de usuario es totalmente compatible con CSS2.1 y que CSS3 no existe en teoría. En la práctica, siempre que la especificación diga "no es CSS válido" o algo por el estilo, debe entenderse que significa "el agente de usuario no lo entiende". Consulte mi respuesta a esta pregunta relacionada para obtener una explicación más detallada.
Es decir, 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 pseudoclases y pseudoelementos. 1
Para obtener una idea de por qué se implementó dicha regla, consulte esta respuesta .
1 Tenga en cuenta que WebKit es conocido por incumplir parcialmente esta regla: no tiene problemas para analizar reglas cuyos selectores tienen pseudoelementos con prefijos no reconocidos (que en este caso son ::-moz-placeholder). Dicho esto, la :-moz-placeholderpseudoclase en su regla combinada hará que se rompa de todos modos.
