Devo usar notação de dois pontos simples ou duplos para pseudo-elementos?

108

Como o IE7 e o IE8 não suportam a notação de dois pontos duplos para pseudo-elementos (por exemplo, ::afterou ::first-letter), e como os navegadores modernos suportam a notação de dois pontos (por exemplo :after) para compatibilidade com versões anteriores, devo usar apenas a notação de dois pontos simples e quando A participação de mercado do IE8 cai para um nível insignificante. Voltar e localizar / substituir em minha base de código? Ou devo incluir ambos:

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

Usar o dobro sozinho parece bobo se eu me preocupo com os usuários do IE8 (os pobres queridos).

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element Jinglesthula
fonte

Respostas:

71

Você não usar ambos combinados com uma vírgula. Um agente de usuário compatível com CSS 2.1 (não compatível com CSS3) irá ignorar toda a regra:

Quando um agente de usuário não pode analisar o seletor (ou seja, não é CSS 2.1 válido), ele deve ignorar o seletor e o bloco de declaração seguinte (se houver) também.

CSS 2.1 dá um significado especial para a vírgula (,) nos seletores. No entanto, como não se sabe se a vírgula pode adquirir outros significados em atualizações futuras do CSS, toda a instrução deve ser ignorada se houver um erro em qualquer lugar do seletor, mesmo que o resto do seletor possa parecer razoável no CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

No entanto, você pode usar

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

Por outro lado, isso é mais detalhado do que o necessário; por enquanto, você pode ficar com a notação de um-dois-pontos.

user123444555621
fonte
7
obrigado por incluir as informações sobre a vírgula e ignorar. Isso provavelmente teria feito eu (e talvez outros) coçar as cabeças por um tempo. Parece que a melhor coisa quando 99% dos navegadores em uso suportam a notação de dois-pontos duplos é mudar para usar isso e (porque ninguém vai descartar o suporte de dois pontos simples e quebrar a web, então não há realmente nenhum ponto em find / posterior substituir o código antigo nesse ponto).
jinglesthula
2
Este não é o caminho a seguir. O progresso do navegador será acelerado à força se as pessoas pararem de usar navegadores antediluvianos, quebrados e obsoletos.
Gershom
2
@Gershom Maes: Isso não é para você dizer, infelizmente. Acho que uma grande parte dos desenvolvedores espera o mesmo, mas isso não vai acontecer.
BoltClock
@Gershom Maes, podemos sonhar
James Cushing,
1
Acho que é importante observar que manter estilos duplicados pode ser problemático. Como cHao observa abaixo, o código duplicado adora divergir. A maioria dos desenvolvedores provavelmente terá que ser mordida por ele algumas vezes para
desistir
62

Dos seletores CSS3 REC :

Esta notação :: é introduzida pelo documento atual a fim de estabelecer uma discriminação entre pseudo-classes e pseudo-elementos.
Para compatibilidade com as folhas de estilo existentes, os agentes do usuário também devem aceitar a notação anterior de um dois-pontos para pseudo-elementos introduzidos nos níveis 1 e 2 do CSS (a saber,: primeira linha,: primeira letra,: antes e: depois).
Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos nesta especificação.

Parece que você está seguro usando (apenas) a notação de um dois-pontos para pseudo-elementos que já existiam no CSS2.1, pois os UAs devem ser compatíveis com versões anteriores.

FelipeAls
fonte
1
Para registro, essa resposta também poderia ser marcada como correta. Ele fornece uma perspectiva valiosa, embora o ímpeto para a pergunta original tenha sido especificamente os pseudo-elementos antes e depois. Obrigado por adicioná-lo.
jinglesthula de
Como você chegou a essa conclusão? Eu cheguei à conclusão oposta ... se dois pontos simples não serão permitidos para novos pseudo-elementos, você não deveria começar a usar dois pontos duplos para se habituar?
andrewtweber
@andrewtweber no contexto da questão original (IE8), usando double quebraria o CSS. Dito isso, no momento em que este livro foi escrito, a maioria dos sites provavelmente viu o uso do IE8 em um nível tão baixo que permite dobrar sem nenhuma queda significativa. Pode-se confiar que os fornecedores de navegadores suportarão a notação única perpetuamente, mas não há nada de errado em mudar os hábitos de codificação neste momento.
jinglesthula
@andrewtweber +1 para OP Sim, o IE8 deveria ser levado em consideração em 2012 e - YMMV - ainda está em 2015 em grandes projetos B2B e similares, mas não em outros projetos web. Ambas as notações são perfeitamente válidas para esses pseudos existentes. A minificação de CSS ganhará 1 byte usando a notação de um-dois-pontos. Se você quiser sempre usar uma notação e proibir a outra, bem, isso é uma convenção, você é totalmente livre para fazer isso com sua equipe, mas não é uma recomendação.
FelipeAls
@jinglesthula e Felipe, vocês têm razão, não percebi a data. Talvez a resposta deva ser atualizada, já que essa pergunta aparece no topo dos resultados da pesquisa
andrewtweber
22

Eu discordo totalmente de @mddw e @FelipeAls, no que diz respeito a considerar o uso de dois pontos como "seguro".

Essa mentalidade de "vou usá-lo mesmo que esteja obsoleto" é exatamente o motivo pelo qual as tecnologias baseadas em navegador são tão lentas em avançar e progredir.

SIM, queremos manter a compatibilidade com os padrões antigos. Vamos enfrentá-lo, é a mão que recebemos. MAS, isso não significa que você tenha uma desculpa para ser preguiçoso em seu desenvolvimento, ignorando os padrões atuais em favor dos obsoletos.

Nosso objetivo deve ser manter a conformidade com os padrões atuais, ao mesmo tempo que dá suporte ao máximo possível do padrão legado.

Se pseudo-elementos forem usados :em CSS2 e ::em CSS3, não devemos usar um ou outro; devemos usar os dois .

Para responder totalmente à pergunta original feita, o seguinte é o método mais apropriado de suporte à implementação mais atual de CSS (versão 3), enquanto mantém o suporte legado para a versão 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
fonte
3
Acho que é bastante seguro presumir que os fornecedores de navegadores continuarão a oferecer suporte à notação antiga indefinidamente devido à quantidade de código que nunca será atualizado de forma realista e que eles desejam que seu navegador seja renderizado 'corretamente'. Por outro lado, manter cópias separadas dos estilos levanta a bandeira vermelha do DRY, eu acho. Acho que é mais pragmático do que preguiçoso usar a notação de dois pontos até que a participação de mercado do IE7 diminua. Dito isso, quero que a web avance tanto quanto qualquer um!
jinglesthula de
9
Se você " discorda totalmente " da minha resposta, então você discorda totalmente da palavra deve em uma recomendação do W3C. " Nosso objetivo deve ser manter a conformidade com os padrões atuais, apoiando o máximo possível do padrão legado. " É o que está sendo tratado por esta parte do REC e afirma explicitamente que os UAs não devem forçar os autores a usar ambas as notações e explica como isso deve ser feito por esses UAs. Sinta-se à vontade para entrar em contato com a lista de e-mails do CSS WG se você não concordar com isso (ou no Twitter @glazou co-presidente deste Grupo de Trabalho)
FelipeAls
4
Não discordo de toda a sua resposta, apenas quanto ao uso de um único cólon como "seguro". a compatibilidade não é permitida para os novos pseudo-elementos significa que quaisquer pseudo-elementos futuros só serão implementados em ::. De acordo com sua abordagem, os indivíduos começarão a misturar e combinar o uso de :e ::para pseudo-elementos. Aderir explicitamente ao antigo padrão (que por enquanto pode ser suportado) é uma prática inerentemente ruim e deve ser evitada sempre que possível. Se você discordar dessa afirmação, simplesmente temos pontos de vista diferentes.
Joshua Burns
4
Aderir a um padrão explicitamente compatível não é inerentemente uma prática ruim, se a compatibilidade for um objetivo. Por outro lado, usar os dois leva a estilos duplicados - e como qualquer um que já codificou por um tempo sabe, o código duplicado adora divergir.
cHao
8
@JoshuaBurns Se meu antecessor tivesse duplicado uma carga de código para se proteger contra uma ameaça futura imaginária, eu me sentiria significativamente mais "ferrado".
Mark Amery
2

No entanto, está se tornando cada vez mais popular usar polyfills para novos javascript e CSS, então você pode querer apenas usar a ::sintaxe de dois-pontos dupla ( ) mais recente e manter um polyfill para navegadores mais antigos, desde que seja necessário.

zpr
fonte
Esta é essencialmente apenas uma meta-resposta; não fornece nenhuma informação útil. Se uma resposta estiver desatualizada, vote e / ou comente sobre ela indicando tal.
TylerH
2
por que não vincular esse tipo de polyfill, para que possamos usá-lo sem pesquisar mais no Google?
MightyPork
4
eh, a primeira parte pode ser meta, mas acho que a segunda parte é uma boa resposta. Onde eu trabalho, não usamos um pré-processador e / ou polyfills, então a resposta aceita funciona para mim. Mas para qualquer loja ou desenvolvedor que use essas ferramentas, esta resposta é provavelmente mais útil.
jinglesthula
1

De acordo com as Estatísticas do navegador, o IE 8.0 caiu para menos de 1% nos EUA no ano passado.

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

Em dezembro de 2015, o IE 8.0 detinha 2,92% do mercado. Em dezembro de 2016, o IE 8.0 detinha 0,77% do mercado.

Com essa taxa de declínio, não seria a pior ideia parar de suportar versões antigas do IE e começar a usar :: para Pseudo Elements.

DR01D
fonte
O que é motivo para festejar :) Também vale a pena destacar que ainda depende da situação. Se você for a Amazon, 0,5% de seus usuários equivalem a mais de um milhão de clientes que pensam que seu site está quebrado. Se você está fazendo um blog para uma startup de 10 pessoas, as apostas podem ser diferentes.
jinglesthula
Definitivamente verdade sobre uma organização como a Amazon. Mas esse 0,77% não está distribuído uniformemente por toda a população. São desproporcionalmente idosos ou pessoas com pouco dinheiro que não podem atualizar. Do ponto de vista puramente comercial, esses provavelmente não são os mercados-alvo ideais. Portanto, para a maioria das empresas, o grupo de 0,77% é ainda menos significativo do que sugere esse pequeno número. E esse número só vai diminuir.
DR01D
Bons pontos. Outro grupo onde a atualização é uma batalha difícil é o governo e grupos empresariais dependem fortemente de aplicativos que só funcionarão com uma determinada versão do navegador (embora, felizmente, os grupos que são assim também diminuirão com o tempo). Que nenhum de vocês precise codificar para um cliente assim :)
jinglesthula
0

Incluir ambas as notações certamente é mais seguro, mas não consigo ver nenhum navegador abandonando a notação única por um longo tempo, então apenas uma estará bem (é CSS2 válido).

Pessoalmente, só uso a notação de dois pontos simples, principalmente por hábito.

mddw
fonte
1
Como as outras respostas deixam claro, é um pouco mais complicado do que isso e existem algumas armadilhas não óbvias (por exemplo, o suporte à notação de dois pontos para pseudoelementos CSS 3 é uma violação explícita das especificações, portanto, parece sensato para os autores de CSS não para usar a notação de dois pontos para esses seletores).
Mark Amery