css { styles: oh-yeah; size: extended; }

Presented at Encontro Anual de TI - Frederico Westphalen, RS - Brazil

CSS é uma linguagem declarativa extremamente permissiva e democrática. Ela dificilmente joga exceções, e permite que um iniciante crie coisas desde os primeiros passos. Mas isso não quer dizer que CSS seja fácil, muito menos que não existem boas práticas. Nesta talk, vamos aprender boas práticas, features pouco usadas que poderiam poupar algum trabalho e até alguns hacks

Transcript

1. #CSS { styles: oh-yeah; } @AtilaFassina size: extended;
2. atilafassina.com | front-end developer
3. .image { 58.2Kb 113Kb
4. 5.1Kb 27.5Kb .image { background-image: url(‘http://domain.com/image.png’); height: 60px; width: 40px; display: inline-block; }
5. “CSS takes a day to learn, but a lifetime to master.” -- Bruce Lee
6. selector rendering
7. HTML CSS inside outside right left
8. <nav class=”my-block”> <ul> <li> <span>...</span> </li> </ul> </nav> nav.my-block ul li span { /* my styles */ } Pega todos span no DOM Pega todos li contendo span Pega todos ul contendo li Pega todos .my-block contendo ul Pega todos .my-block que são nav Renderiza os estilos \o/
9. <nav class=”my-block”> <ul> <li> <span>...</span> </li> </ul> </nav> .my-block span { /* my styles */ } Pega todos span no DOM Pega todos .my-block contendo span Renderiza os estilos \o/
10. :pseudo-class ::pseudo-element
11. :pseudo-classes informações fora do documento http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-classes :hover :active :focus :visited :link :target :lang() :not() :root :checked :nth-child() :first-child :last-child :last-of-type :first-of-type
12. ::pseudo-elements abstrações além da linguagem do documento conteúdo não existe na source do documento http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements ::first-line ::first-letter ::before ::after
13. retro-compatibilidade http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements :first-line :first-letter :before :after
14. combinators 9+
15. Child selector (>) Seleciona o filho direto do elemento div > p { font-size: 1.5rem; }
16. Adjacent Sibling (+) Seleciona o elemento imediatamente adjacente div + p { font-size: 1.5rem; }
17. General Sibling (~) Seleciona qualquer elemento adjacente div ~ p { font-size: 1.5rem; }
18. border-radius 9+
19. border-radius: 10px
20. border-radius: 10px 50% 2em 100px
21. border-radius: 10px 50% 2em 100px / 10px
22. border-radius: 10px 50% 2em 100px / 10px 25% 5em 75px
23. % height % width x y
24. border-radius: x1 x2 x3 x4 / y1 y2 y3 y4 x4 y4 x1 y1 x2 y2 y3 x3 Se não houver / o valor de y é 1
25. @font-face
26. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
27. @font-face { font-family: 'Ubuntu'; src: url($font-url + 'ubuntu/ubuntu-normal.woff2') format('woff2'), url($font-url + 'ubuntu/ubuntu-normal.woff') format('woff'); font-weight: normal; font-style: normal; }
28. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
29. @font-face { font-family: 'Ubuntu'; src: url($font-url + 'ubuntu/ubuntu-normal.woff2') format('woff2'), url($font-url + 'ubuntu/ubuntu-normal.woff') format('woff'), url($font-url + 'ubuntu/ubuntu-normal.eot) format(eot), url($font-url + 'ubuntu/ubuntu-normal.svg) format(svg); font-weight: normal; font-style: normal; }
30. CSS3111 “Unkown error”
31. CSS3111 FontForge
32. FontForge CSS3111
33. html::before { content: 'foo'; position: fixed; top: -5rem; font: 0/0 'MyFont'; }
35. CSS .icon { width: 16px; height: 16px; background-color: url('icon.svg'); }
36. CSS .icon { width: 16px; height: 16px; background-color: url('data:image/svg+xml;base64,PHN2Zy...8+PC9zdmc+'); }
37. HTML <img src=”/src/icon.svg” alt=”my-icon” />
38. HTML <img src=”data:image/svg+xml;base64,PHN2Zy... 8+PC9zdmc+'” alt=”my-icon” />
39. HTML <svg> <path d=”M126.948,179.721c0...”/> </svg>
40. clown car technique DEMO
41. DEMO
42. maxwellito.github.io/vivus/
43. snapsvg.io
44. null transform hack
45. transform: translate3d(0,0,0); transform: translateZ(0); renderiza elemento através da GPU Graphics Processing Unit
46. “Every magic comes with a price.” -- Rumplstilskin
47. Processamento de GPU limitado Mobile
48. will-change
49. will-change: [[prop1]],[[prop2]],...; Otimiza processamento das modificações
50. - will-change: all-the-things;
51. -
52. Otimizações podem demandar muito processamento
53. Não é possível otimizar tudo de uma vez.
54. Não é instantâneo!
55. Efeitos Colaterais novo stacking context novo containing block
58. https://bugzilla.mozilla.org/show_bug.cgi?id=961871
59. meetup.org/FEMUG-RS
60. @AtilaFassina AtilaFassina.com hey@AtilaFassina.com Grazie