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
37

CSS Custom Properties

Avatar for Matija Marohnić

Matija Marohnić

March 13, 2019
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
130
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
150
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
33
CSS Specificity
Avatar for Matija Marohnić silvenon
0
25
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
69
React Hooks
Avatar for Matija Marohnić silvenon
0
68
PostCSS
Avatar for Matija Marohnić silvenon
0
41
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
28
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
26

Other Decks in Programming

See All in Programming
DevTalks 25 - Create your own AI-infused Java apps with ease
Avatar for Kevin Dubois kdubois
2
120
#QiitaBash TDDでAIに設計イメージを伝える
Avatar for sigma ryosukedtomita
2
1.6k
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
Avatar for TVer Inc. techtver
PRO
0
710
Blueskyのプラグインを作ってみた
Avatar for Hakkadaikon hakkadaikon
1
280
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
Avatar for yoshiyoshifujii yoshiyoshifujii
0
160
從零到一：搭建你的第一個 Observability 平台
Avatar for Blueswen blueswen
0
220
當開發遇上包裝： AI 如何讓產品從想法變成商品
Avatar for Caesar Chi clonn
0
2.5k
推論された型の移植性エラーTS2742に挑む
Avatar for teamLab teamlab
PRO
0
150
「兵法」から見る質とスピード
Avatar for ICKX ickx
0
200
バランスを見極めよう！実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
Avatar for whatasoda whatasoda
2
770
【TSkaigi 2025】これは型破り？型安全？ 真実はいつもひとつ！（じゃないかもしれない）TypeScript クイズ〜〜〜〜！！！！！
Avatar for Kimita Shoichi kimitashoichi
1
300
TypeScriptのmoduleオプションを改めて整理する
Avatar for おおいし bicstone
4
420

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
34
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k

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