Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Custom Properties

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

CSS Custom Properties

Avatar for Matija Marohnić

Matija Marohnić

March 13, 2019
Tweet

More Decks by Matija Marohnić

See All by Matija Marohnić
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
140
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
150
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
36
CSS Specificity
Avatar for Matija Marohnić silvenon
0
29
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
72
React Hooks
Avatar for Matija Marohnić silvenon
0
71
PostCSS
Avatar for Matija Marohnić silvenon
0
42
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
30
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
27

Other Decks in Programming

See All in Programming
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
180
Constant integer division faster than compiler-generated code
Avatar for herumi herumi
2
660
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
Avatar for 74th(Atsushi Morimoto) 74th
7
2.9k
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
Avatar for Nealle nealle
0
240
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.7k
State of CSS 2025
Avatar for Benjamin Kott benjaminkott
1
110
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
Avatar for hiyanger hiyanger
13
3.1k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
Avatar for Yuki Yata arfes0e2b3c
0
370
Claude Codeで実装以外の開発フロー、どこまで自動化できるか？失敗と成功
Avatar for ndaDayo.Sugawawa ndadayo
2
170
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
Avatar for mackey0225 mackey0225
2
490
生成AI、実際どう？ - ニーリーの場合
Avatar for Nealle nealle
0
110
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
Avatar for Kuniwak orgachem
PRO
17
3.9k

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.4k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.8k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
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”;