Slides

CSS Cross Bownser

Description
1. Navegadores insuportados IE 7–8 IE 9–10 IE 7+/- 5,34% visitas 2. Com CSS Sem CSS 3. Can I use? caniuse.comã display: inline-block;ã opacity + PNG…
Categories
Published
of 28
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  • 1. Navegadores insuportados IE 7–8 IE 9–10 IE 7+/- 5,34% visitas
  • 2. Com CSS Sem CSS
  • 3. Can I use? caniuse.com• display: inline-block;• opacity + PNG semi-transparente• pseudo-classes• seletores avançados• pseudo-elementos
  • 4. 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.
  • 5. http://dabblet.com/gist/4234290
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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]
  • 10. Seletores avançados seletor >seleciona o elemento filho direto de um outro elemento. Exemplo: ul > li, div > p
  • 11. Seletores avançados (suportado pelo IE 8 com ressalvas) seletor +Seleciona apenas o elemento adjacente ao primeiro elemento Exemplo: label + input, p + ul
  • 12. Seletores avançados seletor ~seleciona todos os próximos elementos irmãos do primeiro Exemplo: h2 ~ p, .destaque ~ div
  • 13. :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
  • 14. DEBUG TIMEimg: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
  • 15. Mas primeiro… Block Formatting Context(ou, simplificando, contextos)
  • 16. 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)
  • 17. Quando um elemento cria um novo contexto, signfica que ele se tornaresponsável pelos elementos dentro dele. Ou seja, as margens e floats dos elementos filhos passam a ser contidos corretamente.
  • 18. 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.
  • 19. 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.
  • 20. Enfim, floats…• Usar com moderação• Limpar floats• Floats vs. inline-block• Empilhamento (z-index)• Menus horizontais
  • 21. Perguntas? Sugestões? Partiu Polezi?
  • 22. Na próxima semana: Layout digivolve para… HTML + CSSInscreva você também o seu tema!
  • 23. 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/
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks