Top Banner
29

Desenvolvimento CSS Cross-browser

Aug 09, 2015

Download

Technology

Saulo Pratti
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Desenvolvimento CSS Cross-browser
Page 2: Desenvolvimento CSS Cross-browser

develópiment

Page 3: Desenvolvimento CSS Cross-browser

Navegadores insuportados

IE 7–8 IE 9–10

IE 7+/- 5,34% visitas

Page 4: Desenvolvimento CSS Cross-browser

Com CSS Sem CSS

Page 5: Desenvolvimento CSS Cross-browser

Can I use?caniuse.com

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

Page 6: Desenvolvimento CSS Cross-browser

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.

Page 7: Desenvolvimento CSS Cross-browser

http://dabblet.com/gist/4234290

Page 8: Desenvolvimento CSS Cross-browser

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.

Page 9: Desenvolvimento CSS Cross-browser

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.

Page 10: Desenvolvimento CSS Cross-browser

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.

Page 11: Desenvolvimento CSS Cross-browser

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]

Page 12: Desenvolvimento CSS Cross-browser

Seletores avançados

seletor >seleciona o elemento filho direto de um outro

elemento.

Exemplo: ul > li, div > p

Page 13: Desenvolvimento CSS Cross-browser

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

seletor +Seleciona apenas o elemento adjacente ao

primeiro elemento

Exemplo: label + input, p + ul

Page 14: Desenvolvimento CSS Cross-browser

Seletores avançados

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

do primeiro

Exemplo: h2 ~ p, .destaque ~ div

Page 15: Desenvolvimento CSS Cross-browser

: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.

Page 16: Desenvolvimento CSS Cross-browser

(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

Page 17: Desenvolvimento CSS Cross-browser
Page 18: Desenvolvimento CSS Cross-browser

Mas primeiro…

BlockFormatting

Context(ou, apenas, contexto)

Page 19: Desenvolvimento CSS Cross-browser

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)

Page 20: Desenvolvimento CSS Cross-browser
Page 21: Desenvolvimento CSS Cross-browser
Page 22: Desenvolvimento CSS Cross-browser

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.

Page 23: Desenvolvimento CSS Cross-browser

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.

Page 24: Desenvolvimento CSS Cross-browser

Enfim, floats…

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

Page 25: Desenvolvimento CSS Cross-browser

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?

Page 26: Desenvolvimento CSS Cross-browser

.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+

Page 27: Desenvolvimento CSS Cross-browser

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;}

Page 28: Desenvolvimento CSS Cross-browser

Perguntas?Sugestões?

Partiu polezi?

Page 29: Desenvolvimento CSS Cross-browser

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/