introduzir
Não há dúvida de que qualquer web designer ou desenvolvedor que tente usar CSS descobrirá que navegadores diferentes exigem declarações de estilos diferentes. Esses incômodos se devem a vários graus de integridade da implementação de CSS nos navegadores e em suas versões. CSS condicional é uma solução para esse problema, pegando a ideia da sintaxe de comentário condicional do Internet Explorer e incorporando-a na declaração CSS.
Uso básico
CSS condicional é usado principalmente para indicar se uma instrução CSS específica deve ser usada em um navegador específico. É claro que você não quer fazer isso com muita frequência, mas pode ser muito útil quando você precisa direcionar um navegador. Você pode ver na lista de suporte do U4EA que a maioria dos navegadores oferece suporte a esse método.
Qualquer declaração ou bloco CSS pode ser prefixado com declarações condicionais. Existem três tipos básicos de prefixos:
[se {!} navegador]
[se {!} versão do navegador]
[se {!} condição versão do navegador]
! - a negação da afirmação (por exemplo, NOT) - opcional
navegador - o navegador para o qual a declaração é feita
‘IE’ – Internet Explorer
'Gecko' - navegador baseado em Gecko (Firefox, Camino, etc.)
'Webkit' - navegadores baseados em Webkit (Safari, Shiira, etc.)
'SafMob' - Safari móvel (iPhone / iPod Touch)
'Opera' - o navegador do Opera
'IEMac' - versão Mac do Internet Explorer
'Konq' - Konqueror
'IEmob' - IE para celular
‘PSP’ – Playstation portátil
'NetF' - Net Front (Desculpe a ignorância do Sugar and Tomatoes, não sei o que é isso)
version - a versão do navegador a ser segmentada
condição - operador aritmético
lt - menos que
lte - menor ou igual a
eq - igual a
gte - maior ou igual a
gt - maior que
Alguns exemplos de declarações condicionais:
// Exemplo de sintaxe CSS condicional
[se IE] - se o navegador for IE
[se! Opera] - se o navegador não for Opera
[se IE 5] - se o navegador for IE 5
[if lte IE 6] - Se o navegador for IE 6 ou inferior (IE 5, IE 4, etc.)
[if ! gt IE 6] - equivalente à afirmação acima, se a versão do navegador não for superior ao IE 6
Porque muitas instâncias pensam que div é uma classe de caixa com largura e preenchimento. Portanto, ele também deve se comportar bem no IE 5 (vejo que muitas pessoas abandonaram o suporte ao IE 5, mas este é um exemplo clássico). O modelo de caixa do IE 5 não é padrão, então veja como resolvê-lo usando CSS condicional:
// Exemplo de modelo de caixa CSS condicional
div.caixa {
largura: 400px;
[se IE 5] largura: 600px;
preenchimento: 0 100px;
}
Como você pode ver, o CSS condicional permite manter apenas um arquivo CSS em vez de vários arquivos que exigem o uso de comentários condicionais do IE. Isso ajuda a agilizar a manutenção e torna o código mais claro.
Indo um passo além, um recurso importante do CSS condicional é que, ao encontrar uma declaração CSS @import, ele abre e insere automaticamente o arquivo que precisa ser importado. Isso reduz o tempo de carregamento da página porque o navegador só precisa fazer uma única solicitação HTTP para o arquivo CSS.
Embora o CSS condicional seja usado principalmente para diferentes versões de navegadores IE, o CSS condicional também é bastante útil quando você encontra bugs em outros navegadores que são difíceis de corrigir (principalmente usando Javascript para corrigir). Os exemplos incluem bugs de imagem de fundo no Firefox 2 e Safari 2 que não tinham suporte para 'display: inline-block'. Esses bugs foram corrigidos nas versões mais recentes desses navegadores, mas quando esses navegadores ocupam uma determinada participação de mercado, a compatibilidade com versões anteriores é muito importante.