CSS Cross "Bownser"

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 :(
• 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…

Block
Formatting
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 { Existem outros métodos
*zoom: 1; 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/

CSS Cross "Bownser"

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a CSS Cross "Bownser"

Semelhante a CSS Cross "Bownser" (20)

Mais de Saulo Pratti

Mais de Saulo Pratti (9)

CSS Cross "Bownser"