Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Custom Properties

Avatar for Matija Marohnić Matija Marohnić
March 13, 2019
Programming
0
40

CSS Custom Properties

Avatar for Matija Marohnić

Matija Marohnić

March 13, 2019
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
38
CSS Specificity
Avatar for Matija Marohnić silvenon
0
30
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
74
React Hooks
Avatar for Matija Marohnić silvenon
0
72
PostCSS
Avatar for Matija Marohnić silvenon
0
44
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
31
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
30

Other Decks in Programming

See All in Programming
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
CSC305 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
550
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
17
3.1k
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
2
350
CSC509 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
210
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
110
CSC509 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
240
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
390
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
3
10k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k

Transcript

  1. CSS Custom Properties a.k.a. CSS Variables

  2. Sass

  3. Sass → CSS

  4. CSS

  5. CSS

  6. What’s the big deal? • part of CSS specification •

    no compilation • dynamic ✨

  7. “Dynamic”…? Behold… *drumroll*

  8. None

  9. Custom Properties CSS Custom Properties are a new feature in

    CSS. I encourage you to experiment with them! 320px 2rem 1rem

  10. Custom Properties CSS Custom Properties are a new feature in

    CSS. I encourage you to experiment with them! 1440px 3rem 1.5rem
  11. None

  12. Giving you some information. Warning you about a potential problem.

    Telling you about a serious error.
  13. None

  14. BTW

  15. JavaScript? Demo time!

  16. Browser support tl;dr no IE

  17. Polyfill? Not really

  18. Fallback? Yes. Browsers ignore
 declarations that they don’t understand.

  19. None

  20. postcss-custom-properties PostCSS plugin that automatically adds fallbacks for CSS Custom

    Properties!

  21. Try using Custom Properties today! --thanks-for: “listening”;