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

CSS Custom Properties

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Matija Marohnić Matija Marohnić
March 13, 2019
Programming
51
0

CSS Custom Properties

Avatar for Matija Marohnić

Matija Marohnić

March 13, 2019

More Decks by Matija Marohnić

See All by Matija Marohnić
oxlint & oxfmt: linting and formatting from the future
Avatar for Matija Marohnić silvenon
0
25
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
13
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
150
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
54
CSS Specificity
Avatar for Matija Marohnić silvenon
0
52
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
86
React Hooks
Avatar for Matija Marohnić silvenon
0
91
PostCSS
Avatar for Matija Marohnić silvenon
0
55

Other Decks in Programming

See All in Programming
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
330
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
Avatar for memory m3m0r7
PRO
0
380
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
4
100
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
320
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
870
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k
Go_College_最終発表資料__外部公開用_.pdf
Avatar for xe-pc23 xe_pc23
0
150
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
850
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
170
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.3k
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
Avatar for higaki higaki_program
0
190
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
140

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
110
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
480
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
760
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k

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