Desenvolvimento CSS Cross-browser

Navegadores insuportados
IE 7–8 IE 9–10
IE 7
+/- 5,34% visitas

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

(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.
• Obs: não devem comprometer o
funcionamento do site, se não suportados.

(DEBUG)
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…
Block
Formatting
Context
(ou, apenas, contexto)

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.

Enfim, floats…
• Usar com moderação
• “Limpar” floats
• Floats vs. inline-block
• Ordem de empilhamento
• Menus horizontais

Num futuro próximo…
Box model CSS:
largura real = width + border + padding
altura real = height + border + padding
Certo? E se definirmos um elemento como:
.box {
width: 500px;
border: 2px solid #ccc;
padding: 10px;
}
Qual será a largura total do elemento?

.teste {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: 10px;
border: 1px solid #ccc;
}
IE 8+

Ah! Só mais uma coisa:
O código-fonte do projeto normalize.css pode
ajudar a entender melhor algumas das
diferenças de estilo nos navegadores.
/*
* Corrects list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}

Perguntas?
Sugestões?
Partiu polezi?

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

Desenvolvimento CSS Cross-browser

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a Desenvolvimento CSS Cross-browser

Semelhante a Desenvolvimento CSS Cross-browser (20)

Mais de Saulo Pratti

Mais de Saulo Pratti (7)

Último

Último (6)

Desenvolvimento CSS Cross-browser