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
40

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
160
Studying Strapi: an open source head headless CMS
Avatar for Matija Marohnić silvenon
0
38
CSS Specificity
Avatar for Matija Marohnić silvenon
0
30
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
73
React Hooks
Avatar for Matija Marohnić silvenon
0
72
PostCSS
Avatar for Matija Marohnić silvenon
0
44
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
31
Writing Codemods with jscodeshift
Avatar for Matija Marohnić silvenon
0
29

Other Decks in Programming

See All in Programming
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
Avatar for Takashi uhucream
0
180
SpecKitでどこまでできる？ コストはどれくらい？
Avatar for Tech Leverages leveragestech
0
680
クラシルを支える技術と組織
Avatar for raku rakutek
0
200
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
Avatar for ternbusty ternbusty
2
170
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
160
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
4
3.9k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
120
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
1
430
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
Avatar for Atsuya Sato natmark
2
490
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
150
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
430

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k

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