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
52
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
28
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
17
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
55
CSS Specificity
Avatar for Matija Marohnić silvenon
0
59
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
89
React Hooks
Avatar for Matija Marohnić silvenon
0
91
PostCSS
Avatar for Matija Marohnić silvenon
0
61

Other Decks in Programming

See All in Programming
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
7
2.7k
Cloudflare で始める Data Platform
Avatar for Takumi Abe ta93abe
0
170
AI時代のエンジニアリングの原則 / Engineering Principles in the AI ​​Era
Avatar for haru860 haru860
0
1.3k
ソースコード→AST→オペコード、の旅を覗いてみる
Avatar for hideki kinjyo o0h
PRO
1
130
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
Sans tests, vos agents ne sont pas fiables
Avatar for Nathan Abondance nabondance
0
130
Spec Driven Development | AI Summit Vilnius
Avatar for Daniel Sogl danielsogl
PRO
1
160
AI Agent と正しく分析するための環境作り
Avatar for yosh_yumyum yoshyum
2
510
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
1
360
PHPer、Cloudflare に引っ越す
Avatar for Suguru Oki / スー suguruooki
2
220
Lightning-Fast Method Calls with Ruby 4.1 ZJIT / RubyKaigi 2026
Avatar for Takashi Kokubun k0kubun
3
3.1k
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
0
120

Featured

See All Featured
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
310
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.9k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
590
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
200

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