Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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 kis9a kis9a
0
730
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
330
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
8
2.4k
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
400
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
190
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
830
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
360
WebRTC と Rust と 8K 60fps
Avatar for tnoho tnoho
2
2k
30分でDoctrineの仕組みと使い方を完全にマスターする / phpconkagawa 2025 Doctrine
Avatar for Takashi Kanemoto ttskch
4
870
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
220
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
150
TUIライブラリつくってみた / i-just-make-TUI-library
Avatar for kazto kazto
1
380

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k

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