Descobrindo o futuro do CSS com cssnext

Apresentação sobre o cssnext, um transpiler para CSS Nível 4, bem como algumas de suas funcionalidades (custom media queries, custom selectors, color, entre outras).

Transcript

1. Descobrindo o futuro do CSS com cssnext Lívia Amorim
2. Lívia Amorim UI Developer, Resultados Digitais @liviavamorim
4. A CRIAÇÃO DE NOVAS PROPRIEDADES INSTALANDO CSSNEXT FUNCIONALIDADES DO CSS NÍVEL 4 1 2 3
5. A CRIAÇÃO DE NOVAS PROPRIDADES
6. Estudo
7. Diego Eis (Tableless) - 01/01/2006 O nível 3 do CSS ainda está em desenvolvimento. Mas, sabemos que as facilidades serão muitas, como por exemplo, criar bordas arredondadas sem o uso de imagens, ou definir duas imagens como background de um mesmo objeto. “
8. Estudo Implementação
9. Estudo Implementação Espera eterna
11. O USUÁRIO
12. INSTALANDO O CSSNEXT
14. $ npm install --save-dev grunt-cssnext
15. $ grunt.loadNpmTasks("grunt-cssnext")
16. grunt.initConfig({ cssnext: { options: { sourcemap: true }, dist: { files: { "dist/index.css": "src/index.css" } } } }) grunt.loadNpmTasks("grunt-cssnext") grunt.registerTask("default", ["cssnext"])
18. FUNCIONALIDADES DO CSS NÍVEL 4
19. PSEUDO-CLASSES CUSTOMIZAÇÕES AVANÇADAS FUNCIONALIDADES PARA FILTROS E CORES
20. TODAS ESTAS FUNCIONALIDADES PODEM SER USADAS NO CSSNEXT
21. PSEUDO-CLASSES CUSTOMIZAÇÕES AVANÇADAS FUNCIONALIDADES PARA FILTROS E CORES
22. PSEUDO-CLASSE `:NOT`
23. a:not(:last-child, .cat) { color: purple; }
24. a:not(:last-child):not(.cat) { color: purple; }
25. PSEUDO-CLASSE `:MATCHES`
26. a:matches(:last-child, .cat) { color: purple; }
27. a:last-child, a.cat { color: purple; }
28. PSEUDO-CLASSES CUSTOMIZAÇÕES AVANÇADAS FUNCIONALIDADES PARA FILTROS E CORES
29. CUSTOM SELECTORS
30. @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { margin-top: 0 }
31. h1, h2, h3, h4, h5, h6 { margin-top: 0 }
32. CUSTOM PROPERTY & `VAR()`
33. :root { --mainColor: #FFF } body { background-color: var(--mainColor) }
34. body { background-color: #FFF }
35. CUSTOM MEDIA QUERIES
36. @custom-media --viewport-small (width <= 35.5em); @media (--viewport-small) { body { background-color: red } }
37. @media (max-width: 35.5em) { body { background-color: red } }
38. PSEUDO-CLASSES CUSTOMIZAÇÕES AVANÇADAS FUNCIONALIDADES PARA FILTROS E CORES
39. `COLOR()`
40. a { color: color(red alpha(-10%)) } a:hover { color: color(red blackness(80%)) }
41. a { color: rgba(255, 0, 0, 0.9) } a:hover { color: rgb(51, 0, 0) }
42. `HWB()`
43. a { color: hwb(85, 10%, 10%, 0.5) }
44. a { color: rgba(145, 230, 26, 0.5) }
45. `GRAY()`
46. .cat { color: gray(85) } .cat { color: gray(85, 50%) }
47. .cat { color: rgb(85, 85, 85) } .cat { color: rgba(85, 85, 85, 0.5) }
48. FILTER
49. .blur { filter: blur(4px) } .sepia { filter: sepia(.8) }
50. .blur { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter" ><feGaussianBlur stdDeviation="4" /></filter></svg>#filter'); -webkit-filter: blur(4px); filter: blur(4px); }
52. PERGUNTAS?
53. Obrigada! Descobrindo o futuro do CSS com cssnext Lívia Amorim