60+ Pertanyaan dan Jawaban Wawancara CSS Teratas (2026)
Emma Davis
Bersiap untuk wawancara CSS? Saatnya mempertajam pengetahuan Anda tentang dasar-dasar dan lebih dari itu. Memahami Wawancara CSS pertanyaan dapat mengungkap seberapa dalam kandidat memahami struktur desain dan logika gaya.
Karier di bidang pengembangan CSS membuka pintu menuju beragam peluang, mulai dari desain front-end hingga aplikasi web responsif. Dengan pengalaman teknis, keahlian di bidang tertentu, dan kemampuan analisis yang kuat, para profesional dapat menunjukkan keahlian tingkat lanjut yang dihargai oleh para pemimpin tim dan manajer. Pertanyaan dan jawaban ini membantu para pengembang baru, menengah, dan senior dalam menghadapi wawancara dengan percaya diri dan efektif.
Berdasarkan wawasan yang dibagikan oleh lebih dari 85 profesional, termasuk pemimpin teknis, manajer, dan pakar perekrutan, panduan ini menyusun praktik wawancara tepercaya di seluruh industri—memastikan akurasi, relevansi, dan kredibilitas untuk semua tingkat pengalaman.
Pertanyaan dan Jawaban Wawancara CSS Teratas
1) Jelaskan cascade CSS modern, termasuk @layer, spesifisitas, dan urutan sumber.
Kaskade menentukan aturan mana yang “menang” ketika beberapa aturan menargetkan elemen yang sama. Keputusan dibuat berdasarkan tingkat kepentingan ( !important ), asal (agen pengguna, pengguna, penulis), lalu urutan lapisan dari @layer, diikuti oleh spesifisitas, dan terakhir urutan sumber. Menggunakan @layer memungkinkan Anda menentukan tingkatan yang dapat diprediksi seperti reset, basis, komponen, dan utilitas sehingga seluruh kelompok aturan mengesampingkan aturan lainnya tanpa meningkatkan spesifisitas pemilih. Manfaat utamanya adalah kemudahan pemeliharaan; kerugian utamanya adalah urutan lapisan yang salah dapat menyembunyikan bug. Lebih baik memilih pemilih kelas dengan spesifisitas rendah, cadangan !important untuk kebijakan yang disengaja, dan menjaga arsitekturnya tetap mudah dibaca.
Jawab dengan contoh
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 Unduh PDF Gratis: Pertanyaan Wawancara CSS
2) Apa perbedaan antara kueri kontainer dan kueri media, dan di mana Anda akan menggunakan masing-masing?
Kueri kontainer merespons ukuran atau gaya mengandung unsur, membuat komponen sadar diri dan dapat digunakan kembali dalam konteks yang berbeda. Kueri media merespons area pandang atau karakteristik perangkat dan lebih baik untuk perubahan tata letak global. Kueri kontainer memungkinkan kartu, widget, dan modul bersarang untuk beradaptasi secara lokal; kueri media tetap ideal untuk navigasi di seluruh situs atau perubahan shell. Keuntungan kueri kontainer mencakup granularitas yang lebih halus dan lebih sedikit titik henti global; kerugiannya meliputi pengaturan melalui container-type dan pemilihan batas yang cermat.
Perbedaan antara (tabel perbandingan)
| Faktor | Kueri Media | Kueri Kontainer |
|---|---|---|
| Pelatuk | Fitur viewport | Ukuran atau gaya wadah |
| Cakupan | Seluruh halaman | Komponen-lokal |
| Pengaturan | Tidak ada yang tidak bisa ditanyakan | Membutuhkan container-type / nama opsional |
| Terbaik untuk | Titik henti global | Varian kartu atau widget |
Jawab dengan contoh
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) Apa saja ciri-ciri dan manfaat :has(), dan bagaimana perbandingannya dengan :is() dan :where() ?
Kelas semu relasional :has() memilih elemen berdasarkan keturunannya atau pola berikutnya, memungkinkan gaya status induk tanpa JavaSkrip. Ini ampuh untuk grup validasi formulir, status navigasi, atau pengalihan kepadatan. Sebaliknya, :is() dan :where() menyederhanakan daftar pemilih yang panjang; :where() memberikan kontribusi spesifisitas nol, sedangkan :is() berkontribusi pada spesifisitas argumennya yang paling spesifik. Manfaat :has() Meliputi penataan gaya kontekstual dan markup yang lebih bersih; kekurangannya meliputi potensi masalah kinerja jika digunakan dengan pemilih tak terbatas. Cakupannya sempit, dan kombinasikan dengan kelas atau atribut untuk prediktabilitas.
Jawab dengan contoh
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) Di mana Anda akan menerapkan properti kustom CSS untuk tema, dan apa kelebihan dan kekurangannya?
Properti kustom CSS membawa nilai melalui proses cascade, mewarisi secara alami, dan menyelesaikan proses saat runtime, yang menjadikannya ideal untuk tema, mode kepadatan, dan token desain. Properti ini memungkinkan peralihan mode gelap atau pertukaran sistem warna tanpa membangun ulang aset. Keunggulannya meliputi pembaruan dinamis, kolokasi dengan komponen, dan kompatibilitas dengan @layerKekurangannya meliputi ketidaklangsungan untuk penganalisis statis dan kebutuhan untuk merancang fallback. Gunakan token lingkup root untuk semantik global dan token lingkup komponen untuk varian, dan pertahankan nama tetap stabil untuk memungkinkan pemeliharaan jangka panjang.
Jawab dengan contoh
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) Sistem tata letak mana yang cocok untuk masalah mana: Flexbox, Grid, atau Subgrid?
Flexbox optimal untuk satu dimensi penyelarasan dan distribusi sepanjang sumbu tunggal, Grid unggul dalam dua dimensi Penempatan dan kontrol trek eksplisit, sementara Subgrid memungkinkan elemen anak mewarisi trek grid induk untuk penyelarasan yang konsisten di seluruh komponen bersarang. Memilih sistem yang tepat mengurangi penggantian dan meningkatkan keterbacaan. Pola umum adalah Grid untuk bingkai halaman dan dasbor, Flexbox untuk bilah alat dan daftar chip, dan Subgrid untuk menyelaraskan elemen internal seperti metadata kartu ke kolom luar.
Jenis dan perbedaan antara (tabel perbandingan)
| Use Case | Flexbox | kisi | Sub-jaringan |
|---|---|---|---|
| Dimensi | 1-D | 2-D | 2-D melalui trek yang diwariskan |
| Kekuatan | Distribusi, penyelarasan | Area eksplisit, trek berulang | Penyelarasan lintas komponen |
| Pengaturan | Minimal | Tentukan baris/kolom | Diperlukan kisi induk |
| Example | Bilah navigasi, pil | Galeri, dasbor | Footer kartu disejajarkan dengan kisi halaman |
Jawab dengan contoh
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) Apakah sifat-sifat logis meningkatkan internasionalisasi? Jelaskan manfaat dan komprominya.
Properti logis menggantikan arah fisik seperti kiri dan kanan dengan istilah yang relatif terhadap alur seperti awal atau akhir sebaris dan blok. Hal ini membuat satu stylesheet beradaptasi dengan bahasa yang ditulis dari kanan ke kiri dan mode penulisan vertikal tanpa aturan percabangan. Manfaatnya adalah globalisasi yang lebih baik, duplikasi aturan yang berkurang, dan komponen yang lebih tangguh. Komprominya mencakup pergeseran mental selama adopsi dan terkadang terdapat celah dalam properti berekor panjang. margin-inline, padding-block, dan inset-inline-start untuk jarak dan posisi guna mencapai tata letak yang konsisten di seluruh lokasi.
Jawab dengan contoh
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) Kapan Anda akan menggunakan clamp() dan unit viewport modern ( svh, lvh, dvh ) untuk jenis dan jarak fluida?
penggunaan clamp(min, preferred, max) ketika Anda menginginkan nilai yang berskala mulus seiring pertumbuhan viewport tetapi tidak pernah melebihi batas yang wajar. Ini ideal untuk tipografi, padding, dan bagian hero. Unit viewport modern menangani UI browser seluler Chrome, menyediakan ketinggian yang stabil untuk bagian layar penuh. Manfaatnya meliputi lebih sedikit kueri media, ritme yang konsisten, dan aksesibilitas yang lebih baik jika dikombinasikan dengan remKelemahannya adalah perlunya pengujian di berbagai perangkat untuk mengonfirmasi maksud visual dan target ketukan yang aman.
Jawab dengan contoh
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) Apa itu konteks penumpukan, dan bagaimana indeks-z dan faktor pemosisian menciptakan atau mengisolasinya?
Konteks susun adalah lingkup pengecatan terisolasi di mana perbandingan indeks-z hanya dilakukan di antara saudara kandung dalam konteks yang sama. Konteks baru muncul dari elemen akar, elemen yang diposisikan dengan z-index selain auto, dan properti tertentu seperti transform, opacity < 1, filter, dan position: fixedMemahami hal ini menjelaskan masalah umum "indeks-z tidak berfungsi" di mana seorang anak tidak dapat melampaui konten di luar konteksnya. Manfaatnya adalah enkapsulasi; bahayanya adalah isolasi yang tidak disengaja yang mencegah terjadinya overlay yang diinginkan.
Jawab dengan contoh
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) Apakah produksi penyisipan CSS asli siap, dan bagaimana Anda akan bermigrasi dari praprosesor?
Nesting native didukung secara luas dan mengurangi pengulangan dengan menempatkan relasi aturan secara bersamaan sambil menjaga selektor tetap pendek. Migrasi harus memprioritaskan komponen terlebih dahulu, mengganti rantai turunan yang dalam dengan satu atau dua tingkat nesting dan menghapus konstruksi khusus praprosesor seperti mixin. Manfaatnya meliputi bundel yang lebih kecil dan pemetaan DevTools yang lebih baik; kerugiannya meliputi godaan untuk melakukan nesting berlebihan, yang meningkatkan spesifisitas dan menghambat penggunaan kembali. Tetapkan batasan: batasi kedalaman, pertahankan kait berbasis kelas, dan gabungkan dengan @layer untuk mengendalikan perintah pengesampingan.
Jawab dengan contoh
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) Dapatkah Anda menggunakan kueri bergaya kontainer, dan apa manfaat praktisnya?
Kueri gaya memungkinkan komponen beradaptasi dengan gaya komputasi kontainernya, seperti token kepadatan atau varian tema, tanpa perlu memasukkan nama kelas tambahan melalui DOM. Hal ini memungkinkan sistem desain untuk beralih antara mode ringkas dan nyaman, atau aksen terang dan gelap per kontainer. Keuntungannya adalah komponen yang terpisah dan batasan yang lebih jelas; kerugiannya meliputi perlunya penamaan token yang cermat, fallback yang terdokumentasi, dan pengaturan kontainer yang disengaja. Gunakan kueri gaya untuk mengekspresikan status sebagai data, alih-alih sebagai pemilih struktural yang rapuh.
Jawab dengan contoh
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) Faktor kinerja apa yang penting untuk CSS, dan bagaimana Anda menghindari tata letak yang berantakan?
Performa CSS bergantung pada seberapa sering browser harus menghitung ulang gaya, hitung tata ruang, dan mengecat ulang atau gabungan lapisan. Layout thrashing terjadi ketika pembacaan dan penulisan yang berselang-seling ke properti yang memengaruhi tata letak memaksa reflow berulang. Pendekatan yang disiplin adalah meminimalkan kompleksitas pemilih, menjaga spesifisitas tetap rendah, dan hanya menganimasikan properti yang ramah kompositor. Lakukan pembacaan DOM batch sebelum penulisan, dan manfaatkan penahanan untuk membatasi radius ledakan.
Jawab dengan contoh
- Lebih suka
transformdanopacityuntuk animasi; hindari animasiwidth/height/top/left. - Mendaftar
content-visibility: autoke bagian di luar layar dan menyediakancontain-intrinsic-size. - penggunaan
will-changehemat untuk mempromosikan lapisan hanya untuk animasi yang berjalan lama. - Ganti pemilih keturunan dalam dengan kait kelas tunggal untuk mengurangi perhitungan ulang gaya.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) Fitur CSS mana yang mendukung aksesibilitas secara langsung? Berikan kelebihan dan contohnya.
CSS tidak dapat menggantikan HTML semantik atau ARIA, tetapi meningkatkan fokus visibilitas, keamanan gerak, dan strategi kontras. itu :focus-visible pseudo-kelas mengungkapkan fokus ketika modalitas keyboard terdeteksi, mencegah gangguan visual bagi pengguna mouse sekaligus mempertahankan isyarat bagi pengguna keyboard. Fitur media seperti prefers-reduced-motion memungkinkan pola fallback yang sesuai, sementara desain token warna yang cermat mendukung kontras yang memadai. Keunggulannya adalah pengaturan default yang inklusif di berbagai preferensi pengguna; keterbatasannya adalah semantik dan navigasi keyboard harus disediakan oleh markup dan skrip.
Jawab dengan contoh
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) Berbagai cara untuk memasukkan CSS dan kelebihan atau kekurangan masing-masing pendekatan.
Terdapat beberapa strategi inklusi, masing-masing dengan karakteristik berbeda yang memengaruhi caching, jalur kritis, dan kemudahan perawatan. Stylesheet eksternal memisahkan berbagai hal dan memanfaatkan caching browser; inline <style> cocok untuk aturan kritis yang harus dimuat dengan HTML; sebaris style="" Atribut merupakan prioritas tertinggi, tetapi merugikan penggunaan ulang dan meningkatkan spesifisitas. Pemilihan jenis yang tepat mengurangi duplikasi muatan sekaligus menjaga ergonomi pengembang.
Keuntungan vs kerugian (tabel perbandingan)
| metode | Kelebihan | Kekurangan | Penggunaan Khas |
|---|---|---|---|
| Lembar gaya eksternal | Cache browser; dibagikan di seluruh halaman | Permintaan HTTP tambahan | Sistem desain global |
Di barisan <style> |
Menghilangkan permintaan; ideal untuk CSS kritis | Lebih sulit untuk dikelola dalam skala besar | Gaya di atas lipatan |
Di barisan style="" |
Spesifisitas langsung dan tertinggi | Tidak dapat digunakan kembali; HTML berisik | Penggantian satu kali |
Jawab dengan contoh
<link rel="stylesheet" href="/id/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) Apa perbedaan antara relative, absolute, fixed, dan sticky pemosisian? Berikan panduan kasus penggunaan.
Penempatan menentukan bagaimana elemen ditempatkan dalam alur dan bagaimana elemen tersebut berinteraksi dengan gulir dan leluhur. relative mempertahankan alur alami tetapi mengimbangi kotak visual; sering digunakan untuk membangun konteks penahan. absolute menghilangkan suatu elemen dari aliran, memposisikannya relatif terhadap leluhur yang diposisikan terdekat, yang memberikan presisi dengan mengorbankan responsivitas. fixed menyematkan elemen ke viewport, yang ideal untuk bilah persisten tetapi harus mempertimbangkan keyboard di layar dan area aman. sticky beralih antara statis dan tetap tergantung pada ambang batas gulir, menyediakan tajuk bagian dan indeks dalam halaman.
Jawab dengan contoh
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) Faktor apa saja yang membentuk arsitektur CSS yang dapat dipelihara (BEM, ITCSS, utilitas, lapisan), dan apa siklus hidup gaya komponen?
Arsitektur yang dapat dipelihara menyeimbangkan disiplin spesifisitas, dapat diprediksi pelapisan, dan stabil penamaanBEM menyediakan kait eksplisit, ITCSS memerintahkan aturan dari pengaturan ulang tingkat rendah ke utilitas tingkat tinggi, pendekatan utilitas pertama mempercepat iterasi dengan primitif yang dibatasi, dan @layer Memformalkan urutan penggantian di seluruh basis kode. Siklus hidup komponen biasanya dimulai dengan definisi token, berlanjut ke aturan dasar dan komponen, menambahkan varian dan status, dan diakhiri dengan kebijakan penghentian penggunaan yang menghindari perubahan yang merusak. Keuntungannya adalah perilaku yang konsisten di seluruh tim; kompensasinya adalah perencanaan dan tata kelola di awal.
Jawab dengan contoh
- Token di
:root(jarak, warna, radius). - Komponen ditempatkan di
@layer componentsdengan pemilih kelas tunggal. - Varian melalui atribut data atau kueri gaya wadah untuk kejelasan.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Bagaimana Shadow DOM memengaruhi cakupan CSS, dan apa saja cara untuk memberi gaya pada bagian-bagian?
Shadow DOM merangkum markup dan gaya, mencegah kebocoran yang tidak disengaja dan memastikan stabilitas komponen. Penulis dapat mengekspos permukaan secara sengaja: ::part() target bagian bernama yang diekspor oleh komponen, sementara ::slotted() Gaya yang menetapkan node light-DOM dalam slot. Manfaatnya meliputi enkapsulasi yang kuat dan permukaan tema yang dapat diprediksi; kekurangannya meliputi jangkauan terbatas ke bagian internal kecuali perancang komponen menyediakan komponen, dan kebutuhan untuk mendokumentasikan komponen tersebut bagi konsumen.
Jawab dengan contoh
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) Apa saja karakteristik model kotak CSS, dan mengapa box-sizing: border-box urusan?
Model kotak menggambarkan bagaimana ukuran total suatu elemen berasal dari konten, bantalan, batas, dan batasDengan default content-box, dideklarasikan width tidak termasuk padding dan border, yang dapat menyebabkan kejutan luapan dan perhitungan yang rumit. Mengadopsi border-box Termasuk padding dan border dalam lebar dan tinggi yang dideklarasikan, membuat perhitungan grid dan ukuran komponen lebih mudah diprediksi. Keuntungannya adalah model mental yang lebih sederhana dan lebih sedikit bug tata letak; kekurangannya adalah pencampuran model dalam suatu sistem dapat membingungkan kontributor. Standarisasikan dari akar permasalahan dan dokumentasikan pengecualian secara terbuka.
Jawab dengan contoh
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) Di mana Anda akan menggunakan @supports untuk peningkatan progresif, dan apa manfaatnya?
@supports memungkinkan deteksi fitur dalam CSS, sehingga baseline dapat berfungsi di mana saja dengan peningkatan bersyarat jika tersedia. Pola ini mengurangi risiko saat mengadopsi fitur modern seperti kueri kontainer, :has(), atau subgrid. Manfaat utamanya adalah degradasi yang lebih baik dan jalur migrasi yang lebih jelas; kerugiannya termasuk mempertahankan jalur kode ganda untuk sementara waktu. Susun perilaku dasar terlebih dahulu, lalu bungkus perilaku lanjutan di dalam @supports blok sehingga lingkungan lama tidak mengalami kemunduran.
Jawab dengan contoh
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) Unit CSS mana yang harus Anda pilih, dan apa perbedaan di antara keduanya?
Pilihan unit memengaruhi skala, keterbacaan, dan aksesibilitas. rem berskala dengan ukuran font akar, membuatnya ideal untuk jenis dan spasi global; em berskala dengan elemen saat ini, yang berguna di dalam komponen tetapi dapat bertambah secara tak terduga. ch mencerminkan lebar glif “0” dan sangat baik untuk mengukur (panjang garis). px apakah perangkat selaras piksel dan aman untuk garis rambut tetapi tidak merespons preferensi pengguna. Unit tinggi garis seperti lh dan rlh membantu menjaga irama vertikal dengan mengikat jarak ke kisi tipografi.
Jawab dengan contoh
- penggunaan
max-width: 65chuntuk paragraf yang dapat dibaca. - Tetapkan jarak global sebagai kelipatan
remuntuk menghormati preferensi pengguna. - penggunaan
emuntuk komponen internal seperti tombol ikon yang berskala dengan ukuran font.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) Apakah penghitung CSS membantu konten terstruktur, dan apa manfaat dan kerugiannya?
Penghitung CSS menyediakan penomoran otomatis tanpa mengubah HTML semantik, yang sangat berguna untuk judul, gambar, dan dokumen hukum. Manfaatnya meliputi markup yang bersih dan fleksibilitas dalam penyajian di berbagai lokal atau bagian. Kerugiannya adalah potensi kesenjangan aksesibilitas jika penomoran menyampaikan makna penting yang tidak tercermin dalam struktur DOM atau diumumkan oleh teknologi bantu. Gunakan penghitung untuk penomoran presentasional sambil memastikan hierarki yang mendasarinya benar dan mudah dinavigasi.
Jawab dengan contoh
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) Kapan Anda harus membuat animasi dengan CSS, dan properti mana yang paling aman untuk kinerja?
Animasi paling tangguh ketika beroperasi pada properti yang ramah terhadap kompositor yang menghindari penataan ulang dan pengecatan ulang. CSS unggul dalam transisi deklaratif berbasis status, yang memungkinkan peramban mengoptimalkan penjadwalan bingkai. Pilihan teraman adalah transform dan opacity, yang biasanya berjalan di utas kompositor dan meminimalkan pekerjaan di utas utama. Gunakan CSS untuk interaksi mikro, transisi hover, dan efek masuk yang sederhana. Hindari menganimasikan properti yang memengaruhi tata letak seperti width, height, top, dan left karena memicu perhitungan ulang tata letak. Ketika perubahan geometri penting, pertimbangkan ilusi berbasis transformasi atau pasangkan dengan lembut max-height transisi dengan manajemen luapan dan fallback aksesibilitas yang cermat.
Jawab dengan contoh
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) Dapatkah CSS membantu gambar responsif, dan apa saja cara untuk mendekatinya?
HTML memiliki pemilihan gambar intrinsik melalui srcset dan sizes, tetapi CSS tetap penting untuk citra dekoratif, arahan seni latar belakang, dan penyesuaian objek. Gunakan image-set() untuk menyediakan beberapa resolusi untuk gambar latar belakang, dan lebih memilih object-fit dan object-position untuk mengontrol elemen yang diganti di dalam kotaknya. Gabungkan ini dengan kueri kontainer atau media untuk menyesuaikan potongan, kepadatan, atau titik fokus. Keuntungannya adalah kontrol visual yang presisi tanpa proliferasi markup; kerugiannya adalah gambar latar belakang CSS tidak memiliki negosiasi ukuran intrinsik dan tidak diumumkan oleh teknologi bantu, sehingga gambar konten harus tetap dalam format HTML.
Keuntungan vs kerugian (tabel perbandingan)
| Pendekatan | karakteristik | Kelebihan | Kekurangan | Penggunaan Khas |
|---|---|---|---|---|
HTML srcset/sizes |
Seleksi intrinsik | Semantik yang benar; kinerja terbaik | Memerlukan perubahan markup | Citra konten |
CSS image-set() |
Set resolusi latar belakang | Pertukaran mudah per breakpoint | Tidak ada ukuran intrinsik | Latar belakang dekoratif |
object-fit / position |
Box pengendalian penahanan | Pemotongan yang konsisten | Bukan untuk gambar latar belakang | Gambar mini, avatar |
Jawab dengan contoh
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) Adalah JavaMode gelap tanpa skrip memungkinkan, dan faktor apa yang membuatnya tangguh?
A JavaMode gelap tanpa skrip dapat dilakukan dengan menggabungkan properti khusus dengan prefers-color-scheme fitur media dan atribut HTML opsional untuk penggantian pengguna. Tentukan token semantik di root, berikan varian gelap dalam kueri media, dan izinkan [data-theme] Override untuk menghormati pilihan eksplisit pengguna atau branding perusahaan. Pendekatan ini meminimalkan kompleksitas, mengurangi kedipan, dan menjaga otoritatif kaskade. Keterbatasannya adalah ketergantungan pada preferensi sistem ketika tidak ada override eksplisit. Dokumentasikan token, pastikan kontras yang memadai, dan uji garis fokus dan status di kedua mode.
Jawab dengan contoh
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) Apakah ada kerugian pada penumpukan selektor mendalam dan spesifisitas tinggi, dan apa manfaat yang didapat dari pendekatan spesifisitas rendah?
Penyarangan yang mendalam dan spesifisitas yang tinggi membuat gaya menjadi rapuh, memperlambat refaktor, dan meningkatkan risiko penggantian yang tidak disengaja. Selektor semacam itu secara erat menggabungkan CSS dengan struktur dokumen, yang meningkatkan biaya pemeliharaan ketika markup berevolusi. Pendekatan dengan spesifisitas rendah lebih menyukai kait kelas tunggal, arsitektur datar, dan @layer Pengurutan untuk mengelola penggantian secara prediktif. Manfaatnya meliputi kepemilikan yang lebih jelas, rendering yang lebih cepat karena pencocokan yang lebih sederhana, dan komposisi yang lebih mudah di seluruh tim. Tetapkan batasan kedalaman bersarang, hindari kualifikasi kelas dengan nama elemen jika tidak diperlukan, dan sediakan utilitas untuk solusi darurat.
Jawab dengan contoh
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) Metodologi mana—BEM, ITCSS, atau utility-first—yang cocok untuk tim yang berbeda, dan apa keuntungan dan kerugiannya?
Pemilihan metodologi bergantung pada ukuran tim, budaya tinjauan, dan volatilitas produk. BAIK menyediakan kaitan yang eksplisit dan mudah dibaca yang dapat diskalakan dalam tim besar. ITCSS mengatur basis kode dari pengaturan ulang tingkat rendah melalui objek dan komponen hingga utilitas, selaras dengan kaskade. Utamakan utilitas Mempercepat pengiriman dengan primitif terbatas dan mengutamakan komposisi daripada pemilih khusus. Hibrida umum digunakan: ITCSS untuk urutan, BEM untuk penamaan jika diperlukan, dan utilitas untuk penyesuaian sekali pakai. Kompromi ini melibatkan verbositas (BEM), perencanaan awal (ITCSS), dan potensi proliferasi kelas (utilitas yang mengutamakan).
Perbedaan (tabel perbandingan)
| metode | karakteristik | Kelebihan | Kekurangan | Paling cocok |
|---|---|---|---|---|
| BAIK | .block__elem–mod penamaan | Kait yang dapat diprediksi | Pemilih verbose | Tim besar, sistem desain |
| ITCSS | Arsitektur berlapis | Hapus perintah penggantian | Perencanaan overhead | Monorepo multi-tim |
| Utamakan utilitas | Atomkelas ic | Kecepatan, konsistensi | Risiko pergantian kelas | Prototipe cepat, aplikasi |
26) Jelaskan siklus hidup token spasi dan tipografi dari desain hingga kode dengan contoh.
Siklus hidup token dimulai dalam desain dengan pilihan skala, rasio, dan target aksesibilitas. Ini menjadi properti kustom bernama dan berversi yang merepresentasikan makna semantik. jenis (sebagai contoh, --space-2, --font-scale-1 ) alih-alih nilai mentah. Token mengalir ke gaya dasar, lalu ke komponen dan varian, dan akhirnya ditinggalkan atau dialihkan melalui alias seiring perkembangan sistem. Manfaatnya meliputi ritme yang konsisten, perbedaan yang lebih kecil, dan paritas lintas platform yang lebih baik; kekurangannya meliputi beban tata kelola awal dan kebutuhan akan dokumentasi yang jelas. Perlakukan token sebagai API publik: tentukan rentang, petakan ke panduan penggunaan, dan berikan catatan migrasi.
Jawab dengan contoh
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) Bagaimana caranya :focus-visible, :focus-within, dan :target berbeda, dan apa keuntungan yang diberikan masing-masing?
Pemilih ini membahas karakteristik interaksi dan navigasi yang berbeda. :focus-visible menampilkan fokus hanya saat modalitas input menyarankan navigasi keyboard, mengurangi lingkaran yang mengganggu bagi pengguna mouse sekaligus mendukung aksesibilitas. :focus-within mencocokkan wadah saat keturunan mana pun memiliki fokus, memungkinkan penyorotan berkelompok untuk komposit seperti bidang formulir. :target Mencocokkan elemen yang dirujuk oleh fragmen URL, memungkinkan tautan lewati dan navigasi dalam halaman tanpa skrip. Jika digabungkan dengan cermat, keduanya meningkatkan orientasi, mengurangi beban kognitif, dan mendukung alur kerja keyboard yang efisien.
Jawab dengan contoh
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) Apa manfaat dan kerugian dari content-visibility dan penahanan CSS pada dokumen besar?
content-visibility: auto menunda pekerjaan rendering untuk elemen di luar layar hingga berada di dekat viewport, sehingga secara drastis mengurangi biaya render awal pada feed yang panjang. Penahanan tambahan ( contain: layout paint style ) membatasi dampak sub-pohon pada sisa halaman, mempersempit cakupan reflow dan mempercepat pembaruan berulang. Manfaatnya adalah peningkatan respons dan pengurangan penggunaan memori; kerugiannya meliputi potensi efek pop-in jika ukuran intrinsik tidak diketahui dan kompleksitas ketika JavaSkrip harus mengukur ukuran. Kurangi dengan menyediakan contain-intrinsic-size dan mengukur hanya bila diperlukan.
Jawab dengan contoh
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) Bagaimana Anda membangun grid responsif dengan titik henti minimal menggunakan minmax() dan auto-fit/auto-fill?
Tata letak yang tangguh dapat dicapai dengan menentukan jalur fleksibel yang mengembang hingga lebar maksimum dan kemudian membungkus secara otomatis. repeat(auto-fit, minmax(min, 1fr)) membuat kolom sebanyak mungkin, menciutkan trek kosong untuk menghindari celah yang tidak nyaman. Hal ini mengurangi ketergantungan pada titik henti eksplisit sekaligus menjaga kepadatan yang harmonis di berbagai ukuran layar. Pendekatan ini ideal untuk galeri, kartu, dan daftar produk. Sediakan minimum yang nyaman (misalnya, 16rem ) dan mengandalkan jarak celah untuk mempertahankan ritme.
Jawab dengan contoh
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) Faktor apa saja yang menentukan kapan harus memilih? gap versus margin untuk jarak antar item?
gap adalah pengaturan jarak yang peka terhadap aliran yang bekerja secara native dengan Flexbox dan Grid, menerapkan pemisahan simetris tanpa kasus tepi yang menyebabkan keruntuhan margin. Ini ideal untuk dalam komponen spasi karena tidak memengaruhi perataan anak pertama/terakhir atau memerlukan perubahan arah dalam tata letak kanan-ke-kiri. Margin lebih disukai untuk luar Spasi yang merupakan bagian dari API publik komponen atau ketika spasi harus berinteraksi dengan konteks non-Flex/Grid. Pilih berdasarkan cakupan, kepemilikan, dan semantik tata letak untuk menghindari tumpang tindih yang tidak terduga dan meminimalkan aturan penggantian.
Perbedaan (tabel perbandingan)
| Kriterium | gap |
margin |
|---|---|---|
| Cakupan | Internal ke tata letak wadah | Eksternal antara saudara kandung dan tetangga |
| directionality | Logis dan simetris | Dapat memerlukan penyesuaian RTL |
| Perilaku yang runtuh | Tidak berlaku | Dapat mengalami penurunan margin |
| Penggunaan terbaik | Jarak anak Flex/Grid | Kontrak jarak luar dan tata letak komponen |
Jawab dengan contoh
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) Apa saja kerugian yang timbul jika mengandalkan !important, dan apa alternatif yang lebih aman?
Penggunaan berlebihan !important melewati siklus hidup alami kaskade, yang mengaburkan maksud, memblokir penggantian yang sah, dan memaksa kontributor di masa mendatang untuk meningkatkan spesifisitas lebih jauh. Hal ini juga melemahkan kemampuan uji karena aturan menjadi kebal terhadap pengurutan dan @layer Alternatif profesional adalah merancang jalur penggantian yang dapat diprediksi: mengurangi spesifisitas pemilih, menempatkan kebijakan di lapisan utilitas khusus, atau menyusun ulang sumber dengan @layer daripada menjadikan deklarasi sebagai senjata. !important untuk kasus-kasus yang disengaja dan digerakkan oleh pengguna seperti utilitas kontras tinggi atau visibilitas paksa yang berfungsi sebagai jalan keluar yang terdokumentasi.
Jawab dengan contoh
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) Jenis pemilih mana yang harus dihindari untuk kinerja atau pemeliharaan, dan mengapa?
Selektor yang terikat erat dengan kedalaman dokumen atau atribut di seluruh DOM berisiko. Rantai turunan yang panjang meningkatkan biaya pencocokan dan menciptakan ketergantungan yang rapuh pada markup. Selektor atribut yang luas seperti [class*="btn"] or [data-*] tanpa pelingkupan dapat memindai sub-pohon besar. Pemilih yang terlalu memenuhi syarat seperti ul.nav > li > a.link mengurangi penggunaan ulang dan mempersulit penggantian. Pendekatan yang dapat dipelihara lebih memilih kait kelas tunggal, atribut status dengan kontrak yang jelas (misalnya, [data-state="open"] ), dan hubungan pendek ( > , + ) di dalam batas komponen. Hal ini meningkatkan keterbacaan, mengurangi konflik berjenjang, dan mempercepat proses refaktor.
Jawab dengan contoh
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) Kapan Anda harus memilih @layer utilitas versus varian komponen, dan apa manfaatnya?
Utilitas ekspres penyesuaian satu kali seperti spasi, tampilan, atau perataan yang harus diganti tanpa meningkatkan spesifisitas. Varian komponen mengekspresikan keadaan atau mode yang dapat diulang yang termasuk dalam API komponen. Utilitas sangat efektif selama penyusunan kode aplikasi karena mudah diprediksi dan tidak memerlukan pengeditan lembar gaya komponen. Varian lebih unggul ketika status yang sama berulang dan harus didokumentasikan serta diuji sebagai bagian dari sistem desain. Arsitektur yang seimbang menempatkan utilitas di akhir urutan lapisan dan menjaga varian komponen tetap rendah spesifisitasnya di dalam lapisan komponen.
Jawab dengan contoh
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Dapatkah Grid menggantikan semua penggunaan Flexbox, atau adakah alasan yang didorong oleh perbedaan untuk mempertahankan keduanya?
Grid dan Flexbox memecahkan masalah ortogonal. Grid menyediakan kontrol dua dimensi dengan definisi trek yang eksplisit, sehingga memudahkan pemrosesan bingkai halaman, dasbor, dan galeri kartu yang kompleks. Flexbox unggul dalam distribusi sumbu tunggal, pengaturan ukuran intrinsik di sepanjang sumbu utama, dan perataan dalam baris atau kolom, yang ideal untuk bilah alat, menu, dan chip. Mencoba menerapkan Grid di mana-mana mengorbankan perilaku perataan ergonomis, sementara menerapkan Flexbox untuk tata letak makro menghasilkan pembungkus yang rapuh. Sistem yang matang sengaja menggabungkan keduanya, terkadang dalam komponen yang sama, dengan memilih mesin yang karakteristiknya sesuai dengan permasalahan.
Perbedaan (tabel perbandingan)
| Kriterium | kisi | Flexbox |
|---|---|---|
| Dimensi | Trek dua dimensi | Aliran satu dimensi |
| Kekuatan | Area eksplisit, celah, subgrid | Distribusi, penyelarasan, penataan ulang |
| Penggunaan Terbaik | Bingkai halaman, dasbor | Toolbar, navigasi, daftar chip |
Jawab dengan contoh
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) Apa saja keuntungan dan kerugian menggunakan aspect-ratio versus peretasan bantalan?
aspect-ratio Menawarkan cara deklaratif dan terdokumentasi sendiri untuk mempertahankan bentuk pada kartu, media, dan gambar mini tanpa elemen pembungkus atau peretasan pseudo-elemen. Cara ini terintegrasi dengan rapi dengan pemasangan objek dan bekerja secara terprediksi dalam tata letak Grid dan Flex. Kelemahan utamanya adalah celah browser lawas di lingkungan yang lebih lama dan kebutuhan untuk mempertimbangkan kembali CSS berbasis peretasan sebelumnya. Peretasan padding-top tetap menjadi pilihan cadangan untuk mesin yang sangat lama tetapi meningkatkan kompleksitas DOM dan mengurangi kejelasan. Lebih disukai aspect-ratio untuk pemeliharaan, dan gerbang itu dengan @supports hanya jika cakupan warisan diharuskan secara kontrak.
Jawab dengan contoh
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) Bagaimana Anda membangun sticky header yang tangguh yang menghormati area aman dan viewport seluler?
Header yang tangguh menyeimbangkan position: sticky untuk jangkar tingkat bagian dengan position: fixed hanya ketika desain menuntut persistensi global. Sisipan area aman mencegah tumpang tindih dengan UI sistem pada perangkat berlekuk, dan unit viewport modern seperti dvh Hindari penciutan saat Chrome ditampilkan atau disembunyikan. Strategi ini mencakup penetapan konteks penumpukan yang jelas, penyediaan ruang untuk mencegah pergeseran tata letak, dan penyediaan preferensi gerakan untuk efek masuk. Pengujian di seluruh papan ketik dan dalam orientasi lanskap sangat penting, karena papan ketik virtual dapat menutupi elemen tetap jika tidak ditangani.
Jawab dengan contoh
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
Pertimbangan (tabel cepat)
| Faktor | Rekomendasi |
|---|---|
| Area aman | penggunaan env(safe-area-inset-*) |
| Area pandang | Lebih suka dvh untuk wilayah ketinggian penuh |
| Z-indeks | Buat satu skala overlay dan dokumentasikan |
37) Apa perbedaan antara penskalaan kepadatan dan penskalaan ukuran pada komponen, dan kapan masing-masing harus digunakan?
Skala kepadatan memodifikasi jarak, celah, dan tinggi baris dengan tetap menjaga ukuran font tetap konstan, sehingga menghasilkan varian yang ringkas, nyaman, atau luas tanpa mengubah hierarki tipografi. Penskalaan ukuran mengubah skala tipografi itu sendiri, menggeser judul, teks isi, dan kontrol ke langkah yang lebih besar atau lebih kecil. Gunakan penskalaan kepadatan untuk UI perusahaan di mana kepadatan informasi bervariasi berdasarkan tugas; gunakan penskalaan ukuran untuk merespons jarak perangkat, kebutuhan aksesibilitas, atau persyaratan merek. Perlakukan keduanya sebagai token dengan rentang yang terdokumentasi untuk memastikan konsistensi di seluruh permukaan.
Jawab dengan contoh
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) Kerugian apa saja yang timbul akibat reset global yang besar, dan apa saja alternatif yang lebih aman?
Pengaturan ulang yang agresif dapat secara tidak sengaja menghapus pengaturan default yang bermanfaat seperti garis fokus, semantik daftar, dan kemampuan kontrol formulir. Hal ini merugikan aksesibilitas dan memaksa penerapan ulang perilaku asli yang berlebihan. Alternatif yang lebih aman meliputi: normalisasi modern yang menjinakkan ketidakkonsistenan sambil mempertahankan semantik, dan pengaturan ulang yang dibatasi diterapkan melalui @layer ke komponen yang benar-benar membutuhkan kondisi kosong. Dokumentasikan kebijakan pengaturan ulang, pulihkan secara eksplisit fitur-fitur penting seperti :focus-visible, dan hindari menolkan elemen yang nilai default-nya mengomunikasikan makna, seperti b, strong, dan em.
Jawab dengan contoh
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) Bagaimana Anda men-debug masalah cascade yang kompleks secara efektif menggunakan DevTools dan fitur CSS modern?
Debugging yang efektif dimulai dengan mengisolasi elemen di DevTools dan memeriksa dihitung untuk melihat nilai properti akhir dan sumbernya. Selanjutnya, periksa Gaya urutan aturan dan spesifisitas panel untuk memahami mengapa suatu aturan menang, dengan memperhatikan @layer urutan dan apakah konteks penumpukan atau penampung baru mengganggu. Togglaturan untuk memvalidasi hipotesis, dan menggunakan tampilan lapisan kaskade (jika tersedia) untuk memvisualisasikan prioritas lapisan. Tambahkan kerangka debug sementara, dan pertimbangkan tanda fitur melalui @supports untuk membagi dua masalah dengan menonaktifkan jalur lanjutan secara selektif.
Jawab dengan contoh
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) Di mana gaya cetak dan kueri media cocok dalam alur CSS profesional, dan apa kelebihan dan kekurangannya?
Gaya cetak tetap penting untuk produk, faktur, dan artefak hukum yang sarat dokumentasi. Alur kerja profesional mencakup minimal @media print Bagian yang menghapus chrome yang tidak penting, menetapkan ukuran yang mudah dibaca, dan memastikan penggunaan warna terbaca pada perangkat skala abu-abu. Keuntungannya meliputi peningkatan kualitas pengarsipan dan kepercayaan pengguna; kerugiannya meliputi pemeliharaan tambahan dan kebutuhan untuk mengaudit konten yang biasanya interaktif. Pertahankan aturan cetak berbasis token, hindari pemosisian absolut kecuali untuk header dan footer, dan uji peramban umum serta generator PDF untuk mencegah anomali paginasi.
Jawab dengan contoh
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) Strategi mana yang menghasilkan sistem overlay yang dapat diprediksi, dan bagaimana Anda harus mengelolanya? z-index skala?
Sistem overlay yang terprediksi memperlakukan pelapisan sebagai kontrak terdokumentasi, alih-alih angka ad-hoc. Tentukan skala kecil bernama (misalnya, dasar, timbul, overlay, modal, toast) dan tetapkan komponen ke tingkatan melalui variabel atau kelas utilitas. Pertahankan setiap overlay dalam konteks penumpukannya sendiri hanya jika isolasi diperlukan, dan hindari konteks insidental dari transform or filter Kecuali jika disengaja. Keuntungan utamanya adalah para insinyur dapat bernalar tentang konflik tanpa perlu coba-coba; kerugiannya adalah taksonomi awal yang sederhana. Pasangkan skala dengan token desain dan lint untuk nilai di luar rentang guna mencegah penyimpangan.
Skala overlay (tabel perbandingan)
| tingkat | Tujuan | Typical z-index |
Catatan |
|---|---|---|---|
| Mendasarkan | Konten reguler | 0 | Hindari menciptakan konteks baru |
| Menonjol | Header lengket, laci | 10-100 | Tetap konsisten dalam shell |
| Hamparan | Latar belakang, layar | 900 | Perisai klik halaman penuh |
| Pengandaian | Dialog, pemilih | 1000 | Posisi fixed; fokus perangkap |
| Roti panggang | Pemberitahuan | 1100 | Non-pemblokiran; penghapusan terjadwal |
Jawab dengan contoh
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) Bagaimana kontrol bentuk asli harus ditata secara bertanggung jawab, dan apa manfaat dan kerugian dari teknik umum?
Penataan formulir yang bertanggung jawab menghormati semantik sekaligus meningkatkan kemudahan penggunaan. Mulailah dengan mempertahankan perilaku keyboard dan pembaca layar, lalu tingkatkan dengan penyempurnaan berlapis: gunakan accent-color untuk input yang dapat diperiksa agar selaras dengan merek tanpa mengganti kontrol; terapkan appearance hemat untuk menormalkan UI yang tidak konsisten; dan targetkan kontrol unggah melalui ::file-selector-buttonManfaatnya adalah kontrol yang mudah diakses dan konsisten dengan minimal JavaSkrip; kekurangannya meliputi nuansa lintas-peramban dan godaan untuk mengganti kontrol secara keseluruhan. Dokumentasikan status fokus, status kesalahan, dan status nonaktif sebagai bagian dari API komponen untuk menghindari penggantian ad-hoc.
Jawab dengan contoh
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) Strategi apa yang ada untuk CSS kritis dan pemisahan kode, dan apa keuntungan dan kerugiannya?
CSS Kritis meningkatkan Largest Contentful Paint dengan menyisipkan aturan yang diperlukan untuk konten di atas lipatan, sekaligus menunda sisanya. Pemisahan kode membagi stylesheet berdasarkan rute, fitur, atau komponen. Pendekatan terukur menggabungkan potongan kritis kecil dengan bundel eksternal berlapis untuk kemudahan pemeliharaan. Keuntungannya adalah beban yang dirasakan lebih cepat dan muatan awal yang lebih kecil; kerugiannya meliputi kompleksitas build dan risiko duplikasi jika tidak dideduplikasi pada waktu kompilasi. Lebih disukai pelapisan deterministik ( @layer ) dan konvensi penamaan untuk menjaga penggantian tetap stabil di seluruh potongan.
Strategi pemuatan (tabel perbandingan)
| Penyelarasan | Keunggulan | Kekurangan | Penggunaan Khas |
|---|---|---|---|
Kritis sebaris <style> |
LCP lebih cepat; tidak ada permintaan | Lebih sulit untuk dipertahankan | Cangkang di atas lipatan |
| CSS eksternal asinkron | Dapat di-cache; modular | Risiko konten yang tidak bergaya | Rute aplikasi |
| Bundel media-split | Pemuatan bersyarat | Kompleksitas; pengujian overhead | Cetak, dpi tinggi, mode gelap |
Jawab dengan contoh
<link rel="preload" href="/id/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/id/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) Apa saja pilihan warna CSS modern ( color-mix, sintaksis warna relatif, ruang persepsi), dan kapan sebaiknya digunakan?
CSS modern mendukung penyusunan warna pada saat runtime dengan color-mix() dan menyesuaikan komponen melalui sintaksis warna relatif, memungkinkan tema dinamis tanpa prakompilasi. Ruang warna perseptual seperti OKLCH atau Lab memberikan penyesuaian kecerahan dan kroma yang lebih seragam dibandingkan sRGB, sehingga ramp dan status (hover, nonaktif) lebih konsisten. Manfaat utamanya adalah kontras dan pergeseran rona yang dapat diprediksi di seluruh tema; kekurangannya meliputi dukungan parsial pada mesin lama dan kebutuhan untuk memverifikasi kepatuhan merek. Gunakan pencampuran runtime untuk status hover atau penekanan, dan simpan token kanonik dalam ruang perseptual jika memungkinkan, kembali ke sRGB bila diperlukan.
Jawab dengan contoh
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) Teknik apa yang menciptakan tipografi tangguh dan responsif serta ritme vertikal?
Tipografi yang tangguh menyeimbangkan panjang baris yang mudah dibaca, ukuran yang dapat diskalakan, dan spasi yang konsisten. Mulailah dengan ukuran font dasar yang sesuai dengan preferensi pengguna, lalu gunakan clamp() untuk mendefinisikan langkah-langkah fluida yang dibatasi oleh batas-batas yang masuk akal. Tetapkan ritme vertikal dengan lh atau tinggi garis akar tetap, dan batasi paragraf ke ch-berbasis pengukuran. text-wrap: balance dapat meningkatkan judul dengan mendistribusikan jeda secara lebih merata, sementara hyphens: auto dan metadata bahasa mengurangi tepi yang tidak rata. Manfaatnya adalah keterbacaan dan aksesibilitas di seluruh viewport; kekurangannya meliputi kebutuhan untuk menguji ligatur dan menyeimbangkan perilaku dengan jenis huruf merek.
Jawab dengan contoh
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) Bagaimana scroll snapping dan scroll padding/margin berkolaborasi untuk meningkatkan navigasi?
Scroll snapping menciptakan posisi istirahat deterministik untuk carousel dan tata letak bagian, sementara scroll-padding dan scroll-margin Pastikan target sejajar dengan benar di bawah header lengket. Gunakan scroll-snap-type pada wadah dan scroll-snap-align pada item untuk memandu perilaku. Manfaatnya meliputi rasa yang konsisten dan navigasi keyboard yang lebih baik dengan tabindex dan jangkar; kekurangannya adalah potensi frustrasi jika titik jepret terlalu agresif atau tidak disesuaikan dengan momentum pada perangkat sentuh. Sediakan bantalan logis untuk bagian atas area pandang guna menghindari konten tersembunyi di bawah UI yang lengket, dan validasi dengan interaksi keyboard dan pointer.
Jawab dengan contoh
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) Pola CSS mana yang membuat tooltip dan popovers tangguh, dan kapan JavaApakah skrip masih diperlukan?
CSS dapat menangani tooltip sederhana dan terarah menggunakan position, offset logis, dan ::after panah, dipicu oleh :hover dan :focus-visible. Menggunakan inset dan transformasi untuk penempatan yang tepat dan @layer utilitas untuk z-ordering. Untuk popover kompleks—deteksi tabrakan, reposisi panah, atau penangkapan fokus—JavaSkrip tetap diperlukan, tetapi CSS tetap mendefinisikan token presentasi. Keuntungan pola yang mengutamakan CSS adalah overhead yang rendah dan degradasi yang halus; kerugiannya adalah kemampuan adaptasi yang terbatas terhadap tepi viewport tanpa logika. Selalu pastikan tooltip dapat diakses melalui keyboard dan tidak mengaburkan kontrol-kontrol penting.
Jawab dengan contoh
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) Bagaimana Anda merancang tabel data yang responsif dan mudah dibaca tanpa harus melakukan penulisan ulang yang rumit?
Tabel responsif mempertahankan semantik sekaligus menawarkan tampilan yang dapat digunakan di layar sempit. Mulailah dengan pengguliran horizontal di dalam pembungkus yang dibatasi untuk menghindari header dan hubungan yang berubah bentuk. Untuk data nilai kunci, beralihlah ke tata letak bertumpuk menggunakan display: grid dengan area bernama, atau tambahkan kontrol visibilitas kolom untuk pengungkapan progresif. Keuntungannya meliputi aksesibilitas yang terjaga dan pemeliharaan yang mudah; kerugiannya adalah ruang layar yang terbatas dan perlunya penataan luapan yang cermat. Dokumentasikan kolom mana yang penting di setiap titik henti dan prioritaskan text-overflow dengan keterangan alat untuk nilai panjang.
Pendekatan (tabel perbandingan)
| Teknik | Keunggulan | Kekurangan | terbaik Untuk |
|---|---|---|---|
| Pembungkus gulir horizontal | Mempertahankan semantik | Membutuhkan gaya luapan | Meja lebar dan padat |
| Tata letak kunci-nilai bertumpuk | Sangat mudah dibaca | Kehilangan fitur tabel asli | Spesifikasi ponsel, faktur |
| Pengalih kolom | Kepadatan yang disesuaikan | Membutuhkan kabel JS | Dasbor admin |
Jawab dengan contoh
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) Kapan mode campuran, filter, dan masker memberikan nilai praktis, dan apa saja kompensasinya?
Mode campuran ( mix-blend-mode, background-blend-mode ), filter ( blur, grayscale, drop-shadow ), dan masker ( mask-image, mask-composite ) mengaktifkan efek seperti glassmorphism, duotone, dan tampilan non-persegi panjang tanpa pengeditan raster. Efek-efek ini menonjol di permukaan pemasaran dan aksen visualisasi data di mana arahan seni berperan penting. Keuntungannya adalah berkurangnya proliferasi aset dan tema dinamis; kerugiannya meliputi biaya kinerja pada perangkat berdaya rendah dan kemungkinan masalah aksesibilitas jika kontras dikurangi. Cadangkan efek berat untuk permukaan non-kritis, uji dampak GPU, dan sediakan fallback yang dikurangi pref.
Jawab dengan contoh
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) Apa peran color-scheme dan tema antarmuka pengguna sistem dimainkan dalam gaya yang kohesif di seluruh browser?
The color-scheme Properti mendeklarasikan palet terang dan gelap yang diinginkan sehingga komponen agen pengguna (kontrol formulir, bilah gulir di beberapa mesin) dirender dengan latar belakang dan warna teks yang sesuai. Hal ini mengurangi kebutuhan akan tampilan kontrol khusus dan mencegah ketidakcocokan yang mengganggu saat mode gelap aktif. Keuntungannya adalah koherensi dengan kode minimal; kerugiannya adalah paritas lintas mesin terus berkembang, dan pencitraan merek khusus mungkin masih memerlukan penggantian. Gabungkan color-scheme dengan properti khusus untuk token dan memungkinkan penggantian pengguna secara eksplisit untuk menghindari terperangkapnya pengguna dalam preferensi sistem yang tidak mereka pilih.
Jawab dengan contoh
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 Pertanyaan Wawancara CSS Teratas dengan Skenario Dunia Nyata & Respons Strategis
1) Apa perbedaan antara inline, inline-block, dan block elemen dalam CSS?
Diharapkan dari kandidat: Pewawancara ingin menguji pemahaman Anda tentang properti tampilan elemen dan bagaimana pengaruhnya terhadap tata letak dan model kotak.
Contoh jawaban:
“Dalam peran saya sebelumnya, saya sering berurusan dengan ketidakkonsistenan tata letak yang disebabkan oleh kesalahpahaman jenis tampilan. block elemen mengambil lebar penuh yang tersedia dan dimulai pada baris baru. inline Elemen hanya mengambil lebar sebanyak kontennya dan tidak dimulai pada baris baru. inline-block Elemen ini memungkinkan pengaturan lebar dan tinggi seperti elemen blok, tetapi mengalir sebaris seperti teks. Memahami perbedaan ini membantu saya menyempurnakan desain responsif dan menjaga keselarasan yang konsisten.
2) Bagaimana pendekatan Anda dalam men-debug masalah CSS pada tata letak yang kompleks?
Diharapkan dari kandidat: Pewawancara ingin mengetahui pendekatan sistematis Anda dalam mengidentifikasi dan memperbaiki bug tata letak.
Contoh jawaban:
Di posisi sebelumnya, saya menggunakan pendekatan terstruktur untuk men-debug CSS. Saya menggunakan alat pengembang peramban untuk memeriksa gaya komputasi dan model kotak, mengisolasi selektor yang bentrok, dan menonaktifkan aturan langkah demi langkah. Saya juga menggunakan awalan khusus peramban dan mengujinya di beberapa perangkat. Proses debugging yang metodis ini mengurangi masalah tata letak front-end secara signifikan.
3) Dapatkah Anda menjelaskan cara kerja kaskade CSS dan spesifisitas?
Diharapkan dari kandidat: Pewawancara ingin mengukur pengetahuan Anda tentang bagaimana browser menentukan aturan CSS mana yang diutamakan.
Contoh jawaban:
"Cascade CSS adalah proses yang menentukan aturan mana yang berlaku ketika beberapa selektor menargetkan elemen yang sama. Spesifisitas menentukan prioritas, dengan gaya sebaris sebagai prioritas tertinggi, diikuti oleh ID, lalu kelas, pseudo-kelas, dan terakhir elemen. Urutan sumber juga penting jika spesifisitasnya sama. Mengetahui hal ini membantu mencegah penimpaan gaya secara tidak sengaja dan menghasilkan kode yang lebih bersih."
4) Jelaskan bagaimana Anda menangani desain responsif tanpa terlalu bergantung pada kerangka kerja.
Diharapkan dari kandidat: Pewawancara sedang memeriksa pemahaman Anda tentang fleksibilitas CSS dan penggunaan kueri media.
Contoh jawaban:
“Dalam peran terakhir saya, saya merancang tata letak responsif menggunakan grid fluida, unit relatif seperti em dan rem, dan kueri media untuk menyesuaikan tata letak dengan lebar layar yang berbeda. Saya juga menggunakan CSS Grid dan Flexbox untuk tata letak yang fleksibel. Pendekatan ini menghindari ketergantungan yang tidak perlu pada kerangka kerja sekaligus menjaga desain tetap skalabel dan mudah dipelihara.
5) Bagaimana Anda mengoptimalkan CSS untuk kinerja dan pemeliharaan?
Diharapkan dari kandidat: Pewawancara sedang mengevaluasi kesadaran Anda tentang praktik terbaik untuk skalabilitas dan kinerja.
Contoh jawaban:
Di pekerjaan saya sebelumnya, saya mengoptimalkan CSS dengan menghapus gaya yang tidak terpakai, menggabungkan berkas untuk mengurangi permintaan HTTP, dan menerapkan variabel CSS untuk kemudahan pemeliharaan. Saya juga mengadopsi konvensi penamaan BEM agar kode tetap teratur dan mudah diskalakan. Selain itu, saya menggunakan alat-alat modern seperti PostCSS dan minifikasi untuk meningkatkan kinerja.
6) Ceritakan kepada saya tentang saat Anda harus berkolaborasi dengan pengembang atau desainer untuk menyelesaikan konflik gaya.
Diharapkan dari kandidat: Pewawancara ingin melihat kerja sama tim dan keterampilan komunikasi dalam lingkungan lintas fungsi.
Contoh jawaban:
Dalam proyek sebelumnya, muncul konflik antara ekspektasi desain dan implementasi formulir dinamis oleh pengembang. Saya menjadwalkan sinkronisasi cepat dengan kedua belah pihak, menunjukkan masalah visual menggunakan tangkapan layar, dan mengusulkan penyesuaian variabel CSS untuk menjaga konsistensi desain. Kolaborasi proaktif ini memastikan hasil yang selaras secara visual tanpa memengaruhi kinerja.
7) Tantangan apa yang Anda hadapi saat mengimplementasikan animasi atau transisi CSS, dan bagaimana Anda mengatasinya?
Diharapkan dari kandidat: Pewawancara ingin menilai pemahaman Anda tentang pengoptimalan kinerja dan rendering browser.
Contoh jawaban:
“Dalam satu proyek, animasi menyebabkan jankiness karena masalah reflow. Saya mengidentifikasi bahwa properti CSS tertentu seperti top dan left memicu perhitungan ulang tata letak. Saya beralih menggunakan transform dan opacity, yang dipercepat GPU, menghasilkan transisi yang lebih mulus. Saya juga mengoptimalkan durasi animasi agar terasa alami.”
8) Bagaimana Anda menyusun CSS untuk aplikasi berskala besar?
Diharapkan dari kandidat: Pewawancara ingin memahami pendekatan Anda terhadap organisasi, skalabilitas, dan pemeliharaan.
Contoh jawaban:
Saya akan menggunakan arsitektur modular seperti BEM, SMACSS, atau Modul CSS untuk menyusun gaya secara logis. Setiap komponen akan memiliki gayanya sendiri yang tercakup untuk menghindari konflik. Saya juga akan menerapkan panduan gaya dan konvensi penamaan untuk menjaga konsistensi di seluruh tim dan mencegah CSS membengkak seiring perkembangan proyek.
9) Misalkan seorang klien mengeluh bahwa tata letak halaman rusak di Internet Explorer 11. Langkah apa yang akan Anda ambil untuk mengatasinya?
Diharapkan dari kandidat: Pewawancara ingin menguji kemampuan adaptasi Anda terhadap masalah browser lama.
Contoh jawaban:
Pertama-tama, saya akan mereproduksi masalah tersebut menggunakan versi peramban yang sama. Kemudian, saya akan mengidentifikasi fitur CSS yang tidak didukung melalui alat pengembang peramban dan memeriksa kompatibilitas menggunakan sumber daya seperti MDN atau Can I Use. Setelah itu, saya akan menerapkan fallback atau polyfill sesuai kebutuhan. Saya juga akan mendokumentasikan perbaikan untuk pemeliharaan di masa mendatang.
10) Bagaimana Anda memastikan kompatibilitas lintas-browser dalam proyek CSS Anda?
Diharapkan dari kandidat: Pewawancara ingin memastikan pemahaman Anda tentang standar pengujian dan kompatibilitas.
Contoh jawaban:
Saya memastikan kompatibilitas lintas-peramban dengan melakukan pengujian awal dan berkala pada peramban utama menggunakan alat seperti BrowserStack. Saya mengikuti standar CSS dan menghindari properti non-standar. Saya juga menggunakan PostCSS dengan Autoprefixer untuk menangani prefiks vendor secara otomatis. Validasi dan pengujian yang konsisten selama pengembangan mencegah masalah besar pasca-peluncuran.
