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).

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!
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!!!!
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