CSS Hack é uma solução usada quando o CSS padrão não é compatível com os efeitos de exibição de vários navegadores. Até que os fabricantes de navegadores cheguem a um acordo sobre como analisar o CSS, só poderemos usar esse método para concluir tais tarefas. Você pode pesquisar muitos CSS Hacks na Internet, mas pode não entender todos os que lancei hoje, porque são CSS Hacks direcionados apenas a um único navegador.
Para mostrar que esses hacks CSS funcionam, criei seis novas tags P e dei a cada tag P um ID exclusivo. Isso mostrará o CSS Hack em ação.
| <p id="opera">Sou do Opera 7.2 - 9.5</p> <p id="safari">Eu sou o Safari mágico</p> <p id="firefox">Sou do Firefox</p> <p id="firefox12">Sou um Firefox sênior FF 1 - 2 </p> <p id="ie7">Eu sou 囧IE7</p> <p id="ie6">Sou um IE 6 quebrado</p> |
Então deixei essas tags P não serem exibidas por padrão
| <style type="texto/css"> corpo p{display: nenhum;} </estilo> |
Use comentários condicionais CSS do IE para distinguir os navegadores do IE
A maneira mais fácil de distinguir os navegadores IE é, naturalmente, usar seus comentários condicionais. A Microsoft criou uma sintaxe poderosa que nos permite alcançar essa funcionalidade. Não quero apresentar os comentários condicionais do IE em detalhes. Acho que você pode pesquisar dezenas de milhares de termos de pesquisa no mecanismo de pesquisa.
| <!--[se IE 7]> <style type="texto/css"> </estilo> <![endif]--> <!--[se IE 6]> <style type="texto/css"> </estilo> <![endif]--> |
Use Hacks de analisador CSS para distinguir o IE
Embora os comentários condicionais do IE sejam muito simples e fáceis de usar, se você quiser colocar todo o CSS em um arquivo, terá que usar outros métodos. Observe que o hack do IE 7 aqui só funcionará no IE7, porque o IE6 não conhece o seletor >. Ao mesmo tempo, você deve observar que o seletor > também é inválido para outros navegadores.
| /* ou seja, 7 */ html > corpo #ie7 {*exibição: bloco;} /* ou seja, 6 */ corpo #ie6 {_display: bloquear;} |
CSS Hack para diferenciar o Firefox
O primeiro usa body:empty para diferenciar entre Firefox 1 e 2. O segundo hack usa uma extensão proprietária para todos os navegadores Firefox - moz. -moz é válido apenas para Firefox. Você não precisa se preocupar com o impacto de outros navegadores ao usar este Hack.
| /* Raposa de fogo 1 - 2 */ corpo:vazio #firefox12 {exibição: bloco;} /* Raposa de fogo */ @-moz-document url-prefix() {#firefox {exibição: bloco }} |
CSS Hack diferencia o Safari
O hack CSS do Safari é muito semelhante ao hack do Firefox. Ele usa o extension-webkit proprietário do navegador Safari e só é eficaz para o navegador Safari.
| /* Safári */ Tela @media e (-webkit-min-device-pixel-ratio:0) {#safari {exibição: bloco }} |
CSS Hack distingue Opera
| /* Ópera */ @media todos e (-webkit-min-device-pixel-ratio:10000), nem todos e (-webkit-min-device-pixel-ratio:0) {cabeça ~ corpo #opera { display: bloco }} |
Então, junte tudo e fica
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="pt"> <cabeça> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Hacks de navegador CSS</title> <style type="texto/css"> corpo p { exibição: nenhum; } /* Ópera */ html:primeiro filho #opera { exibição: bloco; } /* ou seja, 7 */ html > corpo #ie7 { *exibição: bloco; } /* ou seja, 6 */ corpo #ie6 { _exibição: bloco; } /* Raposa de fogo 1 - 2 */ corpo:vazio #firefox12 { exibição: bloco; } /* Raposa de fogo */ @-moz-document url-prefix() { #firefox {exibição: bloco} } /* Safári */ Tela @media e (-webkit-min-device-pixel-ratio:0) { #safari {exibição: bloco}; } /* Ópera */ @media todos e (-webkit-min-device-pixel-ratio:10000), nem todos e (-webkit-min-device-pixel-ratio:0) { cabeça~corpo #opera { display: bloco } } </estilo> </head> <corpo> <p id="opera">Sou do Opera 7.2 - 9.5</p> <p id="safari">Eu sou o Safari mágico</p> <p id="firefox">Sou do Firefox</p> <p id="firefox12">Sou um Firefox sênior FF 1 - 2 </p> <p id="ie7">Eu sou 囧IE7</p> <p id="ie6">Sou um IE 6 quebrado</p></body> </html> |
Embora o CSS Hack seja bom e convenientemente compatível com vários navegadores, ele não pode passar na verificação W3C, então você deve avaliar se é necessário usá-lo.