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
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Gleamという選択肢
comamoca
6
760
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
300
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
340
生成AIで日々のエラー調査を進めたい
yuyaabo
0
640
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
120
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
880
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
350
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Facilitating Awesome Meetings
lara
54
6.4k
KATA
mclloyd
29
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Rails Girls Zürich Keynote
gr2m
94
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Being A Developer After 40
akosma
90
590k
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