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
43

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
10
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
150
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
49
CSS Specificity
Avatar for Matija Marohnić silvenon
0
47
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
80
React Hooks
Avatar for Matija Marohnić silvenon
0
85
PostCSS
Avatar for Matija Marohnić silvenon
0
46
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
50

Other Decks in Programming

See All in Programming
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
130
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
150
CSC307 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
690
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
2.5k
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
190
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
820
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
0
200
Agent Skills Workshop - AIへの頼み方を仕組み化する
Avatar for Gota gotalab555
13
7.5k
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
2.1k
LangChain4jとは一味違うLangChain4j-CDI
Avatar for Kenji Kazumura kazumura
1
130
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
640
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
Avatar for hisuzuya hisuzuya
4
450

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
91
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
210
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
80
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
50k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
220
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k

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