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
55
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
31
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
24
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
160
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
170
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
57
CSS Specificity
Avatar for Matija Marohnić silvenon
0
64
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
93
React Hooks
Avatar for Matija Marohnić silvenon
0
95
PostCSS
Avatar for Matija Marohnić silvenon
0
66

Other Decks in Programming

See All in Programming
SLOをサービス品質の共通言語にするために 取り組んできたこと
Avatar for wakanaction wakana0222
0
510
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
170
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
Avatar for sushichan044 sushichan044
0
220
使用 Meilisearch 建立新聞搜尋工具
Avatar for johnroyer johnroyer
0
150
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
110
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
140
symfony/aiとlaravel/boost
Avatar for Hiromi Hishida 77web
0
130
yield再入門 #phpcon
Avatar for hideki kinjyo o0h
PRO
0
480
PHP初心者セッション2026　〜生成AIでは見えない裏側を知る：今だからLAMPを通して仕組みを学ぶ〜
Avatar for Hideo Kashioka kashioka
0
490
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
100
なぜ関数型プログラミングで「型」と「証明」が語られるのか #fp_matsuri
Avatar for Takuma Kajikawa kajitack
3
950
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
Avatar for Masahiro Watanabe cottpan
1
140

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
350
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
HDC tutorial
Avatar for Michiel Stock michielstock
2
750
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
390
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
220
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
450
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
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”;