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
52
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
29
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
19
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
55
CSS Specificity
Avatar for Matija Marohnić silvenon
0
62
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
90
React Hooks
Avatar for Matija Marohnić silvenon
0
93
PostCSS
Avatar for Matija Marohnić silvenon
0
65

Other Decks in Programming

See All in Programming
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
450
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
3k
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
120
初めてのRubyKaigiはこう見えた
Avatar for asano jellyfish700
0
410
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.8k
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
160
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
430
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
530
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.5k
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
120
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
Avatar for nrs nrslib
0
240
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
870

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
200
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
760
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
1.1k

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