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
39

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
26
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
71
React Hooks
Avatar for Matija Marohnić silvenon
0
69
PostCSS
Avatar for Matija Marohnić silvenon
0
42
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
29
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
27

Other Decks in Programming

See All in Programming
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
9.5k
事業戦略を理解してソフトウェアを設計する
Avatar for 増田 亨 masuda220
PRO
21
5.8k
Javaに鉄道指向プログラミング (Railway Oriented Pro　gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
Avatar for takumi.okamoto cocet33000
2
520
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
Avatar for tomohiko.kuzuba tomohiko9090
0
130
型安全RESTで爆速プロトタイピング – Hono RPC実践
Avatar for tacke tacke_jp
0
110
人には人それぞれのサービス層がある
Avatar for shimabox shimabox
3
660
Parallel::Pipesの紹介
Avatar for Shoichi Kaji skaji
2
900
生成AIで日々のエラー調査を進めたい
Avatar for aboy yuyaabo
0
480
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
110
Javaのルールをねじ曲げろ！禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
Avatar for nrs nrslib
3
1.9k
機械学習って何？ 5分で解説頑張ってみる
Avatar for Kazuki Ishikawa kuroneko2828
0
190
ReadMoreTextView
Avatar for Sungyong An fornewid
0
250

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
183
22k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
123
52k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k

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