Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS Custom Properties

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
45
CSS Specificity
Avatar for Matija Marohnić silvenon
0
35
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
80
PostCSS
Avatar for Matija Marohnić silvenon
0
45
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
44

Other Decks in Programming

See All in Programming
宅宅自以為的浪漫：跟 AI 一起為自己辦的研討會寫一個售票系統
Avatar for 高見龍 eddie
0
490
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
110
手軽に積ん読を増やすには？/読みたい本と付き合うには？
Avatar for hideki kinjyo o0h
PRO
1
170
認証・認可の基本を学ぼう後編
Avatar for kaza kouyuume
0
180
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
29k
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
Avatar for Kazuki Hara harappa80
0
300
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
140
Cell-Based Architecture
Avatar for Luram Archanjo larchanjo
0
110
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
Avatar for Chris Richardson cer
PRO
0
320
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
120
ローターアクトEクラブ アメリカンナイト：川端 柚菜 氏（Japan O.K. ローターアクトEクラブ 会長）:2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
720
ゲームの物理 剛体編
Avatar for Fadis fadis
0
320

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k

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