CSS Cross "Bownser"

Navegadores insuportados

IE 7–8 IE 9–10

IE 7+/- 5,34% visitas

Com CSS Sem CSS

Can I use?caniuse.com

• display: inline-block;• opacity + PNG semi-transparente• pseudo-classes• seletores avançados • pseudo-elementos

display: inline-block;

• Faz com que um elemento tenha propriedades de block – largura e altura, por exemplo – mas siga o fluxo do texto.

• Comportamento um pouco imprevisível.• No IE 7 só funciona em elementos inline por

padrão. Exemplo: um <span> pode ser inline-block mas um <div> não.

http://dabblet.com/gist/4234290

Opacity + PNG semi-transparente

• PNGs semi-transparentes funcionam bem no Internet Explorer 7 e 8…

• …exceto quando se usa a propriedade opacity ao mesmo tempo.

Correção:

.teste { background:url(ie8-logo.png) 0 0 no-repeat; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#00FFFFFF, endColorstr=#00FFFFFF );}

Obs: funcionamento ainda precisa ser confirmado.

Algumas pseudo-classes

• IE 7 aceita :hover em todos os elementos, :active somente em links.

• IE 7 suporta :first-child mas não :last-child.• :first-letter e :first-line funcionam tranquilo.• :focus não funciona nos formulários do IE 7.

Seletores avançados

seletor [attr]permite estilizar elementos além de IDs e

classes, usando qualquer atributo.

Exemplos: input[type=button], a[href*="hotsite"], label[for=email]


seletor >seleciona o elemento filho direto de um outro

elemento.

Exemplo: ul > li, div > p

Seletores avançados(suportado pelo IE 8 com ressalvas)

seletor +Seleciona apenas o elemento adjacente ao

primeiro elemento

Exemplo: label + input, p + ul


seletor ~seleciona todos os próximos elementos irmãos

do primeiro

Exemplo: h2 ~ p, .destaque ~ div

:before / :after

• São pseudo-elementos.• Usados para adicionar conteúdo á pagina

através da propriedade content: "...";• Não suportado pelo IE 7 :(• Podem ser usados somente se não

comprometerem o funcionamento do site

DEBUG TIME

img:not([width]):not([height]),img[alt=""], img:not([alt]) {

outline: 2px solid red;}

a:not([title]) {background: red;color: white;

}

http://dabblet.com/gist/4278123

Mas primeiro…

BlockFormatting

Context(ou, simplificando, contextos)

Elementos que criam contextos

• Elemento raiz (<html>)• Elementos com float diferente de none• Elemento com overflow diferente de visible

• Elementos com position: absolute ou position: fixed

• Elementos inline-block• Células de tabela (display: table-cell)• Título de tabela (display: table-caption)

Quando um elemento cria um novo contexto, signfica que ele se torna

responsável pelos elementos dentro dele.

Ou seja, as margens e floats dos elementos filhos passam a ser contidos corretamente.

E falando em Internet Explorer…

O IE possui uma propriedade similar aos “contextos” chamada de hasLayout.

Uma forma trivial de ativar o hasLayout é adicionar o já conhecido zoom: 1; ao CSS.

O famoso clearfix.clearfix:before,.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */}

.clearfix:after { clear: both;}

/** * Somente para IE 6/7 * Aciona hasLayout para conter floats. */.clearfix { *zoom: 1;}

Existem outros métodos para limpar floats.

Escolha sabiamente.

Enfim, floats…

• Usar com moderação• Limpar floats• Floats vs. inline-block• Empilhamento (z-index)• Menus horizontais

Perguntas?Sugestões?

Partiu Polezi?

Na próxima semana:

Layout digivolve para… HTML + CSS

Inscreva você também o seu tema!

Links e Referências• http://www.quirksmode.org/css/contents.html• http://caniuse.com/#cats=CSS• http://www.satzansatz.de/cssd/onhavinglayout.html• http://stackoverflow.com/a/6199172• http://nicolasgallagher.com/micro-clearfix-hack/• http://stackoverflow.com/a/1633170• http://www.quirksmode.org/css/clearing.html• http://www.css-101.org/articles/floats/• http://www.iecss.com/• http://docs.webplataform.org/wiki/css/

Design

CSS Cross "Bownser"