Front-end treinamento html/css

1,927 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,927
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

  • Citar o exemplo do Wagner, de que não podia representar dados tabulados usando tabela; Busca por atender um maior número de browser e dispositivos.
  • IE6, IE7 e IE8 passam a funcionar em Quircksmode (IE 5.5);
  • <img /> no ie 6 e 7 precisam de block; boxmodel tradicional a largura inclui padding e borda; inputs no IE 6 e Mozilla funcionam em quircksmode sempre. Para corrigir no Firefox usar: -moz-box-sizing: content-box
  • Melhorar a experiência sem prejudicar browsers antigos; citar camadas markup, apresentação e comportamento; Tecnicas com msm objetivos mas funfam diferentes.
  • Alguns elementos que possuem haslayout = true: html, body, table, iframe, embed, object; Quando =- false pode causar diversos problemas, como: bugs com float, props basicas de boxes, construção de listas, script...;




  • E > F: filhos diretos; E + F: primeiro irmao; E ~ F: todos irmãos



  • Falar sobre o hack, com o :after, usado no cma para correcao do bug com o float;



  • Front-end treinamento html/css

    1. 1. Padrões web na globo.com com o fein
    2. 2. Por que?
    3. 3. Doctype. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. 4. Doctype. • boxmodel • margin: auto e width: auto; • img !important • over ow: visible; !important • width: value; em elementos inline • <input />
    5. 5. Progressive enhacement & graceful degradation
    6. 6. has layout
    7. 7. htmelê • Estrutura: html, head, title, script, link, body • Headings • Pouco usadas: em, strong, abbr, cite, address
    8. 8. htmelê • inline X block • listas • tabelas • formulários
    9. 9. CSS... let’s see • link vs @import • sintaxe • unidades de medida • position • oat • over ow
    10. 10. CSS... let’s see • link vs @import • tipos de midia • sintaxe • unidades de medida • position • oat • over ow
    11. 11. Seletores no cda. • [att^=val] - pre x • [att*=val] - substring • [att$=val] - suffix • E > F {} • E + F {} • E ~ F {}
    12. 12. Seletores no cda e cma. • * • .class.class • [att^=val] - pre x • [att*=val] - substring • [att$=val] - suffix • E > F {} • E + F {} • E ~ F {}
    13. 13. Pseudo-classes no cda. • element: rst-child • element:hover
    14. 14. Pseudo-classes no cma. • element: rst-child • element:hover • element:active • element:focus
    15. 15. Pseudo-elementos no cma. • no cda chora =/ • :after • :before
    16. 16. Feio, o que eu não posso fazer? • !important • hacks • css expressions • seletor * • mais de 3/4 niveis de seleção
    17. 17. Feio, o que eu devo fazer? • chamadas para estilos sempre no topo • não usar camel case (usar - ou _) • semantica (evitar: siglas; nomes de elementos HTML etc) • usar pre xos, su xos • não usar números, caracteres especias • evitar nomes muito grandes
    18. 18. Feio, o que eu devo fazer? • sempre em Portugues (CDA) • ordem alfabética; • quebra de linha nas propriedades; • reuso de prop. entre seletores; • arquivos por componente; • a ordem é importante;

    ×