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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yudhi Satrio
June 21, 2020
Programming
2
190
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
120
Membuka Peluang Karier Internasional
isatrio
0
86
Membuat Tema dan Plugin yang Ramah Pengguna
isatrio
0
26
SEO
isatrio
0
60
Front_End_Developer_Weapons_in_GNOME.pdf
isatrio
0
85
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
32
Assistive Technology Built-in on GNOME
isatrio
0
190
Other Decks in Programming
See All in Programming
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
CSC307 Lecture 06
javiergs
PRO
0
690
今から始めるClaude Code超入門
448jp
8
8.9k
CSC307 Lecture 10
javiergs
PRO
1
660
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
CSC307 Lecture 08
javiergs
PRO
0
670
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
170
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
86
How to build a perfect <img>
jonoalderson
1
4.9k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Prompt Engineering for Job Search
mfonobong
0
160
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
3.9k
Designing for Performance
lara
610
70k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
230
[SF Ruby Conf 2025] Rails X
palkan
1
760
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
910
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