Recommandé
Recommandé
Contenu connexe
Similaire à Padrões web na globo.com
Similaire à Padrões web na globo.com (20)
Padrões web na globo.com
- 1. Padrões web na globo.com com o fein
- 2. Por que?
- 3. Doctype. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 4. Doctype. • boxmodel • margin: auto e width: auto; • img !important • over ow: visible; !important • width: value; em elementos inline • <input />
- 5. Progressive enhacement & graceful degradation
- 6. has layout
- 7. htmelê • Estrutura: html, head, title, script, link, body • Headings • Pouco usadas: em, strong, abbr, cite, address
- 8. htmelê • inline X block • listas • tabelas • formulários
- 9. CSS... let’s see • link vs @import • sintaxe • unidades de medida • position • oat • over ow
- 10. CSS... let’s see • link vs @import • tipos de midia • sintaxe • unidades de medida • position • oat • over ow
- 11. Seletores no cda. • [att^=val] - pre x • [att*=val] - substring • [att$=val] - suffix • E > F {} • E + F {} • E ~ F {}
- 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. Pseudo-classes no cda. • element: rst-child • element:hover
- 14. Pseudo-classes no cma. • element: rst-child • element:hover • element:active • element:focus
- 15. Pseudo-elementos no cma. • no cda chora =/ • :after • :before
- 16. Feio, o que eu não posso fazer? • !important • hacks • css expressions • seletor * • mais de 3/4 niveis de seleção
- 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. 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;
Notes de l'éditeur
- Citar o exemplo do Wagner, de que n&#xE3;o podia representar dados tabulados usando tabela; Busca por atender um maior n&#xFA;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&#xEA;ncia sem prejudicar browsers antigos; citar camadas markup, apresenta&#xE7;&#xE3;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&#xE7;&#xE3;o de listas, script...;
- E > F: filhos diretos; E + F: primeiro irmao; E ~ F: todos irm&#xE3;os
- Falar sobre o hack, com o :after, usado no cma para correcao do bug com o float;