Save 37% off PRO during our Black Friday Sale! »

Descobrindo o futuro do CSS com cssnext

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).

104834d066a0b53f22ed0c8ad0f17e9c?s=128

Lívia Amorim

December 05, 2015
Tweet

Transcript

  1. Descobrindo o futuro do CSS com cssnext Lívia Amorim

  2. Lívia Amorim UI Developer, Resultados Digitais @liviavamorim

  3. None
  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

  10. None
  11. O USUÁRIO

  12. INSTALANDO O CSSNEXT

  13. None
  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"])
  17. None
  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); }
  51. None
  52. PERGUNTAS?

  53. Obrigada! Descobrindo o futuro do CSS com cssnext Lívia Amorim