Slide 1
Slide 1 text
IE8 e suas peripécias
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
O mais importante…
Tem developer tools!
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Oh Man!
Slide 6
Slide 6 text
Huehuehue MS
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
HTML5 :(
• Sério, quase nada funciona.
• Do pouco que funciona:!
• data-* attributes
• contenteditable attribute
• Hashchange event (url#foo -> url#bar)
caniuse.com
Slide 10
Slide 10 text
Algumas coisas que
sofri na prática
Slide 11
Slide 11 text
bind
• function.bind(context);
• $.proxy(function, context);
• Ou uma implementação de bind :)
Slide 12
Slide 12 text
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;
}
}
Slide 13
Slide 13 text
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%;
}
Slide 14
Slide 14 text
Checkbox, Label, Pseudo-
Elemento
:hover
.selected:hover
.selected
Slide 15
Slide 15 text
Markup
Toda Teen
Slide 16
Slide 16 text
Imagem não triga change :(
Slide 17
Slide 17 text
Checkbox escondido não
triga o change :'O
.checkbox {
display: none;
}
Slide 18
Slide 18 text
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);
Slide 19
Slide 19 text
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');
}
Slide 20
Slide 20 text
O que?? Funcionou??
Slide 21
Slide 21 text
Pera…
???????
Slide 22
Slide 22 text
(›°□°ʣ›︵ ᵲᴸᵲ)
Slide 23
Slide 23 text
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;
}
Slide 24
Slide 24 text
Hora de posicionar o bicho
.image-wrapper:after {
position: absolute;
bottom: 0;
right: 0;
!
/* ... */
}
Slide 25
Slide 25 text
No…
Chrome IE8
Slide 26
Slide 26 text
It can not be!!!!
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Solução
• z-index negativo (no way!!!)
• Ou simplesmente:
• e joga fora toda aquele código de pseudo
elemento
Slide 29
Slide 29 text
GIST
• https://gist.github.com/ulissesalmeida/
11389369#file-ie8-lot-of-bugs-html
Slide 30
Slide 30 text
No content