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ć
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
6
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
41
CSS Specificity
Avatar for Matija Marohnić silvenon
0
32
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
74
PostCSS
Avatar for Matija Marohnić silvenon
0
45
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
34

Other Decks in Programming

See All in Programming
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
18
9.5k
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
190
オンデバイスAIとXcode
Avatar for リョウ ryodeveloper
0
390
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
870
contribution to astral-sh/uv
Avatar for Shunsuke Tsuchiya shunsock
0
580
マンガアプリViewerの大画面対応を考える
Avatar for kk__777 kk__777
0
450
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
Avatar for Márton Braun zsmb
0
450
AI Agent 時代的開發者生存指南
Avatar for 高見龍 eddie
4
2.3k
MCPサーバー「モディフィウス」で変更容易性の向上をスケールする / modifius
Avatar for MinoDriven minodriven
4
770
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
400
AIのバカさ加減に怒る前にやっておくこと
Avatar for k2moons blueeventhorizon
0
150
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
Avatar for Hans-Peter Grahsl hpgrahsl
0
120

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k

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”;