Your SlideShare is downloading. ×
Richard Duchatsch Johansen      Cesar Augusto Cusin
OS PROBLEMAS
Os Problemas      Validação do CSS no W3C      Renderização Crossbrowser      Métodos distintos com resultados não     ...
MÉTODOSUTILIZADOS
Comentários Condicionais     Prós:        Mantém o CSS original inalterado e válido*        Permite escrever um CSS cust...
Comentários Condicionais: Exemplos                                                        Para Alternar o CSS     Para Alt...
CSS Hacks     Prós:        Tudo no mesmo arquivo, é fácil ver onde as correções         acontecem e ao que se aplicam.   ...
CSS Hacks: Exemplos              Por Atributos                              Por Seletores             (Não Validados)     ...
A REALIDADE
Do Leiaute ao Código fonteO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
Problemas de RenderizaçãoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
Utilização de AjustesO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
Validação do código fonte                                                 Validação do CSS                                ...
Validação do código fonte                              CSSO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADO...
Validação do código fonte                                                  CSS         CSS HACKS   ( Somente os Validados ...
Tempo gasto na validação      Aumento de Custos,       devido ao tempo gasto      Possibilidade de Retrabalho      Desp...
PROPOSTA DE  SOLUÇÃO
Proposta de Solução      Utilizar um script capaz de inserir classes na TAG       <HTML> ou <BODY>      Classes que iden...
O SCRIPT
CSS BROWSER SELECTORO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
VANTAGENS
CSS BROWSER SELECTOR: Vantagens      Fácil de ser Implementado      Habilidade de escrever códigos CSS específicos     ...
CSS BROWSER SELECTOR: Exemplos    Exemplo de uso         doCSS BROWSER SELECTORO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA ...
CSS BROWSER SELECTOR: ExemplosO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES ...
CSS BROWSER SELECTOR: Resultados      Todos os navegadores herdam propriedades da classe mãe      Os navegadores Interne...
CONCLUSÃO
Conclusão: CSS Limpo sem Hacks                                                    IE                                      ...
Conclusão: Interoperabilidade de CSS                              Browsers                                                ...
Conclusão: FuturoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
Conclusão: FuturoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
PERGUNTAS ?
O problema da utilização de CSS HACKS para garantia de resultados em diferentes navegadores Web
Upcoming SlideShare
Loading in...5
×

O problema da utilização de CSS HACKS para garantia de resultados em diferentes navegadores Web

976

Published on

Com surgimento de uma variedade de navegadores, surgiu o problema de como as CSS são interpretadas individualmente por estes navegadores. Com os padrões web, em que são propostas regras para a garantia da interoperabilidade das diferentes tecnologias de linguagem de marcação, não se permite uso de Hacks com características inválidas, pois não seguem o padrão normatizado pelo W3C. Como alternativa, propõe-se o estabelecimento de padrões de método e qualidade, soluções conciliadoras que abranjam variados tipos de navegadores com o uso de sintaxes amigáveis e códigos-fonte seguros que garantam resultados dentro dos padrões da web.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
976
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "O problema da utilização de CSS HACKS para garantia de resultados em diferentes navegadores Web"

  1. 1. Richard Duchatsch Johansen Cesar Augusto Cusin
  2. 2. OS PROBLEMAS
  3. 3. Os Problemas  Validação do CSS no W3C  Renderização Crossbrowser  Métodos distintos com resultados não confiáveis  Navegadores em outros SOsO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  4. 4. MÉTODOSUTILIZADOS
  5. 5. 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 manterO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  6. 6. Comentários Condicionais: Exemplos Para Alternar o CSS Para Alternar o Conteúdo Alguns Exemplos De UtilizaçãoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  7. 7. 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!O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  8. 8. CSS Hacks: Exemplos Por Atributos Por Seletores (Não Validados) (Validados, porém complexos) Por Atributos (Inline) (CSS+HTML não validam)O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  9. 9. A REALIDADE
  10. 10. Do Leiaute ao Código fonteO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  11. 11. Problemas de RenderizaçãoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  12. 12. Utilização de AjustesO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  13. 13. Validação do código fonte Validação do CSS CSS Validation Service (jigsaw)O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  14. 14. Validação do código fonte CSSO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  15. 15. Validação do código fonte CSS CSS HACKS ( Somente os Validados )e/ou Comentários CondicionaisO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  16. 16. 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.O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  17. 17. PROPOSTA DE SOLUÇÃO
  18. 18. 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á habilitadoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  19. 19. O SCRIPT
  20. 20. CSS BROWSER SELECTORO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  21. 21. VANTAGENS
  22. 22. 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!O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  23. 23. CSS BROWSER SELECTOR: Exemplos Exemplo de uso doCSS BROWSER SELECTORO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  24. 24. CSS BROWSER SELECTOR: ExemplosO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  25. 25. 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”;O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  26. 26. CONCLUSÃO
  27. 27. Conclusão: CSS Limpo sem Hacks IE CSS c/ CSS Browser Selector TodosO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  28. 28. Conclusão: Interoperabilidade de CSS Browsers Interoperabilidade de SOs Mídias (TV, Móvel, Web)O PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  29. 29. Conclusão: FuturoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  30. 30. Conclusão: FuturoO PROBLEMA DA UTILIZAÇÃO DE CSS HACKS PARA GARANTIA DE RESULTADOS EM DIFERENTES NAVEGADORES WEB
  31. 31. PERGUNTAS ?

×