css { styles: oh-yeah; }

SS é 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
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. :pseudo-class ::pseudo-element
7. :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
8. ::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
9. retro-compatibilidade http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements :first-line :first-letter :before :after
10. combinators 9+
11. Child selector (>) Seleciona o filho direto do elemento div > p { font-size: 1.5rem; }
12. Adjacent Sibling (+) Seleciona o elemento imediatamente adjacente div + p { font-size: 1.5rem; }
13. General Sibling (~) Seleciona qualquer elemento adjacente div ~ p { font-size: 1.5rem; }
14. border-radius 9+
15. border-radius: 10px
16. border-radius: 10px 50% 2em 100px
17. border-radius: 10px 50% 2em 100px / 10px
18. border-radius: 10px 50% 2em 100px / 10px 25% 5em 75px
19. % height % width x y
20. 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
21. @font-face
22. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
23. @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; }
24. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
25. @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; }
26. CSS3111 “Unkown error”
27. CSS3111 FontForge
28. FontForge CSS3111
29. html::before { content: 'foo'; position: fixed; top: -5rem; font: 0/0 'MyFont'; }
30. null transform hack
31. transform: translate3d(0,0,0); transform: translateZ(0); renderiza elemento através da GPU Graphics Processing Unit
32. “Every magic comes with a price.” -- Rumplstilskin
33. Processamento de GPU limitado Mobile
34. will-change
35. will-change: [[prop1]],[[prop2]],...; Otimiza processamento das modificações
36. - will-change: all-the-things;
37. -
38. Otimizações podem demandar muito processamento
39. Não é possível otimizar tudo de uma vez.
40. Não é instantâneo!
42. Efeitos Colaterais - novo stacking context - novo containing block
43. @AtilaFassina AtilaFassina.com hey@AtilaFassina.com Grazie