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
47

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
10
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
50
CSS Specificity
Avatar for Matija Marohnić silvenon
0
48
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
81
React Hooks
Avatar for Matija Marohnić silvenon
0
85
PostCSS
Avatar for Matija Marohnić silvenon
0
47
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
51

Other Decks in Programming

See All in Programming
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
120
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
Avatar for monochromegane monochromegane
4
430
maplibre-gl-layers - 地図に移動体たくさん表示したい
Avatar for Kouji Matsui kekyo
PRO
0
290
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
590
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
350
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.4k
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.5k
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
6
1.8k
Codex の「自走力」を高める
Avatar for yorifuji yorifuji
0
1.2k
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
300
ロボットのための工場に灯りは要らない
Avatar for watany watany
10
3k
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.1k

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
400
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
190
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
140
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
640
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
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”;