M

MLOG

Bahasa Indonesia

Jelajahi CSS Container Style Queries, pendekatan desain responsif yang memungkinkan komponen beradaptasi berdasarkan gaya kontainernya, bukan hanya ukuran viewport.

CSS Container Style Queries: Desain Responsif Berbasis Gaya untuk Aplikasi Global

Desain responsif tradisional sangat bergantung pada media queries, mengadaptasi tata letak dan gaya situs web berdasarkan ukuran viewport. Meskipun efektif, pendekatan ini dapat menyebabkan inkonsistensi dan kesulitan saat menangani komponen kompleks yang perlu beradaptasi dengan konteks yang berbeda dalam viewport yang sama. CSS Container Style Queries menawarkan solusi yang lebih granular dan intuitif, memungkinkan elemen untuk merespons gaya yang diterapkan pada elemen penampungnya, menawarkan perilaku responsif yang benar-benar berbasis komponen.

Apa itu CSS Container Style Queries?

Container Style Queries memperluas kekuatan container queries melampaui kondisi sederhana berbasis ukuran. Alih-alih memeriksa lebar atau tinggi sebuah kontainer, kueri ini memungkinkan Anda untuk memeriksa keberadaan properti dan nilai CSS tertentu yang diterapkan pada kontainer tersebut. Ini memungkinkan komponen untuk mengadaptasi gayanya berdasarkan konteks kontainer, bukan hanya dimensinya.

Anggap saja seperti ini: alih-alih bertanya "Apakah viewport lebih lebar dari 768px?", Anda bisa bertanya "Apakah kontainer ini memiliki properti kustom --theme: dark; yang diatur?". Ini membuka dunia kemungkinan baru untuk membuat komponen yang fleksibel dan dapat digunakan kembali yang dapat beradaptasi dengan mulus dengan berbagai tema, tata letak, atau variasi merek di seluruh situs web atau aplikasi Anda.

Manfaat Container Style Queries

Cara Menggunakan CSS Container Style Queries

Berikut adalah rincian tentang cara mengimplementasikan kueri gaya kontainer:

1. Menyiapkan Kontainer

Pertama, Anda perlu menetapkan sebuah elemen sebagai kontainer. Anda dapat melakukannya menggunakan properti container-type:

.container {
  container-type: inline-size;
}

Nilai inline-size adalah yang paling umum dan berguna, karena memungkinkan kontainer untuk mengkueri ukuran inline (horizontal) nya. Anda juga dapat menggunakan size yang mengkueri ukuran inline dan block. Menggunakan hanya size mungkin memiliki implikasi kinerja jika Anda tidak berhati-hati.

Sebagai alternatif, gunakan container-type: style untuk menggunakan kontainer hanya untuk kueri gaya, dan bukan kueri ukuran, atau container-type: size style untuk menggunakan keduanya. Untuk mengontrol nama kontainer, gunakan container-name: my-container dan kemudian targetkan dengan @container my-container (...).

2. Mendefinisikan Kueri Gaya

Sekarang, Anda dapat menggunakan at-rule @container style() untuk mendefinisikan gaya yang berlaku ketika kondisi tertentu terpenuhi:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

Dalam contoh ini, gaya di dalam aturan @container hanya akan diterapkan pada elemen .component jika elemen penampungnya memiliki properti kustom --theme yang diatur ke dark.

3. Menerapkan Gaya ke Kontainer

Terakhir, Anda perlu menerapkan properti CSS yang diperiksa oleh kueri gaya Anda ke elemen kontainer:

<div class="container" style="--theme: dark;">
  <div class="component">Ini adalah komponen.</div>
</div>

Dalam contoh ini, .component akan memiliki latar belakang gelap dan teks putih karena kontainernya memiliki gaya --theme: dark; yang diterapkan langsung di HTML (untuk kesederhanaan). Praktik terbaik adalah menerapkan gaya melalui kelas CSS. Anda juga dapat menggunakan JavaScript untuk mengubah gaya pada kontainer secara dinamis, yang akan memicu pembaruan kueri gaya.

Contoh Praktis untuk Aplikasi Global

1. Komponen Bertema

Bayangkan sebuah situs web yang mendukung beberapa tema. Anda dapat menggunakan kueri gaya kontainer untuk secara otomatis menyesuaikan gaya komponen berdasarkan tema yang aktif.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Judul Kartu</h2>
    <p>Konten kartu.</p>
  </div>
</div>

Dalam contoh ini, komponen .card akan secara otomatis beralih antara tema gelap dan terang berdasarkan properti --theme dari kontainernya. Ini sangat bermanfaat untuk situs di mana pengguna dapat memilih tema yang berbeda berdasarkan preferensi mereka.

2. Variasi Tata Letak

Anda dapat menggunakan kueri gaya kontainer untuk membuat variasi tata letak yang berbeda untuk komponen berdasarkan ruang yang tersedia atau tata letak keseluruhan halaman. Pertimbangkan komponen pemilihan bahasa. Di navigasi utama, mungkin berupa dropdown yang ringkas. Di dalam footer, bisa jadi daftar lengkap bahasa yang tersedia.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Gaya untuk dropdown ringkas */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Gaya untuk daftar lengkap bahasa */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

Pendekatan ini sangat berharga untuk situs web yang melayani antarmuka pengguna yang beragam di berbagai perangkat dan platform. Pertimbangkan bahwa struktur situs seluler dan desktop seringkali sangat berbeda, dan ini dapat membantu komponen beradaptasi.

3. Beradaptasi dengan Jenis Konten

Pertimbangkan sebuah situs web berita dengan ringkasan artikel. Anda dapat menggunakan kueri gaya kontainer untuk menyesuaikan presentasi ringkasan berdasarkan apakah mereka menyertakan gambar atau tidak.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (dengan gambar) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (tanpa gambar) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Ini memungkinkan presentasi ringkasan artikel yang lebih menarik secara visual dan informatif, meningkatkan pengalaman pengguna. Perhatikan bahwa mengatur properti `--has-image` langsung di HTML tidaklah ideal. Pendekatan yang lebih baik adalah menggunakan JavaScript untuk mendeteksi keberadaan gambar dan secara dinamis menambahkan atau menghapus kelas (mis., `.has-image`) ke elemen `.article-summary`, dan kemudian mengatur properti kustom `--has-image` di dalam aturan CSS untuk kelas `.has-image`.

4. Gaya yang Dilokalkan

Untuk situs web internasional, kueri gaya kontainer dapat digunakan untuk mengadaptasi gaya berdasarkan bahasa atau wilayah. Misalnya, Anda mungkin ingin menggunakan ukuran font atau spasi yang berbeda untuk bahasa dengan teks yang lebih panjang.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

Ini memungkinkan pembuatan pengalaman yang lebih disesuaikan dan ramah pengguna untuk audiens bahasa yang berbeda. Pertimbangkan bahwa beberapa bahasa seperti Arab dan Ibrani ditulis dari kanan ke kiri, dan gaya spesifik perlu diterapkan. Untuk bahasa Jepang dan bahasa Asia Timur lainnya, spasi dan ukuran font yang berbeda mungkin diperlukan untuk merender karakter dengan benar.

5. Pertimbangan Aksesibilitas

Kueri gaya kontainer juga dapat meningkatkan aksesibilitas dengan mengadaptasi gaya komponen berdasarkan preferensi pengguna atau kemampuan perangkat. Misalnya, Anda dapat meningkatkan kontras komponen jika pengguna telah mengaktifkan mode kontras tinggi di sistem operasi mereka.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Ini memastikan bahwa situs web Anda dapat digunakan dan diakses oleh semua orang, terlepas dari kemampuan mereka. Perhatikan penggunaan media query `@media (prefers-contrast: more)` untuk mendeteksi mode kontras tinggi di tingkat sistem operasi, dan kemudian mengatur properti kustom `--high-contrast`. Ini memungkinkan Anda untuk memicu perubahan gaya menggunakan kueri gaya berdasarkan pengaturan sistem pengguna.

Praktik Terbaik

Dukungan Browser

Kueri gaya kontainer memiliki dukungan browser yang sangat baik di seluruh browser modern termasuk Chrome, Firefox, Safari, dan Edge. Namun, browser yang lebih lama mungkin tidak sepenuhnya mendukung fitur ini. Pastikan untuk menggunakan kueri fitur untuk menyediakan gaya cadangan untuk browser ini atau gunakan polyfill.

Kesimpulan

CSS Container Style Queries menawarkan pendekatan yang kuat dan fleksibel untuk desain responsif, memungkinkan Anda membuat situs web dan aplikasi yang benar-benar berbasis komponen dan dapat beradaptasi. Dengan memanfaatkan gaya elemen kontainer, Anda dapat membuka tingkat kontrol dan granularitas baru dalam desain Anda, menghasilkan pengalaman yang lebih mudah dipelihara, skalabel, dan ramah pengguna untuk audiens global.

Manfaatkan kueri gaya kontainer untuk membangun komponen responsif yang beradaptasi dengan mulus dengan berbagai tema, tata letak, bahasa, dan persyaratan aksesibilitas, menciptakan pengalaman web yang benar-benar global.

Sumber Daya