O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

HTML/CSS Patterns

4.586 visualizações

Publicada em

Publicada em: Tecnologia

HTML/CSS Patterns

  1. 1. globo .com HTML/CSS Patterns Leonardo Quixadá
  2. 2. 1 O Que Não Vou Apresentar
  3. 3. O Que Não Vou Apresentar‣ Fundamentos de seletores‣ Aplicação de propriedades‣ Tableless‣ Performance‣ CSS3
  4. 4. 2 HTML & CSS Hoje
  5. 5. Guidelines‣ CSS ‣ Reset.css ou normalize.css ‣ Grids‣ HTML & CSS ‣ Tableless
  6. 6. Mas e o resto? #comofaz
  7. 7. Problemas comuns‣ Layout em CSS não é fácil de aplicar, nem de explicar‣ Não existe sandbox, há muitos conflitos de propriedades‣ Inconsistência cross-browser‣ Não é automaticamente testável
  8. 8. TODO CUIDADO É POUCO!
  9. 9. 3 O Curso
  10. 10. Estrutura para HTML & CSS‣ Agilizar a criação e a manutenção de componentes.‣ Melhorar a limpeza, a clareza e a flexibilidade tanto do HTML, como do CSS.‣ Diminuir o tempo desperdiçado fazendo ajustes para um browser em específico.
  11. 11. Regras de Ouro1. Separar container de conteúdo2. Separar estrutura de estética -- Nicole Sulivan (Yahoo!), em OOCSS
  12. 12. Cronograma HTML CSS Patterns Patterns Grids Seletores EstratégiasMinidocumentos Propriedades de Mundo ValidaçãoMicrosemântica Layout Pós-IE6
  13. 13. 4 Modelo Globocore
  14. 14. Modelo Globocore page macroarea área box (widgets & destaques)
  15. 15. 5 HTML Patterns
  16. 16. HTML Patterns‣ Grids‣ Minidocumentos‣ Microsemântica
  17. 17. 5.1 Grids
  18. 18. Grids“Todo trabalho de design envolve a solução de problemasem níveis visuais e organizativos. Figuras, símbolos, massa detextos, títulos e tabelas devem se reunir para transmitirinformação. O grid é uma maneira de juntar esseselementos.” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
  19. 19. Grids“O grid introduz uma ordem sistemática num leiaute epermite que o designer diagrame uma grande quantidade deinformação. Também permite vários colaboradores nummesmo projeto.” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
  20. 20. Grids“Vantagens do grid:- Clareza- Eficiência- Economia- Identidade” - Luiz Agner, designer, arquiteto e professorFonte: http://www.slideshare.net/agner/a-construo-do-grid
  21. 21. Grids‣ Padrão de-facto para layouts em CSS.‣ Permite o intercâmbio de componentes entre produtos‣ Define o espaço horizontal que os componentes podem ocupar (o conteúdo dos componentes definem o espaço vertical)‣ Dada uma largura fixa, pode-se compor “linhas” com até 12 colunas.
  22. 22. Grids
  23. 23. colunasGrids
  24. 24. Grids linhas
  25. 25. Grids: Colunas‣ 1 unidade ou coluna de 1: <div class=”glb-grid-1”></div> width (60px) margin-left (10px) margin-right (10px)
  26. 26. Grids: Colunas‣ 2 unidades: grid 1 grid-1 10px 60px 20px 60px 10px‣ coluna de 2: 10px 140px 10px grid-2 <div class=”glb-grid-2”></div>
  27. 27. Grids: Colunas‣ 3 unidades: grid 1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 10px grid 1 grid-2 10px 60px 20px 140px 10px‣ coluna de 3: 10px 220px 10px grid-3 <div class=”glb-grid-3”></div>
  28. 28. Grids: Colunas‣ 4 unidades: grid 1 grid-1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 20px 60px 10px grid 1 grid-2 grid-1 10px 60px 20px 140px 20px 60px 10px‣ coluna de 4: 10px 300px 10px grid-4 <div class=”glb-grid-4”></div>
  29. 29. Grids
  30. 30. Grids: Linhas‣ As linhas podem ser definidas por blocos ou unidades do grid. glb-bloco glb-grid 2 glb-grid-8 glb-grid-2 <div class=”glb-bloco”> <div class=”glb-grid-2”></div> <div class=”glb-grid-8”></div> <div class=”glb-grid-2”></div> </div>
  31. 31. Grids: Linhas‣ As linhas podem ser definidas por blocos ou unidades do grid. glb-grid-4 glb-grid 1 glb-grid-2 glb-grid-1 <div class=”glb-grid-4”> <div class=”glb-grid-1 glb-primeiro”></div> <div class=”glb-grid-2”></div> <div class=”glb-grid-1 glb-ultimo”></div> </div>
  32. 32. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
  33. 33. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
  34. 34. Grids: Exemplo<div class="glb-topo"> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div></div>
  35. 35. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
  36. 36. Grids: Exemplo<div class="glb-conteudo"> <div class="glb-bloco"> <div class="glb-grid-8"></div> <div class="glb-grid-4"></div> </div> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div></div>
  37. 37. Grids: Exemplo<body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div></body>
  38. 38. Grids: Exemplo<div class="glb-rodape"> <div class="glb-bloco"> <div class="glb-grid-12"></div> </div></div>
  39. 39. Hora do DEMO!!!
  40. 40. Exercício: Implementar header 1 2 3 4 5 6 7 8 9 10 footer
  41. 41. 5.2 Minidocumentos
  42. 42. Minidocumentos‣ Pattern que subdivide páginas web em pequenos “documentos” autosuficientes.‣ É como um pequeno grid para os componentes que vão preencher os compartimentos da estante.‣ Juntando-se vários componentes formam-se composições sólidas.
  43. 43. Minidocumentos‣ Podem ser utilizados por widgets, destaques, forms, menus, etc...‣ Baseado nas novas tags do HTML 5: article, section, header e footer.
  44. 44. Página
  45. 45. Página
  46. 46. Página
  47. 47. Página
  48. 48. Menu & Widget Lateral
  49. 49. Menu & Widget Lateral Header
  50. 50. Menu & Widget Lateral Content
  51. 51. Menu & Widget Lateral Footer
  52. 52. Form
  53. 53. Form
  54. 54. Form
  55. 55. Form
  56. 56. Widgets Centrais
  57. 57. Widgets Centrais
  58. 58. Widgets Centrais
  59. 59. Widgets Centrais
  60. 60. Widgets Centrais
  61. 61. Widgets Centrais
  62. 62. Widgets Centrais
  63. 63. Pattern Visual Container Header Content Footer
  64. 64. Pattern Visual Container Títulos, menus, logos... Todo o conteúdo Links “veja mais”, botões, informações extras...
  65. 65. Pattern HTML<div class=”container”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
  66. 66. Pattern Página<div class=”glb-doc”> <div class=”glb-top”> ... </div> <div class=”glb-content”> ... </div> <div class=”glb-base”> ... </div></div>
  67. 67. Pattern Matéria<div class=”materia”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”base”> ... </div></div>
  68. 68. Pattern Box<div class=”box”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
  69. 69. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
  70. 70. Se você usasse HTML5...<section class=”box box-plantao”> <header> ... </header> <section> ... </section> <footer> ... </footer></section>
  71. 71. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
  72. 72. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div></div>
  73. 73. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <!-- .header --> <div class=”content”> ... </div> <!-- .content --> <div class=”footer”> ... </div> <!-- .footer --></div> <!-- .box-plantao -->
  74. 74. Favor, não misturar <div>s ou .classes de grid com box.
  75. 75. 5.3 Microsemântica
  76. 76. Microsemântica‣ Utilização de elementos semânticos para descrever dados através de tags e/ou classes.‣ É uma variação dos Microdados e, antigamente, de Microformatos.‣ Não serve paras os search engines, apenas melhora a clareza do código.
  77. 77. Microsemântica‣ É a partir daqui que se preocupa com: ‣ SEO ‣ Semântica ‣ Acessibilidade ‣ Microdados ‣ ...
  78. 78. Microdados“Microdados é uma especificação WHATWG HTML5usada para aninhar semântica dentro de conteúdosexistentes em páginas web.Isso é feito usando atributos específicos: itemscope,itemtype, itemid, itemprop e itemref.Search engines, web crawlers, e navegadores podemextrair e processar microdados a partir de uma páginaweb e usar isso para prover uma experiência denavegação mais rica para os usuários.” - Wikipedia
  79. 79. Microdados: Exemplo<div> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a></div>
  80. 80. Microdados: Exemplo<div itemscope> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a></div>
  81. 81. Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a></div>
  82. 82. Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span> Director: <span itemprop="director">James Cameron</span> (born August 16, 1954) </span> <span itemprop="genre">Science fiction</span> <a href="/movies/avatar.html" itemprop="trailer">Trailer</a></div>
  83. 83. Microdados: Exemplo<div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </span> <span itemprop="genre">Science fiction</span> <a href="/movies/avatar.html" itemprop="trailer">Trailer</a></div>
  84. 84. Microdados‣ Mais exemplos em: http://schema.org
  85. 85. Microformatos‣ Cartões <div class="vcard"> <span class="fn">Nome</span> <span class="org">Organização</span> <span class="tel">604-555-1234</span> <a class="url" href="http://site.com/">Website</a> </div>‣ Calendário‣ Reviews
  86. 86. Microsemântica‣ Por que não fazer nossos próprios microdados?‣ HTML com mais semântica e mais entendível.
  87. 87. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> .... </div></div>
  88. 88. Box Plantão<div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> .... </div></div>
  89. 89. Box Plantão<div class=”box box-plantao”> ... <div class=”content”> <ul> <li> ... </li> <li> ... </li> ... </ul> </div> ...</div>
  90. 90. Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul>
  91. 91. Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul> não dizem nada
  92. 92. Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul> semântico!!!
  93. 93. A partir daqui, nada degrid, e evite ao máximo utilizar <div>s.
  94. 94. Box Plantãodiv.box-plantao a { ... }div.box-plantao a.noticia { ... }div.box-plantao span.chapeu { ... }div.box-plantao span.titulo { ... }div.box-plantao ul { ... }
  95. 95. Vejamos rapidamente outro box...
  96. 96. Box Previsão do Tempo
  97. 97. Box Previsão do TempoVc consegue classificar semanticamente o content do box?
  98. 98. Outro exemplo....
  99. 99. Outro exemplo....div.brother-main
  100. 100. Outro exemplo.... cite.brother-tweetspan.brother-idade span.brother-cidade-natalspan.brother-signo cite.brother-tweet-tempo span.brother-time
  101. 101. Dica! <div> para descrever estrutura, <span> para descrever dados
  102. 102. Exercício‣ Transforme um box em HTML:
  103. 103. 6 CSS Patterns
  104. 104. Estratégias‣ Organizando Seletores‣ Organizando Propriedades‣ Elaborando Layouts
  105. 105. 6.1 Organizando Seletores
  106. 106. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
  107. 107. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
  108. 108. Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... }
  109. 109. Namespacesdiv.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } Contexto ou Namespace
  110. 110. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
  111. 111. tag[.class]div.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } tag[.class] 1
  112. 112. tag[.class]div.box-plantao { ... }div.box-plantao a { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao span.barra { ... }div.box-plantao ul { ... } tag[.class] 2
  113. 113. tag[.class]‣ jQuery $(‘div.box-plantao span.barra’) ou $(‘div.box-plantao’).find(‘span.barra’) (para cachear o contexto)‣ Lxml html = lxml.etree.fromstring(response.content) html.cssselect(‘div.box-plantao span.barra’)‣ splinter browser = Browser() browser.find_by_css(‘div.box-plantao span.barra’)
  114. 114. tag[.class]‣ Problemas de se utilizar só a classe: ‣ Desenvolvedores são muito ruins em nomear coisas. ‣ O nome da tag é tão objetivo quanto uma ordem alfabética. Melhor utilizar os tokens já predefinidos do que ficar elaborando nomes malucos. ‣ Classes abertas indicam pra outros devs, que é permitido colocar a classe em qualquer tag.
  115. 115. tag[.class]‣ Exemplos: .fieldset-metadados fieldset.metadados (exemplo do widget SEO) .span_tag span.tag (catálogo de vídeo v1.0) .formulario-criacao-usuario form.criacao-usuario‣ Só utilizar classes abertas quando é realmente necessário aplicar a mais de uma tag (exemplo th, td).
  116. 116. tag[.class]‣ Recomendo sempre ter 2 tag[.class]. Claro e conciso!‣ Mínimo de 1 tag[.class] div.box-plantao { ... }‣ Máximo (prometa!) de 3 tag[.class] div.box-plantao ul.principal li.ativo { ... }
  117. 117. Organizando Seletores‣ Namespaces: define a área de atuação dos seletores e os agrupa visualmente.‣ tag[.class].‣ Separação por blocos.‣ Ordem: especificidade, alfabética.
  118. 118. Separação por blocosdiv.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao ul { ... }div#box-plantao-principal h6 { ... }div#box-plantao-principal li { ... }
  119. 119. Separação por blocos div.box { ... }bloco div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... }bloco div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... }bloco div#box-plantao-principal li { ... }
  120. 120. Ordemmenos específico div.box { ... } div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }mais específico
  121. 121. Ordem div.box { ... } div.box a { ... } div.box span.barra { ... }ordem alfabética div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }
  122. 122. Resumão!
  123. 123. Teu HTML ficaria assim...<div class=”box box-plantao”> <div class=”header”> <h6>primeira página</h6> </div> <div class=”content”> <ul> <li></li> ... </ul> </div> <div class=”footer”> <a href=”#”>veja mais</a> </div></div>
  124. 124. E teu CSS ficaria assim...div.box { ... }div.box a { ... }div.box span.barra { ... }div.box-plantao h6 { ... }div.box-plantao li { ... }div.box-plantao ul { ... }div#box-plantao-principal h6 { ... }div#box-plantao-principal li { ... }
  125. 125. 6.2 Organizando Propriedades
  126. 126. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
  127. 127. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
  128. 128. Uma propriedade por linha‣ Facilita diffs!
  129. 129. Uma propriedade por linha‣ Inserir comentários é mais tranquilo
  130. 130. Uma propriedade por linha‣ CSS 3 com vendor prefix são bem longos e variados.box_shadow { -webkit-box-shadow: 0px 0px 4px #ffffff; -moz-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;}
  131. 131. Uma propriedade por linha‣ CSS 3 com vendor prefix são bem longos e variados.box_gradient { background-color: #444444; /* Saf4+, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, from(#444444),to(#999999)); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */ /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(top, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#444444,EndColorStr=#999999); /* IE6-IE9 */}
  132. 132. Organizando Propriedades‣ Uma propriedade:valor por linha‣ Separar propriedades por contexto
  133. 133. Organizando Propriedades‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
  134. 134. importante!EVITE o !important
  135. 135. 6.3 Elaborando Layouts
  136. 136. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
  137. 137. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
  138. 138. Prequel‣ 1o grupo: layout position, display, float, top, left, bottom, right, margin, padding, width, height‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform...‣ 3o grupo: restante border, z-index, overflow, ...
  139. 139. float:left
  140. 140. Float:Left contra o Mundo‣ O float serve para alinhar à esquerda, à direita ou não alinhar (none).‣ A propriedade tem a ver mais com conteúdo do que com boxes.‣ Suas dimensões são reduzidas para acomodar apenas o próprio conteúdo ao contrário de display:block.‣ É fonte de muitas confusões no mundo CSS.
  141. 141. Float:Left em QuadrinhosABC
  142. 142. Float:Left em Quadrinhos A B C‣ A‣ B { float:left; }‣ C
  143. 143. Float:Left em Quadrinhos A B C‣ Box B perdeu espaço no flow de boxes, mas ocupou espaço à esquerda do conteúdo C, ou seja, virou conteúdo.
  144. 144. Float:Left em QuadrinhosABC
  145. 145. Float:Left em Quadrinhos A B C‣ A‣ B { float:left; }‣ C { float:left; }
  146. 146. Float:Left em QuadrinhosAA B C‣ B se alinhou à esquerda antes de C. Como saíram do flow de boxes, a altura de A diminuiu.‣ É como se estivessem caçando conteúdo abaixo.
  147. 147. Float:Left contra o Mundo‣ Float:left/right tem um funcionamento difícil de entender e de explicar.‣ A maioria dos bugs nos IEs encontrados e registrados pelo Position Is Everything tem o float envolvido. http://www.positioniseverything.net/explorer.html‣ Recomendação: evitar ao máximo.
  148. 148. Alternativas ao float:left { inline display block inline-block { static relative position absolute fixed
  149. 149. display:inline-block
  150. 150. Antes de existir o CSS...‣ No HTML, os elementos são divididos em inline-level (também chamado de text-level) e block-level. ‣ Elementos inline-level (também chamados de text- level) são os que convivem lado-a-lado com texto e outro elementos inline-level. ‣ Elementos block-level são containers para elementos inline-level, textos e outros elementos block-level
  151. 151. Antes de existir o CSS...Elementos inline-level Elementos block-level <input> <a> <form> <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
  152. 152. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
  153. 153. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> W3C <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>
  154. 154. Antes de existir o CSS...Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td><button> <cite> <em> W3C <fieldset> <th> <strong> <span> <p><textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6> W3C
  155. 155. Antes de existir o CSS...‣ Leitura recomendada (é curto, prometo!): http://www.w3.org/TR/html401/struct/global.html#h-7.5.3‣ Regras da estrutura HTML: http://www.w3.org/TR/html4/strict.dtd
  156. 156. Nunca, nunca coloqueelementos block-leveldentro de inline-level.
  157. 157. Voltando ao CSS...
  158. 158. Displays‣ Os dois tipos básicos de display são: ‣ display:block permite um elemento ser dimensionado com width, height, padding, margin, etc. ‣ display:inline permite ficar lado-a-lado com outros elementos e textos. Não pode ser dimensionado com width e height. Apenas com valores laterais de margin.
  159. 159. Display:Inline-block‣ Junta características de elementos inlines e blocks.‣ Permite ficar lado-a-lado com outros elementos e ser dimensionados.‣ É mais intuitivo de aplicar e explicar.‣ É tratado como parte do texto.
  160. 160. Display:Inline-block‣ Propriedade também consistente no cross-browser.‣ No IE7, é simulado por *display:inline e *zoom:1.* isto não é uma nota de rodapé, é um hack pro IE.
  161. 161. Display:Inline-block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aenean vehicula tortor vitae eros pulvinar quis consectetur arcu suscipit.Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nunc massa sapien.Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aeneanvehicula tortor vitae eros pulvinar quis consectetur arcu suscipit. display:inline-block
  162. 162. Exemplo de Uso
  163. 163. Exemplo de Uso display:inline-block
  164. 164. Exemplo de Uso display:inline-block
  165. 165. position:absolute
  166. 166. Position:Absolute‣ Propriedade bem consistente cross-browser. Portanto bem mais seguro de se usar do que o float.‣ É sempre utilizado com uma ou mais das seguintes propriedades: top, bottom, left, right.
  167. 167. Position:Absolute <div> com position:relative
  168. 168. Position:Absolute <div> com <div> sem position:relative position
  169. 169. Position:Absolute <div> com <div> sem <div> com position:relative position position:absolute
  170. 170. Position:Absolute top:150px left:300px <div> com <div> sem <div> com position:relative position position:absolute
  171. 171. Exemplo de Uso
  172. 172. Resumo!
  173. 173. Recomendação‣ Tente utilizar na seguinte ordem: 1.não usar nada (css padrão do navegador) 2.display:inline-block 3.position:absolute ... ... 4.float:left
  174. 174. Exercício‣ Fazer o seguinte box:‣ Utilize o jsfiddle.net e o dummyimage.com
  175. 175. 7 Estratégias de Validação
  176. 176. Estratégias de Validação‣ Em vs Px‣ Hacks
  177. 177. 7.1 Em vs. Px
  178. 178. Em vs Px‣ “em” é uma unidade de medida relativa e mais flexível. 1em = 100%, logo 1.02em=102%.‣ “px” é uma unidade de medida absoluta e mais intuitiva. 1px é 1px e ponto final.
  179. 179. Funcionamento do “em”12px 1.2em 0.714em 14,4px 10px
  180. 180. Em vs Px‣ As principais vantagens do “em” são: ‣ O tamanho da página aumenta conforme o tamanho da fonte pré-definida pelo usuário em seu navegador. ‣ A funcionalidade aumentar/diminuir fonte do IE6/7 só funciona com unidades de medidas. ‣ Se adapta melhor em telas pequenas como a de celulares.
  181. 181. Em vs Px‣ As principais desvantagens do “em” são: ‣ Número quebrado gera inconsistência entre navegadores por causa do cálculo de conversão para px. Ex.: 1.33em pode ser 15px em um navegador, e 16px em outro. ‣ Todo valor em “em” tem que ser previamente calculado de acordo com o elemento pai.
  182. 182. Em vs Px‣ Vantagens do “px”: ‣ Previsibilidade: 1px = 1px e pronto! ‣ É a unidade padrão dos designers
  183. 183. Recomendação‣ Use apenas “px.” O desenvolvimento front-end já é instável o suficiente.‣ Caso esteja interessado na flexibilidade do “em,” considere utilizar o “rem.”
  184. 184. 7.2 Hacks
  185. 185. Hacks‣ Evite ao máximo utilizá-los.‣ É completamente possível fazer o mesmo CSS para Firefox, Chrome, Safari e Opera. (excetuando propriedades novas como border-radius e transition)‣ Para IE o transtorno é tão grande que compensa utilizar hacks.
  186. 186. Hacks: Quando usar?‣ O mais recomendado no mercado é fazer conditional comments.‣ Mas a experiência mostra que da seguinte forma é mais manutenível (na ordem): ‣ IE 9-: margin: 15px9; ‣ IE 7-: *margin: 15px; ‣ IE 6-: _margin: 15px;
  187. 187. Validação de BrowsersOrdem de preferência (ou audiência) Ordem de recência 9 8 7
  188. 188. Progressive Enhancement
  189. 189. Referências‣ CSS Compatibility and Internet Explorer (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx)‣ When Can I Use... (http://caniuse.com)‣ CSS Frameworks (video com um overview) (http://www.youtube.com/watch?v=EuhDIRzUJgc)‣ Explorer Exposed! (http://www.positioniseverything.net/explorer.html)
  190. 190. Ferramentas‣ jsFiddle.net (http://jsfiddle.net)‣ Dummy Images (http://dummyimage.com)‣ Lorem Ipsum (http://lipsum.com)
  191. 191. Exemplos e Exercícios‣ Exemplo de Grid (http://jsfiddle.net/lquixada/KVSNn/show/)‣ Exercício do Grid (http://jsfiddle.net/lquixada/qxxkK/show/)‣ Exercício do Box Nas Novelas (http://jsfiddle.net/lquixada/6mWM7/show/)
  192. 192. The EndLeonardo Quixadá

×