desenvolvimento css cross-browser
TRANSCRIPT
develópiment
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]
Seletores avançados
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
Seletores avançados
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…
BlockFormatting
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 + paddingaltura 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/