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
67
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
Enterprise Web App. Development (1): Build Tool Training Ver. 5
Avatar for Koichi NAKAGAWA knakagawa
1
120
Dissecting and Reconstructing Ruby Syntactic Structures
Avatar for ydah ydah
3
2.1k
The Implementations of Advanced LR Parser Algorithm
Avatar for Junichi Kobayashi junk0612
2
1.4k
Amazon CloudWatchの地味だけど強力な機能紹介！
Avatar for Tsuyoshi Ito itotsum
0
240
By the way Google Cloud Next 2025に行ってみてどうだった
Avatar for Kento.Yamada ymd65536
0
120
Lambda(Python)の リファクタリングが好きなんです
Avatar for komakichi komakichi
4
250
KANNA Android の技術的課題と取り組み
Avatar for Yosuke Watanabe watabee
0
200
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
130
Носок на сок
Avatar for Bo0oM bo0om
0
1.2k
生成AIで知るお願いの仕方の難しさ
Avatar for uutan1108 ohmori_yusuke
1
110
VitestのIn-Source Testingが便利
Avatar for taro taro28
8
2.4k
Flutterでllama.cppをつかってローカルLLMを試してみた
Avatar for sakuraidayo sakuraidayo
0
130

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
184
28k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k

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