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
44
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
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
Django Ninja による API 開発効率化とリプレースの実践
Avatar for Kashun Yoshida kashewnuts
0
700
プログラマのための作曲入門
Avatar for CHEEBOW cheebow
0
500
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
160
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
Avatar for Tomohiko Morita deka_morita
0
160
(Extension DC 2025) Actor境界を越える技術
Avatar for Himeshi teamhimeh
1
100
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
Avatar for Atsuya Sato natmark
0
420
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
Avatar for Shia riseshia
0
130
どの様にAIエージェントと 協業すべきだったのか？
Avatar for Takepepe takefumiyoshii
1
510
CSC305 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
380
2025年版 サーバーレス Web アプリケーションの作り方
Avatar for Hayato Watanabe hayatow
23
25k
SpecKitでどこまでできる？ コストはどれくらい？
Avatar for Tech Leverages leveragestech
0
350

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
208
24k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
880
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
870
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k

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