Memaksimalkan kemampuan kueri penampung CSS: pelajaran dari tim Netflix

Jeremy Weeks
Jeremy Weeks
Stefan Heymanns
Stefan Heymanns

Kueri penampung telah merevolusi cara developer mendekati desain responsif, dan tim Netflix telah mengalami secara langsung dampak mendalam yang dapat mereka berikan untuk menyederhanakan pengembangan, meningkatkan fleksibilitas, dan meningkatkan performa. Postingan ini menguraikan manfaat utama penggunaan kueri penampung, yang membandingkannya dengan metode lama, terutama yang mengandalkan JavaScript untuk kontrol tata letak. Artikel ini menyertakan contoh kode untuk mengilustrasikan setiap poin, yang menunjukkan cara kueri penampung dapat mempermudah pekerjaan Anda sebagai developer.

1. Desain komponen yang disederhanakan, "bottom-up" versus "top-down"

Salah satu perubahan paling signifikan yang dialami tim Netflix adalah beralih dari pendekatan desain "top-down" ke pendekatan "bottom-up". Sebelum kueri penampung, penampung induk harus sepenuhnya mengetahui persyaratan tata letak turunannya. Dengan kueri penampung, logika ini dibalik, sehingga komponen turunan dapat mengontrol tata letaknya berdasarkan ukuran penampung mereka sendiri. Hal ini menyederhanakan peran induk dan mengurangi jumlah logika tata letak dalam kode.

Contoh: Kueri penampung versus kueri media dan JavaScript

Sebelumnya (JavaScript diperlukan):

/* Layout with media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}
// JavaScript to detect parent container size
const container = document.querySelector('.container');
const card = document.querySelector('.card');

function adjustLayout() {
    if (window.innerWidth >= 900) {
        card.style.width = '33.33%';
    } else if (window.innerWidth >= 600) {
        card.style.width = '50%';
    } else {
        card.style.width = '100%';
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Setelah:

/* Container Query */
.container {
    container-type: inline-size;
}

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Contoh ini menunjukkan cara penampung induk tidak perlu lagi mengelola tata letak turunan. Aturan @container memungkinkan .card bereaksi terhadap ukuran penampung langsungnya, menyederhanakan logika tata letak, dan menghilangkan kebutuhan akan JavaScript sepenuhnya.

2. Responsivitas tanpa kueri media yang kompleks

Tim Netflix menemukan cara kueri penampung menyederhanakan responsivitas, terutama untuk desain yang mengutamakan perangkat seluler. Daripada menulis kueri media yang kompleks, Anda dapat membuat komponen yang dapat digunakan kembali dan disesuaikan berdasarkan ukuran penampung, sehingga memungkinkan tata letak dinamis di berbagai ukuran layar dan perangkat. Hal ini sangat berguna untuk aplikasi seperti Netflix, yang didominasi oleh traffic seluler.

Contoh: Responsivitas komponen dengan kueri penampung

Sebelum:

/* Desktop versus Mobile
this only works if.sidebar is directly contained by a viewport-width element */
.sidebar {
    width: 300px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
}

Setelah:

/* Responsive sidebar based on container,
.sidebar can be placed in any element of any width */
.container {
    container-type: inline-size;
}

.sidebar {
    width: 100%;
}

@container (min-width: 768px) {
    .sidebar {
        width: 300px;
    }
}

Daripada bergantung pada kueri media berbasis area pandang, .sidebar kini merespons ukuran penampung, sehingga dapat beradaptasi secara lebih alami dengan tata letak dinamis tanpa perlu mengetahui ukuran area pandang atau penampung induk.

3. Mengurangi dependensi pada JavaScript untuk pengelolaan tata letak

Sebelum kueri penampung, banyak tim, termasuk Netflix, harus mengandalkan JavaScript untuk tata letak dinamis. Dengan mengkueri ukuran jendela, JavaScript akan memicu perubahan tata letak, sehingga meningkatkan kompleksitas dan potensi bug. Kueri penampung menghilangkan kebutuhan ini dengan memungkinkan CSS menangani responsivitas tata letak berdasarkan ukuran penampung.

Contoh: Menghapus logika tata letak berbasis JavaScript

Sebelum:

const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;

function adjustLayout() {
    if (cardContainer.offsetWidth > 900) {
        cards.forEach(card => card.style.width = '33.33%');
    } else if (cardContainer.offsetWidth > 600) {
        cards.forEach(card => card.style.width = '50%');
    } else {
        cards.forEach(card => card.style.width = '100%');
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Setelah:

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

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Pendekatan ini tidak hanya mengurangi jumlah JavaScript yang diperlukan, tetapi juga meningkatkan performa dengan menghindari penghitungan runtime.

4. Lebih sedikit kode, lebih sedikit bug

Tim Netflix menemukan bahwa penggunaan kueri penampung menghasilkan lebih sedikit baris kode dan lebih sedikit bug terkait tata letak. Dengan memindahkan logika tata letak dari JavaScript ke CSS dan menghilangkan kebutuhan akan kueri media yang kompleks, developer dapat menulis kode yang lebih mudah dikelola.

Contoh: Mengurangi kode tata letak

Tim Netflix mengamati bahwa setelah mengadopsi kueri penampung, mereka melihat penurunan kode CSS yang signifikan—hingga 30% untuk komponen tertentu. Pada saat yang sama, tim dapat menyederhanakan banyak kueri media yang kompleks dan terkadang rentan terhadap konflik dengan menghapus logika yang mengontrol komponen turunan, sehingga mencapai tingkat pemisahan masalah yang lebih tinggi. Pengurangan ini tidak hanya mempercepat pengembangan, tetapi juga meminimalkan potensi titik kegagalan, sehingga bug menjadi lebih sedikit.

Sebelum:

/* Before with complex media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Setelah

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

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

5. Pengalaman developer yang lebih baik

bq. "Hal ini membuat hidup saya seratus kali lebih mudah"

Mungkin salah satu manfaat kueri penampung yang paling tidak dihargai adalah pengalaman developer yang lebih baik. Dengan membuat CSS berperilaku dengan cara yang lebih intuitif dan berfokus pada komponen, developer dapat berfokus pada pembuatan komponen yang fleksibel dan dapat digunakan kembali tanpa perlu khawatir tentang perilakunya dalam setiap skenario tata letak yang mungkin.

Seperti yang dikatakan salah satu anggota tim Netflix, "Seharusnya CSS sudah berfungsi seperti ini sejak awal".

6. Fallback polyfill

Meskipun kueri penampung kini ada di semua browser utama, ada kekhawatiran tentang browser versi sebelumnya yang masih digunakan. Penggantian sangat penting, tim Netflix menggunakan polyfill JavaScript ini yang dibuat oleh kontributor komunitas web. Penerapannya mudah dengan deteksi fitur:

if (! CSS.supports("container-type:size")) {
  /*use polyfill from
  https://www.npmjs.com/package/container-query-polyfill */
 }

Kesimpulan

Kueri penampung merupakan langkah besar dalam CSS, yang memudahkan developer membuat komponen responsif dan fleksibel yang dapat digunakan kembali di berbagai bagian situs. Dengan mengurangi ketergantungan pada JavaScript untuk tata letak, menghapus kueri media yang kompleks, dan mempercepat pengembangan, keduanya menawarkan keunggulan yang signifikan dalam performa dan pemeliharaan. Saat ini, sebagian besar kasus penggunaan berada di halaman Tudum Netflix dengan potensi rencana untuk menggunakan kueri penampung di bagian lain Netflix. Tim Netflix menganggap kueri penampung sebagai alat kelas satu di kotak alat developer, dan penggunaannya hanya akan berkembang seiring semakin banyak developer yang memanfaatkan fleksibilitas dan kemampuannya. Baik untuk memasang ulang komponen yang ada atau mendesain komponen yang benar-benar baru, kueri penampung menawarkan jalur yang lebih sederhana dan lebih bersih untuk desain responsif.

Jika belum, coba kueri penampung—Anda mungkin akan menemukan bahwa kueri ini menyederhanakan alur kerja Anda dengan cara yang tidak terduga.