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
56
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
31
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
25
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
160
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
180
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
58
CSS Specificity
Avatar for Matija Marohnić silvenon
0
64
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
93
React Hooks
Avatar for Matija Marohnić silvenon
0
98
PostCSS
Avatar for Matija Marohnić silvenon
0
66

Other Decks in Programming

See All in Programming
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
9
5k
その節約、円になってますか？
Avatar for isamu asakawa isamumumu
1
700
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.4k
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
260
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
220
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
490
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
370
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
370
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
230
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
280
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
18k
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
270

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Docker and Python
Avatar for Tania Allard trallard
47
4.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
860
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Done Done
Avatar for chrislema chrislema
186
16k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
It's Worth the Effort
Avatar for 3n 3n
188
29k

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