باز کردن قدرت جستجوهای کانتینر CSS: درس هایی از تیم Netflix

پرسش‌های کانتینر نحوه رویکرد توسعه‌دهندگان به طراحی واکنش‌گرا را متحول کرده است و تیم نتفلیکس تأثیر عمیقی را که می‌توانند بر ساده‌سازی توسعه، بهبود انعطاف‌پذیری و افزایش عملکرد داشته باشند، به‌طور مستقیم تجربه کرده‌اند. این پست مزایای کلیدی استفاده از پرس‌و‌جوهای کانتینر را شرح می‌دهد و آنها را با روش‌های قدیمی‌تر، به‌ویژه روش‌هایی که برای کنترل طرح‌بندی به جاوا اسکریپت متکی هستند، مقایسه می‌کند. این شامل نمونه‌هایی از کد برای نشان دادن هر نکته است، که نشان می‌دهد چگونه پرس‌وجوهای کانتینر می‌توانند زندگی شما را به‌عنوان یک توسعه‌دهنده بسیار آسان‌تر کنند.

1. طراحی اجزای ساده، "پایین به بالا" در مقابل "بالا به پایین"

یکی از مهم‌ترین تغییراتی که تیم نتفلیکس تجربه کرد، حرکت از رویکرد طراحی «بالا به پایین» به رویکرد «پایین به بالا» بود. قبل از درخواست کانتینر، کانتینرهای والدین باید کاملاً از الزامات چیدمان فرزندان خود آگاه باشند. با کوئری های کانتینر، این منطق معکوس می شود و به اجزای فرزند اجازه می دهد طرح بندی خود را بر اساس اندازه کانتینر خود کنترل کنند. این کار نقش والدین را ساده می کند و مقدار منطق طرح بندی در کد را کاهش می دهد.

مثال: پرس و جوهای کانتینر در مقابل پرس و جوهای رسانه و جاوا اسکریپت

قبل (نیاز به جاوا اسکریپت):

/* 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();

بعد از:

/* 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%;
    }
}

این مثال نشان می‌دهد که چگونه ظرف والد دیگر نیازی به مدیریت طرح‌بندی فرزند ندارد. قانون @container به .card اجازه می دهد تا به اندازه ظرف فوری خود واکنش نشان دهد، منطق طرح بندی را ساده کرده و نیاز به جاوا اسکریپت را به کلی از بین می برد.

2. پاسخگویی بدون پرس و جوهای رسانه ای پیچیده

تیم نتفلیکس کشف کرد که چگونه پرس و جوهای کانتینر پاسخگویی را ساده می کند، به ویژه برای طراحی اول موبایل. به جای نوشتن درخواست‌های رسانه پیچیده، می‌توانید اجزای قابل استفاده مجدد ایجاد کنید که بر اساس اندازه ظرف تنظیم می‌شوند و امکان طرح‌بندی‌های پویا را در اندازه‌های مختلف صفحه نمایش و دستگاه‌ها فراهم می‌کنند. این به ویژه برای برنامه هایی مانند نتفلیکس، که در آن ترافیک تلفن همراه غالب است، مفید است.

مثال: پاسخگویی کامپوننت با کوئری های ظرف

قبل از:

/* 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%;
    }
}

بعد از:

/* 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;
    }
}

به جای وابستگی به درخواست‌های رسانه مبتنی بر viewport، .sidebar اکنون به اندازه کانتینر پاسخ می‌دهد و به آن اجازه می‌دهد به طور طبیعی‌تر با طرح‌بندی‌های پویا بدون نیاز به دانستن اندازه ویوپورت یا محفظه والد سازگار شود.

3. کاهش وابستگی به جاوا اسکریپت برای مدیریت چیدمان

قبل از درخواست های کانتینر، بسیاری از تیم ها، از جمله نتفلیکس، مجبور بودند برای طرح بندی های پویا به جاوا اسکریپت تکیه کنند. با پرس و جو در اندازه پنجره، جاوا اسکریپت تغییرات طرح را ایجاد می کند و باعث افزایش پیچیدگی و پتانسیل ایجاد باگ می شود. پرس و جوهای کانتینر با اجازه دادن به CSS برای مدیریت پاسخگویی طرح بر اساس اندازه کانتینر، این نیاز را برطرف می کند.

مثال: حذف منطق طرح بندی مبتنی بر جاوا اسکریپت

قبل از:

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();

بعد از:

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

.card {
    width: 100%;
}

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

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

این رویکرد نه تنها مقدار جاوا اسکریپت مورد نیاز را کاهش می دهد، بلکه با اجتناب از محاسبات زمان اجرا، عملکرد را بهبود می بخشد.

4. کد کمتر، اشکالات کمتر

تیم نتفلیکس دریافت که استفاده از پرس‌وجوهای کانتینر منجر به خطوط کمتر کد و باگ‌های مرتبط با طرح‌بندی کمتری می‌شود. با انتقال منطق طرح بندی از جاوا اسکریپت به CSS و حذف نیاز به پرس و جوهای پیچیده رسانه ای، توسعه دهندگان می توانند کدهای قابل نگهداری بیشتری بنویسند.

مثال: کاهش کد طرح

تیم نتفلیکس مشاهده کرد که پس از پذیرش پرس‌و‌جوهای کانتینر، متوجه کاهش قابل‌توجه کد CSS شدند - تا 30٪ برای اجزای خاص. در همان زمان، تیم توانست بسیاری از پرسش‌های رسانه‌ای پیچیده و گاهی مستعد تعارض را با حذف منطقی که اجزای کودک را کنترل می‌کرد، ساده کند و به درجه بالاتری از تفکیک نگرانی‌ها دست یابد. این کاهش نه تنها سرعت توسعه را افزایش می دهد بلکه نقاط بالقوه شکست را نیز به حداقل می رساند و منجر به باگ های کمتری می شود.

قبل از:

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

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

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

بعد از

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

.card {
    width: 100%;
}

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

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

5. بهبود تجربه توسعه دهنده

bq "این زندگی من را صد بار آسان تر کرد"

شاید یکی از نادیده گرفته‌شده‌ترین مزایای جستجوهای کانتینر، بهبود تجربه توسعه‌دهنده باشد. با ایجاد رفتاری بصری‌تر و متمرکز بر مؤلفه‌های CSS، توسعه‌دهندگان می‌توانند بر ساخت مؤلفه‌های قابل استفاده مجدد و انعطاف‌پذیر تمرکز کنند بدون اینکه نگران رفتار آنها در هر سناریوی طرح‌بندی ممکن باشند.

همانطور که یکی از اعضای تیم نتفلیکس گفت، "CSS باید از ابتدا اینگونه کار می کرد."

6. Polyfill backback

اگرچه درخواست های کانتینر در حال حاضر در همه مرورگرهای اصلی وجود دارد، نگرانی در مورد نسخه های قبلی مرورگرهایی که هنوز در حال استفاده هستند وجود دارد. بازگشت به عقب بسیار مهم است، تیم Netflix از این چند پرکننده جاوا اسکریپت که توسط مشارکت کنندگان جامعه وب ایجاد شده است استفاده می کند. پیاده سازی با تشخیص ویژگی ساده است:

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

نتیجه گیری

پرس و جوهای کانتینر نشان دهنده یک گام بزرگ رو به جلو در CSS است که ساخت اجزای انعطاف پذیر و پاسخگو را برای توسعه دهندگان آسان تر می کند که می توانند در بخش های مختلف سایت مورد استفاده مجدد قرار گیرند. با کاهش وابستگی به جاوا اسکریپت برای چیدمان، حذف پرس و جوهای پیچیده رسانه، و سرعت بخشیدن به توسعه، آنها مزایای قابل توجهی در عملکرد و قابلیت نگهداری ارائه می دهند. در حال حاضر، بیشتر موارد استفاده در صفحات Tudum Netflix با برنامه‌های بالقوه برای استفاده از جستجوهای کانتینر در سایر بخش‌های Netflix هستند. تیم نتفلیکس پرس‌وجوهای کانتینر را ابزاری درجه یک در جعبه ابزار توسعه‌دهنده می‌داند و استفاده از آن‌ها تنها زمانی گسترش می‌یابد که توسعه‌دهندگان بیشتری از انعطاف‌پذیری و قدرتی که به ارمغان می‌آورند استقبال کنند. چه برای مقاوم سازی اجزای موجود و چه برای طراحی قطعات کاملاً جدید، کوئری های کانتینر مسیر ساده تر و تمیزتری را برای طراحی پاسخگو ارائه می دهند.

اگر قبلاً این کار را نکرده‌اید، سؤالات مربوط به کانتینر را امتحان کنید - احتمالاً متوجه خواهید شد که گردش کار شما را به روشی که انتظارش را نداشتید ساده می‌کند.