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
28
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
72
React Hooks
Avatar for Matija Marohnić silvenon
0
71
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
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
190
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
190
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
230
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
850
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
2k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
260
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
Avatar for irof irof
1
300
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
Avatar for Koichi NAKAGAWA knakagawa
1
120
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
410
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
120
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
0
310
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
Avatar for yimajo yimajo
2
210

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
700
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k

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