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
40

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
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
38
CSS Specificity
Avatar for Matija Marohnić silvenon
0
30
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
73
React Hooks
Avatar for Matija Marohnić silvenon
0
72
PostCSS
Avatar for Matija Marohnić silvenon
0
43
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
31
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
29

Other Decks in Programming

See All in Programming
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
Avatar for azukiazusa azukiazusa1
9
3.7k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
420
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Avatar for una unachang113
4
2.8k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
130
Vue・React マルチプロダクト開発を支える Vite
Avatar for ANDPAD inc andpad
0
110
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
140
Navigating Dependency Injection with Metro
Avatar for Zac Sweers zacsweers
3
240
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
260
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
Avatar for teamLab teamlab
PRO
0
500
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
140
Deep Dive into Kotlin Flow
Avatar for Matsuda Jumpei jmatsu
1
310
Cache Me If You Can
Avatar for RyuNen344 ryunen344
2
670

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
51
5.6k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
810
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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