Como evitar CSS hacks para garantir resultados em diferentes navegadores

Richard Duchatsch Johansen

Cesar Augusto Cusin

Os Problemas

 Validação do CSS no W3C

 Renderização Crossbrowser

 Métodos distintos com resultados não
confiáveis

 Navegadores em outros SOs

O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB

Comentários Condicionais

Prós:
 Mantém o CSS original inalterado e válido*
 Permite escrever um CSS customizado voltado para os
Internet Explorer
 Pode-se criar um arquivo diferente para cada versão do IE

Contras:
 Tempo gasto para fazer duas o mais folhas de estilos
 Adições no HTML, que apesar de comentadas são grandes
 Arquivo separado pode ser difícil de manter


Comentários Condicionais: Exemplos
Para Alternar o CSS

Para Alternar o Conteúdo

Alguns Exemplos
De Utilização


CSS Hacks

Prós:
 Tudo no mesmo arquivo, é fácil ver onde as correções
acontecem e ao que se aplicam.
 Mais compacto, pode ser aplicado facilmente no
atributo style (IE6 e IE7).

Contras:
 Alterações no CSS original, possivelmente comprometendo
a validação.
 Utilização de caracteres inválidos, que dificultam a
compreensão.
 Em alguns casos são necessários para outros navegadores
que não o Internet Explorer.
 Baseados em bugs!


CSS Hacks: Exemplos
Por Atributos Por Seletores
(Não Validados) (Validados, porém complexos)

Por Atributos (Inline)
(CSS+HTML não validam)


Do Leiaute ao Código fonte


Problemas de Renderização


Utilização de Ajustes


Validação do código fonte

Validação do CSS
CSS Validation Service
(jigsaw)



CSS



CSS

CSS HACKS
( Somente os Validados )
e/ou Comentários Condicionais


Tempo gasto na validação

 Aumento de Custos,
devido ao tempo gasto

 Possibilidade de Retrabalho

 Desperdício de tempo
excessivo

 Apesar de todo o tempo
gasto, pode não haver êxito no
Desenvolvimento.


Proposta de Solução

 Utilizar um script capaz de inserir classes na TAG
<HTML> ou <BODY>

 Classes que identifiquem a família do navegador

 A versão do navegador

 Sistema operacional do usuário <html class=“ie ie9 win js“>
ou
<body class=“ie ie9 win js“>
 Se o Javascript está habilitado


CSS BROWSER SELECTOR


CSS BROWSER SELECTOR: Vantagens

 Fácil de ser Implementado

 Habilidade de escrever códigos CSS específicos

 Possibilidade de resolver problemas em versões
em outros SOs (Inclusive Mobile)

 Herança de CSS devido a classe que identifica a
família do Navegador

 Fim dos CSS HACKS!


CSS BROWSER SELECTOR: Exemplos

Exemplo de uso
do
CSS BROWSER SELECTOR


CSS BROWSER SELECTOR: Exemplos


CSS BROWSER SELECTOR: Resultados

 Todos os navegadores herdam propriedades da classe mãe

 Os navegadores Internet Explorer 6 e superiores, são
completamente diferentes em relação a classe mãe, herdando
somente um atributo

 O Internet Explorer 7/8 herda da classe que identifica a
familia do Internet Explorer o atributo “height”.

 Os restantes dos atributos são completamente diferentes em
relação ao elemento inicial e ao herdado pela família;

 Os demais (Opera, Firefox, Safari...) herdam todos os
atributos da classe mãe, modificando somente o atributo
“background-color”;


Conclusão: CSS Limpo sem Hacks

IE
CSS c/
CSS Browser Selector

Todos


Conclusão: Interoperabilidade de CSS

Browsers

Interoperabilidade
de
SOs Mídias
(TV, Móvel, Web)


Conclusão: Futuro


Como evitar CSS hacks para garantir resultados em diferentes navegadores

Como evitar CSS hacks para garantir resultados em diferentes navegadores

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Como evitar CSS hacks para garantir resultados em diferentes navegadores

Semelhante a Como evitar CSS hacks para garantir resultados em diferentes navegadores (20)

Como evitar CSS hacks para garantir resultados em diferentes navegadores