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
7
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
76
PostCSS
Avatar for Matija Marohnić silvenon
0
45
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
35

Other Decks in Programming

See All in Programming
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
Avatar for Kotaro7750 kotaro7750
0
240
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
4
1.6k
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
Avatar for shogogg shogogg
1
400
Register is more than clipboard
Avatar for Satoru Kitaguchi satorunooshie
1
460
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
5.7k
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
5
1.3k
OSS開発者の憂鬱
Avatar for Yusuke Wada yusukebe
6
2.8k
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
2
500
競馬で学ぶ機械学習の基本と実践 / Machine Learning with Horse Racing
Avatar for ShoheiMitani shoheimitani
0
360
r2-image-worker
Avatar for Yusuke Wada yusukebe
1
160
CloudflareのSandbox SDKを試してみた
Avatar for syumai syumai
0
130
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
2
830

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
660
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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