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
70
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
49
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
35
Introduction to Remix
Avatar for Matija Marohnić silvenon
0
180
Cypress vs. Playwright
Avatar for Matija Marohnić silvenon
0
190
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
67
CSS Specificity
Avatar for Matija Marohnić silvenon
0
75
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
100
React Hooks
Avatar for Matija Marohnić silvenon
0
100
PostCSS
Avatar for Matija Marohnić silvenon
0
72

Other Decks in Programming

See All in Programming
Kubernetes祭り #2 OP/ED
Avatar for bells17 bells17
0
110
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
150
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
190
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
200
AI主導のプログラミング学習アプリを作ってみた
Avatar for econanringo econanringo
0
160
パーソナライズPodcastを作った話
Avatar for repunit11 repunit11
0
130
複雑なUIコンポーネントとの ⻑い付き合い⽅：波及するバグからテスト戦略を経て、安全な再設計へ
Avatar for masahiko.asai mixplace
0
380
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
130
AIに “答え“を書かせるのを やめてみた
Avatar for akari ___akari11
0
120
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
370
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
240

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.8k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
260
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.4k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
450
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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