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
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
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
200
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
460
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
5
1.1k
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
180
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
0
200
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
0
560
モジュラモノリスにおける境界をGoのinternalパッケージで守る
Avatar for magavel magavel
0
3.1k
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
2
2.1k
Claude Code、ちょっとした工夫で開発体験が変わる
Avatar for Toranosuke Minamikawa tigertora7571
0
180
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
430
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.1k

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
750
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
130
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
740
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
5k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
300

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