Kondisional CSS dengan fungsi if() baru

Una Kravets

Dipublikasikan: 1 Juli 2025

Mulai Chrome 137, Anda dapat mencoba kondisional inline CSS dengan fungsi if(). if() memungkinkan antarmuka developer yang lebih bersih untuk gaya dinamis seperti kueri gaya dan kueri media, dengan beberapa perbedaan utama, yang dapat Anda pelajari dalam postingan ini.

Fungsi CSS if() berfungsi menggunakan serangkaian pasangan nilai kondisi, yang disusun sebagai berikut:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Anda dapat memberikan pernyataan else, yang digunakan jika tidak ada kondisi lain yang terpenuhi:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Saat ini, if() berfungsi dengan tiga jenis kueri yang berbeda:

• style(): Kueri gaya
• media(): Pertanyaan media
• supports(): Mendukung kueri

Mari kita lihat konteksnya dengan beberapa contoh:

Demo: Kueri media inline

Menggunakan if() adalah cara yang bagus untuk menyertakan kueri media inline dalam gaya Anda. Misalnya, Anda dapat memeriksa preferensi tema pengguna (terang atau gelap), atau melakukan kueri media inline untuk lebar area tampilan. Contoh berikut menunjukkan kueri media untuk perangkat penunjuk. Ukuran default tombol adalah 30 piksel di perangkat dengan penunjuk halus, seperti mouse, tetapi untuk perangkat layar sentuh, seperti perangkat dengan penunjuk kasar, ukuran tombol adalah 44 piksel minimum yang direkomendasikan untuk jarak sentuh yang sesuai agar akses lebih mudah.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Kode sebelumnya memberikan hasil yang sama dengan kueri media berikut:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

Dengan menggunakan format if(), Anda dapat memiliki logika inline, tanpa memerlukan logika gaya di dua tempat yang berbeda.

Demo: Kueri dukungan inline

Cara lain untuk menggunakan if() adalah dengan membuat kueri dukungan inline. Misalnya, untuk memeriksa dukungan warna gamut lebar, seperti OKLCH, Anda dapat menggunakan:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Dengan kode ini, jika browser mendukung ruang warna oklch, pengguna akan melihat warna yang lebih cerah, dan juga akan mendapatkan pesan: "Browser Anda mendukung OKLCH" dalam konten semu ::after.

Untuk mempelajari lebih lanjut dan melihat perbedaan antara rgb dan ruang warna yang lebih canggih, lihat pemilih warna dan sumber daya di oklch.com.

Demo: Memvisualisasikan status UI

Anda juga dapat menggunakan if() untuk gaya berbasis status. Misalnya, menata kartu progres berdasarkan status UI-nya (tertunda atau selesai). Simpan status dalam atribut data atau properti kustom secara langsung, lalu terapkan gaya sebaris ke properti, menggunakan if().

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

Dengan style() di dalam fungsi if(), Anda dapat langsung menata gaya elemen yang ditargetkan, tanpa memerlukan elemen induk seperti yang diperlukan kueri gaya CSS.

Demo ini menunjukkan kasus dasar tentang cara menggunakan if() untuk mendukung pendekatan arsitektur baru pada CSS. Salah satu manfaat penggunaan properti kustom CSS dibandingkan class adalah kemudahan memperbaruinya di CSS. Misalnya, elemen tersebut dapat diperbarui menggunakan kueri media atau status semu seperti :hover.

Langkah berikutnya

Penambahan if() memberikan peluang arsitektur baru bagi developer CSS. Seiring berkembangnya teknologi seperti kueri gaya, kueri rentang kemungkinan akan dapat dilakukan dalam fungsi if(), dan juga akan berguna jika digabungkan dengan proposal fungsi kustom yang akan datang (CSS @function).

Untuk mempelajari lebih lanjut fitur ini, lihat:

• Panduan video berdurasi 3 menit untuk Demo #3
• Artikel dari Lea Verou