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
69
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
44
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
34
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
170
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
65
CSS Specificity
Avatar for Matija Marohnić silvenon
0
73
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
100
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
68

Other Decks in Programming

See All in Programming
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
310
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.1k
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
230
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.1k
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
220
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1.2k
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
190
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
310
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
5.3k
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
120
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
380

Featured

See All Featured
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
530
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
340
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
390
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k

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