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
17
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
2
@stijn ainda pode ser um código de fornecedor específico estranho ...
Mark
22
@ series0ne Suponho que você nunca viu o asterisco do Internet Explorer.
Nit
11
Se esse é realmente um hack do navegador, adicione um comentário no arquivo CSS, explicando isso.
user247702
32
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
2
eu sabia sobre "_" e "*" antes do seletor, mas não esse que você disse.
Valerio0999
2
@vlrprbttst Esses são caracteres convencionais usados ​​para facilitar. No entanto, conclui todos os valores não alfanuméricos.
Revo
1
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
1
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
1
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
62
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
39
Todos os sites devem usar um tema de cachorro-quente para todos os usuários do <IE10. +1
Pete TNT
6
@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 é
2
@ 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