Gaya Visual Berdasarkan Ukuran

Ringkasan

Penataan gaya yang responsif terhadap ukuran memungkinkan komponen mengubah tata letak atau tampilannya berdasarkan ruang yang tersedia, bukan ukuran seluruh layar. Hal ini berguna untuk komponen seperti kartu atau menu navigasi yang mungkin ditempatkan di berbagai bagian tata letak (seperti sidebar sempit atau area utama yang lebar).

Sebaiknya gunakan kueri penampung karena membuat komponen benar-benar modular. Anda tidak perlu mengetahui di mana komponen akan berada atau menulis kueri media yang kompleks untuk menangani setiap kemungkinan tata letak.

Penerapan

1. Menentukan container

WAJIB: Anda harus memberi tahu browser terlebih dahulu elemen mana yang merupakan penampung yang akan diukur.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Menerapkan gaya berdasarkan ukuran penampung

Gunakan aturan @container untuk menerapkan gaya saat penampung mencapai ukuran tertentu.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Menampilkan konten secara bersyarat

Anda juga dapat menggunakan kueri penampung untuk menyembunyikan atau menampilkan detail tambahan saat ada lebih banyak ruang.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Strategi penggantian

Untuk browser yang tidak mendukung kueri penampung, pendekatan terbaik adalah menggunakan tata letak default yang aman (seperti tata letak vertikal bertumpuk) dan meningkatkannya secara progresif menggunakan kueri media jika ukuran layar umum memungkinkan.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

Hal ini memastikan bahwa pengguna di browser lama tetap mendapatkan tata letak yang dapat digunakan, meskipun tidak beradaptasi dengan sempurna ke setiap lebar penampung tertentu.