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

Como o IE7 e o IE8 não suportam a notação de dois-pontos para pseudoelementos (eg ::after ou ::first-letter ), e uma vez que os navegadores modernos suportam a notação de um único cólon (por exemplo :after ) para compatibilidade com versões anteriores, Eu uso apenas a notação de cólon único e quando a participação de mercado do IE8 cai para um nível insignificante, volte e encontre / substitua em minha base de código? Ou devo include os dois:

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

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

    Não use os dois 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 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.

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

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

    Você poderia no entanto 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-cólon.

    Dos Seletores CSS3 REC :

    This :: notation é introduzido pelo documento atual para estabelecer uma discriminação entre pseudo-classs e pseudo-elementos.
    Para compatibilidade com folhas de estilo existentes, os agentes do usuário também devem aceitar a notação de um-ponto anterior para pseudo-elementos introduzidos nos níveis de CSS 1 e 2 (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) uma notação de um-ponto para pseudo-elementos que já existiam no CSS2.1, já que os UAs devem ser compatíveis com versões anteriores.

    Eu absolutamente discordo de @mddw e @FelipeAls, no que diz respeito ao uso de um cólon “seguro”.

    Essa mentalidade “Vou usá-lo mesmo que seja 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 nos foi dada. 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 depreciados.

    O objective deve ser manter a conformidade com os padrões atuais, ao mesmo tempo em que suporta o máximo possível do padrão legado.

    Se pseudo-elementos usam : em CSS2 e em CSS3, não devemos usar um ou outro; nós deveríamos estar usando ambos .

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

     .foo:after { /* styles */ } .foo::after { /* same styles as above. */ } 

    No entanto, tornou-se cada vez mais popular o uso de polyfills tanto para o novo JavaScript quanto para CSS, então você pode preferir usar a nova syntax de dois-pontos ( :: 🙂 e manter um polyfill para navegadores mais antigos, desde que isso seja necessário .

    Por que vale a pena acordo com o Browser Stats 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 tinha 2,92% do mercado. Em dezembro de 2016, o IE 8.0 tinha 0,77% do mercado.

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

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

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