Beberapa Kali Kueri Ukuran Kontainer Akan Membantu Saya

Kueri Wadah CSS masih mendapatkan daya tarik dan banyak dari kita yang basah kuyup dengannya, meskipun itu untuk eksperimen kecil atau yang lainnya. Mereka bagus, tapi tidak cukup penuh, dukungan browser — cukup untuk membenarkan penggunaannya dalam beberapa proyek, tetapi mungkin tidak sejauh kita mungkin tergoda untuk mulai mengganti pertanyaan media dari proyek sebelumnya dengan kueri ukuran wadah baru yang mengkilap.

Mereka benar-benar berguna! Bahkan, saya sudah mengalami beberapa situasi di mana saya benar-benar ingin menjangkau mereka tetapi tidak dapat mengatasi persyaratan dukungan. Jika saya bisa menggunakannya, beginilah tampilannya dalam situasi itu.

Semua demo berikut akan paling baik dilihat di Chrome atau Safari pada saat penulisan ini. Firefox berencana untuk dukungan kapal dalam Versi 109.

Kasus 1: Kotak kartu

Anda agak harus mengharapkan yang ini, bukan? Ini adalah pola yang sangat umum sehingga kita semua tampaknya mengalaminya di beberapa titik. Namun kenyataannya kueri ukuran kontainer akan sangat menghemat waktu bagi saya dengan hasil yang lebih baik seandainya saya dapat menggunakannya di atas kueri media standar.

Katakanlah Anda telah ditugaskan untuk membuat kisi kartu ini dengan persyaratan bahwa setiap kartu harus menjaga rasio aspek 1:1:

Ini lebih sulit daripada yang terlihat! Masalahnya adalah bahwa mengubah ukuran konten komponen pada lebar area pandang membuat Anda bergantung pada bagaimana komponen merespons area pandang — serta cara wadah leluhur lainnya meresponsnya. Jika, misalnya, Anda ingin ukuran font judul kartu dikurangi saat kartu mencapai ukuran inline tertentu, tidak ada cara yang dapat diandalkan untuk melakukannya.

Anda dapat mengatur ukuran font vw unit, saya kira, tetapi komponennya masih terikat dengan lebar viewport browser. Dan itu bisa menyebabkan masalah saat kisi kartu digunakan lain dalam konteks yang mungkin tidak memiliki breakpoint yang sama.

Dalam proyek dunia nyata saya, saya menggunakan pendekatan JavaScript yang akan:

1. Dengarkan acara pengubahan ukuran.
2. Hitung lebar masing-masing kartu.
3. Tambahkan ukuran font sebaris ke setiap kartu berdasarkan lebarnya.
4. Gaya segala sesuatu di dalam menggunakan em unit.

Sepertinya banyak pekerjaan, bukan? Tapi itu adalah solusi yang stabil untuk mendapatkan penskalaan yang diperlukan di berbagai ukuran layar dalam konteks yang berbeda.

Permintaan kontainer akan jauh lebih baik karena mereka memberi kami unit kueri kontainer, seperti cqw satuan. Anda mungkin sudah mendapatkannya, tapi 1cqw adalah sama dengan 1% dari lebar wadah. Kami juga memiliki cqi satuan yang merupakan ukuran lebar sebaris wadah, dan cqb untuk lebar blok wadah. Jadi, jika kita memiliki wadah kartu itu 500px luas, a 50cqw nilai menghitung ke 250px.

Jika saya dapat menggunakan kueri kontainer di kisi kartu saya, saya dapat menyiapkannya .card komponen sebagai wadah:

.card { 
  container: card / size;
}

Kemudian saya bisa mengatur pembungkus bagian dalam padding yang berskala 10% dari .cardlebar menggunakan cqw satuan:

.card__inner { 
  padding: 10cqw; 
} 

Itu cara yang bagus untuk menskalakan jarak antara tepi kartu dan kontennya secara konsisten di mana pun kartu digunakan pada lebar viewport tertentu. Tidak diperlukan kueri media!

Ide lain? Menggunakan cqw unit untuk ukuran font konten bagian dalam, lalu terapkan padding in em unit:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw adalah nilai arbitrer - hanya satu yang saya setujui. Padding itu masih sama dengan 10cqw sejak em satuan relatif terhadap .card__inner ukuran huruf!

Apakah Anda menangkap itu? Itu 2em adalah relatif terhadap 5cqw ukuran font yang diatur pada wadah yang sama. Kontainer bekerja berbeda dari yang biasa kita lakukan em unit relatif terhadap elemen yang sama font-size value. Tapi yang segera saya perhatikan adalah terkait dengan unit kueri kontainer induk terdekat yang juga merupakan wadah.

Sebagai contoh, 5cqw tidak skala berdasarkan .card lebar elemen dalam contoh ini:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

Sebaliknya, itu menskala ke induk terdekat apa pun yang didefinisikan sebagai wadah. Itu sebabnya saya mengatur a .card__inner pembungkus.

Kasus 2: Tata letak bergantian

Saya membutuhkan komponen kartu lain dalam proyek yang berbeda. Kali ini, saya memerlukan kartu untuk beralih dari tata letak lanskap ke tata letak potret… lalu kembali ke lanskap, dan kembali ke potret lagi saat layar semakin kecil.

Saya melakukan pekerjaan kotor untuk membuat komponen ini menjadi potret pada dua rentang viewport tertentu (berteriak ke sintaks rentang kueri media baru!), tetapi sekali lagi, masalahnya adalah ia kemudian dikunci ke kueri media yang disetel di atasnya, induknya, dan apa pun yang mungkin merespons lebar viewport. Kami menginginkan sesuatu yang berfungsi dalam kondisi apa pun tanpa khawatir bertanya-tanya di mana konten akan rusak!

Permintaan kontainer akan membuat ini mudah, berkat @container aturan:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Satu permintaan, fluiditas tak terbatas:

Tapi tunggu dulu! Ada sesuatu yang mungkin ingin Anda perhatikan. Khususnya, akan sulit untuk menggunakan kueri kontainer seperti ini dalam sistem desain berbasis prop. Misalnya, ini .info-card komponen dapat berisi komponen turunan yang bergantung pada properti untuk mengubah tampilannya.

Mengapa itu masalah besar? Tata letak potret kartu mungkin memerlukan gaya alternatif, tetapi Anda tidak dapat mengubah properti JavaScript dengan CSS. Dengan demikian, Anda berisiko menduplikasi gaya yang diperlukan. Saya benar-benar menyentuh ini dan cara mengatasinya di artikel lain. Jika Anda perlu menggunakan kueri kontainer untuk sejumlah besar gaya Anda, maka Anda mungkin perlu mendasarkan seluruh sistem desain Anda di sekitarnya daripada mencoba memasukkannya ke dalam sistem desain yang sudah ada yang berat pada kueri media.

Kasus 3: Stroke SVG

Inilah pola super umum lainnya yang baru-baru ini saya gunakan di mana kueri ukuran wadah akan menghasilkan produk yang lebih halus. Katakanlah Anda memiliki ikon yang dikunci dengan judul:

  
    
   
  Heading

Cukup mudah untuk menskalakan ikon dengan ukuran judul, bahkan tanpa kueri media. Masalahnya, bagaimanapun, adalah SVG itu stroke-width mungkin terlalu tipis untuk diperhatikan dengan baik pada ukuran yang lebih kecil, dan mungkin menarik terlalu banyak perhatian dengan goresan super tebal pada ukuran yang lebih besar.

Saya harus membuat dan menerapkan kelas ke setiap instance ikon untuk menentukan ukuran dan lebar goresannya. Tidak apa-apa jika ikonnya berada di sebelah tajuk yang diberi gaya dengan ukuran font tetap, saya kira, tetapi tidak terlalu bagus saat bekerja dengan jenis cairan yang terus berubah.

Ukuran font tajuk mungkin didasarkan pada lebar area pandang, jadi ikon SVG perlu menyesuaikan tempat goresannya bekerja pada ukuran apa pun. Anda bisa membuat lebar stroke relatif terhadap heading font-size dengan mengaturnya em unit. Tetapi jika Anda memiliki kumpulan ukuran goresan tertentu yang perlu Anda pertahankan, maka ini tidak akan berhasil karena jika tidak skalanya linier - tidak ada cara untuk menyesuaikannya dengan ukuran tertentu. stroke-width nilai pada titik-titik tertentu tanpa menggunakan kueri media pada lebar viewport.

Tapi inilah yang akan saya lakukan jika saya memiliki kemewahan pertanyaan kontainer pada saat itu:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

Bandingkan implementasinya dan lihat bagaimana versi kueri penampung menjepret goresan SVG ke lebar spesifik yang saya inginkan berdasarkan lebar penampung.

Bonus: Jenis kueri ukuran wadah lainnya

Oke, jadi saya belum benar-benar mengalami ini di proyek nyata. Namun saat saya menyisir informasi tentang kueri kontainer, saya perhatikan bahwa ada hal tambahan yang dapat kami kueri pada sebuah kontainer yang terkait dengan ukuran atau dimensi fisik kontainer.

Sebagian besar contoh yang pernah saya lihat menanyakan width, max-width, dan min-width, height, block-size, dan inline-size seperti yang telah saya lakukan sepanjang artikel ini.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

Tapi MDN menguraikan dua hal lagi kita bisa menanyakannya. Satu adalah orientation yang sangat masuk akal karena kami selalu menggunakannya dalam kueri media. Tidak ada bedanya dengan kueri kontainer:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Yang lain? Dia aspect-ratio, percaya atau tidak:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

Inilah demo yang dapat diedit untuk bermain-main dengan kedua contoh:

Saya belum benar-benar menemukan kasus penggunaan yang baik untuk salah satu dari ini. Jika Anda punya ide atau merasa itu bisa membantu Anda dalam proyek Anda, beri tahu saya di komentar!