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
50
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
21
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
11
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
52
CSS Specificity
Avatar for Matija Marohnić silvenon
0
50
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
84
React Hooks
Avatar for Matija Marohnić silvenon
0
88
PostCSS
Avatar for Matija Marohnić silvenon
0
50

Other Decks in Programming

See All in Programming
KagglerがMixSeekを触ってみた
Avatar for Morim morim
0
360
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
310
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
120
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
430
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.5k
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
Avatar for tak tak848
0
300
今こそ押さえておきたい アマゾンウェブサービス（AWS）の データベースの基礎 おもクラ #6版
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
230
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.2k
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.3k
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
140
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
5
2.4k

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.2k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
700
New Earth Scene 8
Avatar for Sydney Stone popppiees
2
2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
170
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
140

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