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
67
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
41
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
32
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
63
CSS Specificity
Avatar for Matija Marohnić silvenon
0
72
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
99
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
67

Other Decks in Programming

See All in Programming
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
420
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
180
AHC070解法紹介
Avatar for eijirou eijirou
0
120
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
250
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
150
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.3k
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
120
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
490
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
890
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
1
1k

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
250
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
320
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
320
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
330
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
390
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
600

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