Kondisional CSS dengan fungsi if() baru

Una Kravets

Dipublikasikan: 1 Juli 2025

Dari 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 if() CSS 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(): Kueri media
• supports(): Mendukung kueri

Mari kita masukkan hal ini ke dalam konteks 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 pandang. Contoh berikut menunjukkan kueri media untuk perangkat pointer. Ukuran default tombol adalah 30 piksel pada perangkat dengan pointer halus, seperti mouse, tetapi untuk perangkat layar sentuh, seperti perangkat dengan pointer kasar, ukuran tombol adalah 44 piksel minimum yang direkomendasikan untuk spasi 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 pseudo ::after.

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

Demo: Memvisualisasikan status UI

Anda juga dapat menggunakan if() untuk gaya visual berbasis status. Misalnya, menata gaya kartu progres berdasarkan status UI-nya (tertunda atau selesai). Simpan status dalam atribut data atau properti kustom secara langsung, lalu terapkan gaya inline 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 ke CSS. Salah satu manfaat penggunaan properti khusus CSS dibandingkan class adalah kemudahan memperbaruinya di CSS. Misalnya, status tersebut dapat diperbarui menggunakan kueri media atau status pseudo seperti :hover.

Langkah berikutnya

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

Untuk mempelajari fitur ini lebih lanjut, lihat:

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