Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Custom Properties

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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ć
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
9
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
48
CSS Specificity
Avatar for Matija Marohnić silvenon
0
46
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
78
React Hooks
Avatar for Matija Marohnić silvenon
0
84
PostCSS
Avatar for Matija Marohnić silvenon
0
45
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
48

Other Decks in Programming

See All in Programming
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
410
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
260
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.5k
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.3k
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.4k
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.3k
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
130

Featured

See All Featured
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
49
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
65
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
130
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450

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