Por que não é possível combinar pseudo-elementos / classs específicos do fornecedor em um conjunto de regras?

No CSS, é possível estilizar o texto do placeholder em uma input usando uma combinação de pseudo-classs e pseudoelementos específicos do fornecedor (para obter a melhor cobertura entre navegadores).

Todos eles compartilham as mesmas propriedades básicas (ou seja, estilo de texto e declarações de colors).

No entanto, enquanto eu inevitavelmente quero aplicar os mesmos estilos, independentemente do fornecedor do navegador, não parece ser possível combiná-los em um seletor separado por vírgula (como você faria com qualquer outro pedaço de CSS onde você quer dois seletores para compartilhar os mesmos estilos).

Por exemplo, tenho a tendência de segmentar o estilo do marcador de posição usando os quatro seletores a seguir:

  • input:-moz-placeholder
  • input::-moz-placeholder
  • input:-ms-input-placeholder
  • input::-webkit-input-placeholder

(embora :-moz-placeholder esteja sendo substituído em favor de ::-moz-placeholder isso ocorreu apenas com o lançamento do FireFox 19, então no momento ambos são necessários para um melhor suporte ao navegador).

O que é frustrante é que declarar e dar a cada (o mesmo) estilo leva a muita repetição dentro do CSS.

Assim, para garantir que o texto de espaço reservado esteja alinhado à direita e em itálico, acabaria com:

 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; } 

O que eu realmente quero fazer é combiná-los como uma única regra separada por vírgulas como esta:

 input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input::-webkit-input-placeholder{ font-style: italic; text-align: right; } 

No entanto, apesar de tentar isso em algumas ocasiões, isso nunca parece funcionar. Me preocupa que haja alguma parte fundamental do CSS que eu não esteja entendendo.

Alguém pode lançar alguma luz sobre por que isso acontece?

    CSS2.1 afirma :

    O seletor (veja também a seção sobre seletores ) consiste em tudo até (mas não incluindo) a primeira chave esquerda ({). Um seletor sempre vai junto com um bloco de declaração. Quando um agente do usuário não pode analisar o seletor (ou seja, não é CSS 2.1 válido), ele deve ignorar o seletor e o seguinte bloco de declaração (se houver) também.

    Note que desde CSS2.1 pré-datas CSS3, “não é válido CSS 2.1” é escrito sob os pressupostos de que um agente do usuário é totalmente compatível com CSS2.1 e que o CSS3 não existe na teoria. Na prática, sempre que a especificação disser “não é CSS válido” ou algo nesse sentido, deve ser entendido como “não é compreendido pelo agente do usuário”. Veja minha resposta a esta pergunta relacionada para uma explicação mais detalhada.

    Ou seja, como o navegador de um fornecedor não entende os prefixos de outros fornecedores, ele precisa eliminar quaisquer regras que contenham esses prefixos não reconhecidos em seletores de pseudo class e pseudoelemento. 1

    Para saber por que essa regra foi implementada, veja esta resposta .


    1 Observe que o WebKit é notório por desrespeitar parcialmente esta regra: ele não tem problemas para analisar regras cujos seletores possuem pseudo-elementos prefixados não reconhecidos (que neste caso é ::-moz-placeholder ). Dito isso, a pseudo-class :-moz-placeholder em sua regra combinada fará com que ela seja interrompida de qualquer maneira.

    As especificações dizem que, se um agente do usuário não reconhecer parte de um seletor, ele terá que ignorar todo o seletor e seu bloco.

    http://www.w3.org/TR/css3-syntax/#rule-sets

    O seletor (veja o módulo Seletores [SELECT]) consiste em tudo até (mas não incluindo) a primeira chave esquerda ({). Um seletor sempre acompanha um {} -bloco. Quando um agente do usuário não pode analisar o seletor (ou seja, não é CSS3 válido), ele deve ignorar o {} -block também.