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
80
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
350
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
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
OSS開発者という働き方
andpad
5
1.6k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
個人軟體時代
ethanhuang13
0
280
More Approvers for Greater OSS and Japan Community
tkikuc
1
100
🔨 小さなビルドシステムを作る
momeemt
2
630
AIでLINEスタンプを作ってみた
eycjur
1
220
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
200
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Faster Mobile Websites
deanohume
309
31k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Visualization
eitanlees
147
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
4 Signs Your Business is Dying
shpigford
184
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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