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
140
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
43
Membuka Peluang Karier Internasional
isatrio
0
61
Membuat Tema dan Plugin yang Ramah Pengguna
isatrio
0
16
SEO
isatrio
0
36
Front_End_Developer_Weapons_in_GNOME.pdf
isatrio
0
77
A Healthy Everyday Git Commit
isatrio
0
130
Serba-serbi Menerapkan A11y Dalam Situs Web
isatrio
0
260
Understanding How People with Visual Impairments Using Screen Reader
isatrio
0
25
Assistive Technology Built-in on GNOME
isatrio
0
140
Other Decks in Programming
See All in Programming
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
Semantic search with Django and pgvector
pauloxnet
0
230
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
puregoの活用例
aethiopicuschan
0
220
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
360
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
Code Reviews
bkuhlmann
4
870
Elm Form Validation
bkuhlmann
0
500
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
How STYLIGHT went responsive
nonsquared
92
4.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Embracing the Ebb and Flow
colly
78
4.1k
GraphQLとの向き合い方2022年版
quramy
30
12k
Gamification - CAS2011
davidbonilla
76
4.6k
RailsConf 2023
tenderlove
1
530
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Web development in the modern age
philhawksworth
201
10k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
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