Studi kasus kueri container

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Kueri penampung menawarkan pendekatan yang sangat dinamis dan fleksibel untuk desain responsif. Kueri penampung menggunakan aturan at @container. Cara kerjanya mirip dengan kueri media dengan @media, tetapi @container membuat kueri penampung induk untuk informasi gaya visual, bukan area pandang dan agen pengguna.

Kueri penampung adalah bagian dari Baseline Baru Tersedia.

Dukungan Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Sumber

Dengan merespons ukuran penampung, kueri penampung memungkinkan komponen beradaptasi dengan lokasinya di antarmuka. Misalnya, komponen kartu dapat menyesuaikan ukuran dan gayanya sesuai dengan penampung tempatnya ditempatkan, baik sidebar, bagian hero, maupun petak dalam isi utama halaman.

Seperti yang ditunjukkan dalam ilustrasi berikut, Anda dapat menggabungkan kueri media untuk tata letak makro, kueri penampung untuk tata letak mikro, dengan kueri media berbasis preferensi pengguna untuk membuat sistem desain responsif yang canggih. Baca lebih lanjut tentang kueri container dan desain responsif yang baru.

Gambar yang menunjukkan cara kerja berbagai jenis gaya.
web.dev—Responsif yang Baru.

Artikel ini adalah bagian dari seri yang membahas cara perusahaan e-commerce meningkatkan kualitas situs mereka menggunakan fitur CSS dan UI baru. Kali ini, kita akan membahas cara beberapa perusahaan menggunakan dan mendapatkan manfaat dari kueri penampung.

redBus

redBus mengelola dan menayangkan kode yang berbeda untuk versi seluler dan desktop. Setelah menerapkan kueri penampung di halaman Things-to-do dan cargo, mereka dapat menyatukan kode ini ke dalam satu codebase untuk situs ini. Hal ini membuat aplikasi menjadi responsif dan menghemat waktu pengembangan. Contoh berikut menunjukkan hal ini menggunakan halaman kargo:

Kode

Dalam contoh berikut, .bpdpCardWrapper adalah penampung induk, yang diberi nama sebagai bpdpSection.

Jika penampung bpdpSection memiliki lebar minimum 744 piksel, font-size dan line-height untuk komponen yang dipilih oleh .bpdpCardContainer dan .subTxt, .bpdpAddress akan diperbarui.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Dampak

Sebelum (beberapa code base) Setelah (code base tunggal)
Infrastruktur Infrastruktur terpisah (biaya tinggi). Infrastruktur yang sama (biaya lebih rendah).
Desain UI terpisah, tetapi konsistensinya buruk. Sulit untuk dipecahkan, tetapi mungkin.
Performa Mudah ditangani karena sistemnya terpisah, tetapi duplikat upaya meningkatkan performa. Hal ini spesifik untuk halaman dan fitur, tetapi skor PageSpeedInsights redBus di atas 80.
Pengembangan Tim developer yang terpisah. pengurangan waktu sebesar 30% - 40%.

Tokopedia

Halaman Detail Produk (PDP) Tokopedia berisi beberapa tab untuk informasi toko dan produk. Sebelumnya, tata letak halaman ini dibagi menjadi tiga kolom dan terkadang nama produk di sebelah kiri terpotong untuk ukuran layar yang lebih kecil (lihat video "Sebelumnya" berikut).

Untuk mengatasi masalah tata letak ini, mereka dengan mudah dan cepat mengadopsi kueri penampung. Setelah penerapan ini, mereka dapat memiliki tata letak yang fleksibel dengan nama produk yang selalu terlihat sepenuhnya (lihat video "Setelah" berikut).

Sebelum

Sebelum menerapkan kueri penampung, kata "ISKU 10 in 1 Obeng satu.." di kiri atas terpotong untuk ukuran layar yang lebih kecil.

Setelah

Menerapkan kueri penampung akan menyesuaikan tata letak agar teks tetap berada dalam area pandang.

Kode

Kode berikut membuat kueri ukuran penampung induk bernama infowrapper. Jika lebar maksimum infowrapper adalah 360 piksel, width, margin,, dan padding komponen turunan akan disesuaikan.

Menetapkan container-type ke inline-size akan mengkueri ukuran arah inline induk. Dalam bahasa latin seperti bahasa Inggris, ini akan menjadi lebar penampung induk, karena teks mengalir inline dari kiri ke kanan.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Hal-hal yang perlu dipertimbangkan saat menggunakan kueri penampung

Tokopedia menemukan kasus penggunaannya dengan mencari elipsis teks di situs mereka. Hal ini menunjukkan penampung yang mungkin terlalu kecil, sehingga konten terpotong untuk pengguna.

Kasus penggunaan lain yang baik untuk kueri penampung untuk situs e-commerce adalah mencari komponen yang digunakan kembali. Misalnya, tombol Tambahkan ke keranjang mungkin ditampilkan secara berbeda berdasarkan penampung induk (misalnya, hanya ikon jika ada di kartu produk dan ikon dengan teks jika merupakan CTA utama di halaman). Tombol ini dapat menjadi kandidat yang baik untuk kueri penampung.

Anda dapat memilih untuk melakukan peningkatan inkremental pada situs Anda. Misalnya, Anda dapat memulai dengan kasus penggunaan yang lebih kecil seperti contoh elipsis dari Tokopedia, dan menerapkan kueri penampung di sana. Kemudian, secara bertahap temukan kasus lainnya dan tingkatkan kualitas CSS.

Resource:

Baca artikel lain dalam seri ini yang membahas bagaimana perusahaan e-commerce mendapatkan manfaat dari penggunaan fitur CSS dan UI baru seperti animasi berbasis Scroll, popover, kueri container, dan pemilih has().