O que o smiley face “:)” significa em CSS?

321

Vi esse código CSS em um projeto:

html, body { :)width: 640px;}

Estou com CSS há muito tempo, mas nunca vi esse código ":)" antes. Isso significa alguma coisa ou é apenas um erro de digitação?

css css-hack

— Marca
fonte

Parece um erro de digitação para mim. O desenvolvedor está tentando ser divertido, ou talvez uma maneira de marcar áreas do código que ele ou ela procurará?

— Lee

@stijn ainda pode ser um código de fornecedor específico estranho ...

— Mark

@ series0ne Suponho que você nunca viu o asterisco do Internet Explorer.

— Nit

Se esse é realmente um hack do navegador, adicione um comentário no arquivo CSS, explicando isso.

— user247702

Meu palpite: o autor do código digitou :) pensando que o foco estava no cliente de MI. Quando não foram, eles clicaram no cliente de MI e prosseguiram a partir daí, nunca percebendo que haviam digitado um sorriso no último lugar em que o cursor estava sentado, que era o arquivo CSS.

— 22414 Nathan

Respostas:

279

Em um artigo no javascriptkit.com , aplicado para o IE 7 e versões anteriores:

se você adicionar um caractere não alfanumérico, como um asterisco ( *), imediatamente antes do nome de uma propriedade, a propriedade será aplicada no IE e não em outros navegadores.

Também há um hack para <= IE 8 :

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

No entanto, isso não é uma boa ideia, eles não são validados. Você sempre se sente à vontade para trabalhar com comentários condicionais para segmentar versões específicas do IE :

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

Mas para aqueles que querem ver o hack de verdade, abra esta página na versão mais recente do IE que você possui. Em seguida, vá para o modo de desenvolvedor executando a F12. Na seção Emulação ( ctrl+ 8), altere o modo de documento para 7e veja o que acontece.

insira a descrição da imagem aqui

A propriedade usada na página é :)font-size: 50px;.

— revo
fonte

eu sabia sobre "_" e "*" antes do seletor, mas não esse que você disse.

— Valerio0999

@vlrprbttst Esses são caracteres convencionais usados para facilitar. No entanto, conclui todos os valores não alfanuméricos.

— Revo

Estou marcando esta resposta como correta, embora Salman-a também estivesse correto, mas um pouco mais lento. Eu estava ciente desse hack, mas sempre usei um "*". Quem fez esta página é um brincalhão;).

— Mark

Eu posso ser estúpido o suficiente para perder alguma coisa aqui, mas por que ele pode fazer isso usando 2 caracteres? Diz "adicione um não alfanumérico", não "adicione um ou mais ...". Ou isso :significa alguma outra coisa? Caso contrário, não posso colocar *********************font-size: "150%";, etc.?

— Max

Apenas para dar uma parte extra a esta resposta. A resposta é ótima e correta, mas faltando isso, o fato de que essa não é uma prática recomendada. Como regra geral, você deve fazer o possível para oferecer a melhor experiência em todos os navegadores que sua base de usuários está usando. Sem mencionar, na minha opinião, você não deve suportar navegadores que a empresa que os criou não suporta mais.

— AlienDev

171

Parece um hack de CSS para atingir o IE7 e navegadores anteriores. Enquanto isso é CSS inválido e os navegadores devam ignorá-lo, o IE7 e versões anteriores analisarão e respeitarão essa regra. Aqui está um exemplo desse hack em ação:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8 (ignora a regra)

Exemplo 1 - IE8

IE7 (aplica a regra)

Exemplo 1 - IE7

Observe que ele não precisa ser um rosto sorridente; O BrowserHacks menciona:

Qualquer combinação desses caracteres: [antes que o nome da propriedade funcione] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

O exemplo do stand de cachorro-quente do GAH está aqui .

— Salman A
fonte

GAH Hot dog stand flashback

— MikeTheLiar

Sim, a partir do IE8 e acima, o IE se considera compatível com CSS e está quebrando pouco a pouco todas as correções de CSS específicas do IE. (assim, portanto, temos de recorrer a soluções de javascript)

— Virar Vernooij

Todos os sites devem usar um tema de cachorro-quente para todos os usuários do <IE10. +1

— Pete TNT

@ikkuh Para ser justo, o IE11 é um navegador bastante decente e compatível. Há uma razão pela qual eles abandonaram o suporte a comentários condicionais do IE.

— precisa saber é

@ apj15243 Sim, eles percorreram um longo caminho e esperam continuar, a verdade é que eu ainda preciso de suporte condicional para isso, e isso não é apenas o IE11, mas também 10,9 e 8. Então, vamos desejar um auto- atualização também, não há razão para não executar o IE11 no XP além de razões comerciais. Mas isso é uma discussão diferente.

— Flip Vernooij