Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IE8 e suas peripécias

IE8 e suas peripécias

Feliz é aquele que não precisa dar suporte ao IE, mais ainda aquele que nem ouviu falar do IE8. Mas nem todos possuem essa sorte e vivem no inferno do IE8. Para esses, vamos ligar o ar condicionado e ajudar prever e solucionar alguns problemas comuns.

* Rápido review de CSS que não funciona no IE8.
* Rápido review de JS que não funciona no IE8.
* Pseudo elementos no IE8.
* Checkbox e Label no IE8.
* IE8 e responsividade(simples, não tem, maas tome cuidado com as media queries).

50e713934ed341675bf1fa73127ec260?s=128

Ulisses Almeida

April 29, 2014
Tweet

Transcript

  1. IE8 e suas peripécias

  2. Fatos da Wikipedia • Nascido em dia 19 de Março

    2009 • Primeira versão passar no Acid2 • A maior versão que funciona no Windows XP • Pode existir no XP, Server 2003, Vista, Server 2008, 7.
  3. O mais importante… Tem developer tools!

  4. None
  5. Oh Man!

  6. Huehuehue MS

  7. CSS :( • gradients • animations • media queries! •

    rgb(), hsl(), rgba(), hsla() • pointer-events • text-shadow • ttf/otf fonts! • calc() • multiple backgrounds • svg in backgrounds • box-shadow • border-radius • transforms • nth- child(), :last- child, :first-of- type • opacity caniuse.com
  8. JS :( • web sockets • file api! • web

    workers • XMLHttpRequest 2 • matches e queries DOM • geolocation • getComputedStyle • Cross-Origin Resource Sharing • Cross-document messaging (only frames e frames) • bind caniuse.com
  9. HTML5 :( • Sério, quase nada funciona. • Do pouco

    que funciona:! • data-* attributes • contenteditable attribute • Hashchange event (url#foo -> url#bar) caniuse.com
  10. Algumas coisas que sofri na prática

  11. bind • function.bind(context); • $.proxy(function, context); • Ou uma implementação

    de bind :)
  12. Media queries //default .super-cool-class { display: block; background-color: red; }

    ! @media @desktop { .super-cool-class { font-size: 42px; width: 600px; } } ! @media @tablet { .super-cool-class { color: green; } } ! @media @phone { .super-cool-class { font-size: 16px; color: green; } }
  13. Media queries .super-cool-class { display: block; background-color: red; font-size: 42px;

    width: 600px; } ! @media @desktop { .super-cool-class { font-size: 42px; width: 600px; } } ! @media @tablet { .super-cool-class { color: green; width: 100%; font-size: inherit; } } ! @media @phone { .super-cool-class { font-size: 16px; color: green; width: 100%; }
  14. Checkbox, Label, Pseudo- Elemento :hover <normal> .selected:hover .selected

  15. Markup <label> <div class='image-wrapper'> <img class='image' src='justin.jpg' /> </div> <span>Toda

    Teen</span> <input class='checkbox' type='checkbox'> </label>
  16. Imagem não triga change :(

  17. Checkbox escondido não triga o change :'O .checkbox { display:

    none; }
  18. Vamos fazer o trabalho dele então :muscle: // if ie8

    var handler = function(e) { e.preventDefault(); e.stopPropagation(); ! var checkbox = $(e.target).closest('label').find('.checkbox'); ! checkbox.click(); }; ! $('span').on('click', handler); $('.image-wrapper').on('click', handler);
  19. Hora de botar o bicho .image-wrapper:after { content: ''; display:

    block; background-image: url('product-add-icon.png'); height: 20px; width: 20px; } ! label:hover .image-wrapper:after { background-image: url('product-add-icon-hover.png'); }
  20. O que?? Funcionou??

  21. Pera… ???????

  22. (›°□°ʣ›︵ ᵲᴸᵲ)

  23. Contorno técnico label:hover .image-wrapper:after { content: 'bilubilu'; background-image: url('product-add-icon-hover.png'); !

    /* Image replacement things */ text-indent: 100%; white-space: nowrap; overflow: hidden; }
  24. Hora de posicionar o bicho .image-wrapper:after { position: absolute; bottom:

    0; right: 0; ! /* ... */ }
  25. No… Chrome IE8

  26. It can not be!!!!

  27. None
  28. Solução • z-index negativo (no way!!!) • Ou simplesmente: <div

    class='image-wrapper'> <img class='image' src='justin.jpg' width="300" /> <span class='marker'></span> </div> • e joga fora toda aquele código de pseudo elemento
  29. GIST • https://gist.github.com/ulissesalmeida/ 11389369#file-ie8-lot-of-bugs-html

  30. None