Aturan @when CSS: Menguasai Aplikasi Gaya Kondisional

Dunia CSS terus berkembang, menawarkan cara yang lebih kuat dan fleksibel bagi para pengembang untuk menata halaman web. Salah satu fitur yang mulai populer adalah aturan @when, yang juga dikenal sebagai CSS Conditional Rules Module Level 1. Aturan ini memungkinkan Anda untuk menerapkan gaya CSS secara kondisional, berdasarkan terpenuhinya kondisi-kondisi tertentu. Ini adalah alat yang ampuh untuk desain responsif, deteksi fitur, dan pembuatan stylesheet yang lebih kuat dan mudah beradaptasi.

Apa itu Aturan @when CSS?

Aturan @when adalah sebuah at-rule kondisional dalam CSS yang memungkinkan Anda mendefinisikan gaya yang hanya diterapkan jika kondisi tertentu bernilai benar. Anggap saja ini sebagai pernyataan if untuk CSS Anda. Berbeda dengan kueri media, yang terutama berfokus pada karakteristik viewport (ukuran layar, orientasi, dll.), @when menyediakan cara yang lebih umum dan dapat diperluas untuk menangani penataan gaya kondisional. Ini memperluas at-rule kondisional yang sudah ada seperti @supports dan @media.

Keuntungan Utama Menggunakan @when

Keterbacaan Kode yang Lebih Baik: Dengan merangkum logika kondisional di dalam blok @when, Anda membuat CSS Anda lebih mudah dipahami dan dipelihara. Maksud di balik penerapan gaya tertentu menjadi lebih jelas.
Fleksibilitas yang Ditingkatkan: @when dapat menangani kondisi yang lebih kompleks daripada kueri media tradisional, terutama ketika dikombinasikan dengan kueri fitur dan logika yang digerakkan oleh JavaScript (menggunakan CSS Custom Properties).
Deteksi Fitur yang Disederhanakan: @when terintegrasi secara mulus dengan @supports, memungkinkan Anda menerapkan gaya hanya ketika fitur browser tertentu tersedia. Ini sangat penting untuk progressive enhancement.
Penataan Gaya yang Lebih Semantik: @when memungkinkan Anda menata elemen berdasarkan status atau konteksnya, menghasilkan CSS yang lebih semantik dan mudah dipelihara. Contohnya, menata elemen berdasarkan atribut data atau properti kustom yang diatur oleh JavaScript.

Sintaks Aturan @when

Sintaks dasar dari aturan @when adalah sebagai berikut:

@when <condition> {
  /* Aturan CSS untuk diterapkan saat kondisi benar */
}

<condition> dapat berupa ekspresi boolean valid apa pun yang dievaluasi menjadi benar atau salah. Ekspresi ini sering kali melibatkan:

Kueri Media: Kondisi berdasarkan karakteristik viewport (misalnya, lebar layar, orientasi perangkat).
Kueri Fitur (@supports): Kondisi berdasarkan dukungan browser untuk fitur CSS tertentu.
Aljabar Boolean: Menggabungkan beberapa kondisi menggunakan operator logika (and, or, not).

Contoh Praktis Penggunaan @when

Mari kita jelajahi beberapa contoh praktis untuk mengilustrasikan kekuatan dan fleksibilitas aturan @when.

1. Desain Responsif dengan @when dan Kueri Media

Kasus penggunaan paling umum untuk @when adalah desain responsif, di mana Anda menyesuaikan gaya berdasarkan ukuran layar. Meskipun kueri media dapat mencapai ini sendiri, @when menyediakan pendekatan yang lebih terstruktur dan mudah dibaca, terutama saat menangani kondisi yang kompleks.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Dalam contoh ini, gaya di dalam blok @when hanya diterapkan ketika lebar layar berada di antara 768px dan 1023px (ukuran tablet pada umumnya). Ini memberikan cara yang jelas dan ringkas untuk mendefinisikan gaya untuk rentang viewport tertentu.

Catatan Internasionalisasi: Desain responsif sangat penting untuk audiens global. Pertimbangkan berbagai ukuran layar di berbagai wilayah. Misalnya, penggunaan seluler lebih tinggi di beberapa negara, menjadikan desain mobile-first semakin krusial.

2. Deteksi Fitur dengan @when dan @supports

@when dapat dikombinasikan dengan @supports untuk menerapkan gaya hanya ketika fitur CSS tertentu didukung oleh browser. Ini memungkinkan Anda untuk meningkatkan situs web Anda secara progresif, memberikan pengalaman yang lebih baik bagi pengguna dengan browser modern sambil tetap menjaga kompatibilitas dengan browser yang lebih lama.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Gaya fallback untuk browser yang tidak mendukung grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Sesuaikan lebar untuk browser lama */
  }
}

Di sini, kita menggunakan @supports untuk memeriksa apakah browser mendukung CSS Grid Layout. Jika ya, kita menerapkan gaya berbasis grid ke .container. Jika tidak, kita menyediakan gaya fallback menggunakan flexbox untuk memastikan tata letak yang serupa tercapai di browser yang lebih lama.

Catatan Aksesibilitas Global: Deteksi fitur penting untuk aksesibilitas. Browser lama mungkin tidak mendukung atribut ARIA atau elemen HTML5 semantik yang lebih baru. Sediakan fallback yang sesuai untuk memastikan konten tetap dapat diakses.

3. Menggabungkan Kueri Media dan Kueri Fitur

Kekuatan sebenarnya dari @when berasal dari kemampuannya untuk menggabungkan kueri media dan kueri fitur untuk membuat aturan penataan gaya kondisional yang lebih kompleks dan bernuansa.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Dalam contoh ini, elemen .modal hanya akan memiliki latar belakang buram ketika lebar layar setidaknya 768px dan browser mendukung properti backdrop-filter. Ini memungkinkan Anda untuk membuat efek visual yang menarik pada browser modern sambil menghindari potensi masalah kinerja atau gangguan rendering pada browser yang lebih lama.

4. Penataan Gaya Berdasarkan Properti Kustom (Variabel CSS)

@when juga dapat digunakan bersama dengan Properti Kustom CSS (juga dikenal sebagai variabel CSS) untuk menciptakan penataan gaya yang dinamis dan berdasarkan status. Anda dapat menggunakan JavaScript untuk memperbarui nilai properti kustom, lalu menggunakan @when untuk menerapkan gaya yang berbeda berdasarkan nilai tersebut.

Pertama, definisikan properti kustom:

:root {
  --theme-color: #007bff; /* Warna tema default */
  --is-dark-mode: false;
}

Kemudian, gunakan @when untuk menerapkan gaya berdasarkan nilai properti kustom:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Terakhir, gunakan JavaScript untuk mengubah nilai properti kustom --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Ini memungkinkan pengguna untuk beralih antara tema terang dan gelap, dengan CSS yang diperbarui secara dinamis berdasarkan nilai properti kustom. Perhatikan bahwa perbandingan langsung variabel CSS dalam `@when` mungkin tidak didukung secara universal di semua browser. Sebagai gantinya, Anda mungkin perlu menggunakan solusi lain dengan kueri media yang memeriksa nilai bukan nol:

@when ( --is-dark-mode > 0 ) { ... }

Namun, pastikan properti kustom memiliki nilai numerik agar ini berfungsi dengan benar.

Catatan Aksesibilitas: Menyediakan tema alternatif (misalnya, mode gelap) sangat penting untuk aksesibilitas. Pengguna dengan gangguan penglihatan dapat mengambil manfaat dari tema kontras tinggi. Pastikan pengalih tema Anda dapat diakses melalui keyboard dan pembaca layar.

5. Penataan Gaya Berdasarkan Atribut Data

Anda juga dapat menggunakan @when dengan atribut data untuk menata elemen berdasarkan nilai datanya. Ini bisa berguna untuk membuat antarmuka dinamis di mana elemen mengubah penampilan berdasarkan interaksi pengguna atau pembaruan data.

Misalnya, katakanlah Anda memiliki daftar tugas, dan setiap tugas memiliki atribut data-status yang menunjukkan statusnya (misalnya, "todo", "in-progress", "completed"). Anda dapat menggunakan @when untuk menata setiap tugas secara berbeda berdasarkan statusnya.

[data-status="todo"] {
  /* Gaya default untuk tugas todo */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Catatan: dukungan untuk kondisi pengujian attribute() mungkin terbatas atau belum sepenuhnya diimplementasikan di semua browser saat ini. Selalu uji secara menyeluruh.

Kompatibilitas Browser dan Polyfill

Hingga akhir tahun 2024, dukungan browser untuk aturan @when masih terus berkembang. Meskipun banyak browser modern mendukung fungsionalitas intinya, beberapa browser yang lebih lama mungkin tidak. Oleh karena itu, sangat penting untuk memeriksa tabel kompatibilitas dan menggunakan fallback atau polyfill yang sesuai jika diperlukan.

Selalu konsultasikan sumber daya seperti Can I use... untuk memeriksa status dukungan browser saat ini untuk @when dan fitur terkait.

Praktik Terbaik Menggunakan @when

Jaga Kondisi Tetap Sederhana: Hindari kondisi yang terlalu kompleks di dalam blok @when. Pecah logika yang kompleks menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola.
Sediakan Fallback: Selalu sediakan gaya fallback untuk browser yang tidak mendukung fitur yang Anda gunakan dalam aturan @when Anda. Ini memastikan pengalaman yang konsisten di berbagai browser.
Uji Secara Menyeluruh: Uji CSS Anda di berbagai browser dan perangkat untuk memastikan bahwa aturan @when Anda berfungsi seperti yang diharapkan.
Gunakan Komentar yang Bermakna: Tambahkan komentar ke CSS Anda untuk menjelaskan tujuan setiap aturan @when dan kondisi yang mendasarinya. Ini akan membuat kode Anda lebih mudah dipahami dan dipelihara.
Pertimbangkan Kinerja: Hindari penggunaan aturan @when secara berlebihan, karena berpotensi memengaruhi kinerja. Optimalkan CSS Anda untuk meminimalkan jumlah aturan yang perlu dievaluasi.

Kesimpulan

Aturan @when adalah tambahan yang kuat untuk perangkat CSS, menawarkan cara yang lebih fleksibel dan ekspresif bagi pengembang untuk menerapkan gaya secara kondisional. Dengan menggabungkannya dengan kueri media, kueri fitur, dan Properti Kustom CSS, Anda dapat membuat stylesheet yang lebih kuat, mudah beradaptasi, dan mudah dipelihara. Meskipun dukungan browser masih berkembang, @when adalah fitur yang layak untuk dijelajahi dan dimasukkan ke dalam alur kerja pengembangan web modern Anda.

Seiring web terus berkembang, menguasai fitur seperti @when akan menjadi penting untuk menciptakan pengalaman yang menarik, dapat diakses, dan berkinerja tinggi bagi pengguna di seluruh dunia. Manfaatkan kekuatan penataan gaya kondisional dan buka kemungkinan baru dalam pengembangan CSS Anda.