Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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ć
Goodbye jsdom/happy-dom, hello Vitest Browser Mode!
Avatar for Matija Marohnić silvenon
0
9
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
46
CSS Specificity
Avatar for Matija Marohnić silvenon
0
36
Make your JavaScript projects more accessible to newcomers
Avatar for Matija Marohnić silvenon
0
76
React Hooks
Avatar for Matija Marohnić silvenon
0
81
PostCSS
Avatar for Matija Marohnić silvenon
0
45
Maintainable Integration Testing in React
Avatar for Matija Marohnić silvenon
0
45

Other Decks in Programming

See All in Programming
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
150
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
5
2.3k
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
120
Python札幌 LT資料
Avatar for t3tra t3tra
6
1k
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
140
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
280
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
310
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
1.7k
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
Avatar for suna-big sunabig
0
170
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
960
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
Avatar for Tomofumi Kondo tomokon
0
140
AIコーディングエージェント（NotebookLM）
Avatar for kondai kondai24
0
230

Featured

See All Featured
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
330
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
160
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
190
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
1.9k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
29
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k

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