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
94
Membuka Peluang Karier Internasional
isatrio
0
80
Membuat Tema dan Plugin yang Ramah Pengguna
isatrio
0
24
SEO
isatrio
0
50
Front_End_Developer_Weapons_in_GNOME.pdf
isatrio
0
81
A Healthy Everyday Git Commit
isatrio
0
130
Serba-serbi Menerapkan A11y Dalam Situs Web
isatrio
0
350
Understanding How People with Visual Impairments Using Screen Reader
isatrio
0
30
Assistive Technology Built-in on GNOME
isatrio
0
160
Other Decks in Programming
See All in Programming
エラーって何種類あるの?
kajitack
5
310
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
CursorはMCPを使った方が良いぞ
taigakono
1
180
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
410
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
童醫院敏捷轉型的實踐經驗
cclai999
0
190
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
470
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Ace a Technical Interview
jacobian
277
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Cult of Friendly URLs
andyhume
79
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
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