Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS Custom Properties

Avatar for Matija Marohnić Matija Marohnić
March 13, 2019
Programming
76
0

CSS Custom Properties

Avatar for Matija Marohnić

Matija Marohnić

March 13, 2019

More Decks by Matija Marohnić

See All by Matija Marohnić
oxlint & oxfmt: linting and formatting from the future
Avatar for Matija Marohnić silvenon
0
54
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
37
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
180
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
70
CSS Specificity
Avatar for Matija Marohnić silvenon
0
80
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
110
React Hooks
Avatar for Matija Marohnić silvenon
0
110
PostCSS
Avatar for Matija Marohnić silvenon
0
76

Other Decks in Programming

See All in Programming
Goコンパイラを作ってGoをもっと理解する / Build a Go compiler to better understand Go
Avatar for ikura-hamu ikura_hamu
0
110
AI Augmentation Techniques with Liberty
Avatar for ivargrimstad ivargrimstad
0
300
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
200
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
Avatar for kasacchiful kasacchiful
PRO
0
270
Getting Started with Vibe Coding
Avatar for Michael Cheng miccheng
0
170
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
1.2k
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
770
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
190
[DroidKnights 2026] Workflow AX: From Auto-Documented Policies to E2E Testing
Avatar for raeminKang raeminkang
0
460
느린 네트워크와 저사양 디바이스 사용자를 위한 웹뷰 로딩 시간 개선기
Avatar for kmkim kmkim
0
140
8年前のNode.jsを動かして分かった、npm installの裏側
Avatar for Keisuke Ikeda keisukeikeda
0
120
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
Avatar for Kitano Yuichi kitano_yuichi
1
280

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
990
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
70
68k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
970
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5.6k

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