Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Resep Rahasia CSS Custom Properties
Search
Yudhi Satrio
June 21, 2020
Programming
2
180
Resep Rahasia CSS Custom Properties
Mengatur strategi dalam menerapkan CSS Variable agar lebih dinamis
Yudhi Satrio
June 21, 2020
Tweet
Share
More Decks by Yudhi Satrio
See All by Yudhi Satrio
Membangun Situs Web yang Ramah Aksesibilitas
isatrio
0
110
Membuka Peluang Karier Internasional
isatrio
0
81
Membuat Tema dan Plugin yang Ramah Pengguna
isatrio
0
25
SEO
isatrio
0
51
Front_End_Developer_Weapons_in_GNOME.pdf
isatrio
0
82
A Healthy Everyday Git Commit
isatrio
0
130
Serba-serbi Menerapkan A11y Dalam Situs Web
isatrio
0
360
Understanding How People with Visual Impairments Using Screen Reader
isatrio
0
31
Assistive Technology Built-in on GNOME
isatrio
0
160
Other Decks in Programming
See All in Programming
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
520
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
楽して成果を出すためのセルフリソース管理
clipnote
0
190
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
個人軟體時代
ethanhuang13
0
330
OSS開発者という働き方
andpad
5
1.7k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
820
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Code Review Best Practice
trishagee
71
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Into the Great Unknown - MozCon
thekraken
40
2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Side Projects
sachag
455
43k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
https://app.sli.do/event/46fzj4qa
Resep Rahasia CSS Custom Properties Oleh isatrio - CC-by-SA 4.0
license
Selamat datang developer LEMAH yang kalau bikin situs web pakai
Bootstrap -- Pinjem Coki Anwar
CSS itu mudah!
Siapa yang bilang?
CSS itu “TRICKY”!
Saya adalah tim “CSS adalah bahasa pemrograman”
1. CSS enggak punya variabel 2. CSS itu bahasa komputer
untuk menginstruksikan komputer untuk merender gaya
Saya adalah orang pertama yang skeptis dengan variabel css, karena
saya adalah pengguna css-preprocessor
Variabel dari CSS Preprocessor
Assign variabel
https://codepen.io/isatrio/pen/yLeMLPg Hasil kompilasi
CSS Custom Properties Variabel
Assign variabel Nilai bawaan bila nilai variabel kosong Deklarasi nilai
variabel
Implementasi Variabel
None
None
Tidak valid
Invalid Invalid
Valid
None
Preprocessor variabel itu statis
None
Variabel CSS itu dinamis
None
Global dan Lokal
None
Terkadang variabel lokal juga masih perlu diimplementasikan
Mengaduk ramuan variabel statis dengan variabel dinamis
Variabel sass statis Variabel css dinamis Implementasi nilai variabel
“Jangan lakukan pada saat runtime, lakukanlah pada saat mendesain” --
Bill Sourour
None
None
Pisahkan antara desain dan logika
None
None
Jangan mengubah tema warna secara langsung
None
Memperbarui nilai menggunakan JS
None
None
Komponen VueJS https://codepen.io/isatrio/pen/MWKpjar
Referensi 1. Smashing Book 6: New Frontiers In Web Design
Bab “A Strategy Guide to CSS Custom Properties” oleh MIKE RIETHMULLER 2. Using CSS custom properties MDN 3. Don’t do it at runtime. Do it at design time oleh Bill Sourour