الاستفادة من إمكانات طلبات البحث عن حاويات CSS: دروس من فريق Netflix

Jeremy Weeks
Jeremy Weeks
Stefan Heymanns
Stefan Heymanns

أحدثت طلبات البحث عن الحاويات ثورة في طريقة تعامل المطوّرين مع التصميم المتجاوب، ولقد عاصر فريق Netflix التأثير العميق الذي يمكن أن تحدثه في تسهيل عملية التطوير وتحسين المرونة وتعزيز الأداء. توضّح هذه المشاركة المزايا الرئيسية لاستخدام طلبات بحث الحاوية، مع مقارنتها بالطُرق القديمة، لا سيما تلك التي تعتمد على JavaScript للتحكّم في تنسيق المحتوى. يتضمّن أمثلة على الرموز البرمجية لتوضيح كل نقطة، ويعرض كيف يمكن لطلبات البحث عن الحِزم تسهيل حياتك كمطوّر.

1. تصميم المكوّنات المبسّط، من "القاعدة إلى القمة" مقابل "من القمة إلى القاعدة"

من أهم التغييرات التي أجراها فريق Netflix هو الانتقال من أسلوب التصميم "من الأعلى إلى الأسفل" إلى أسلوب التصميم "من الأسفل إلى الأعلى". قبل طلبات البحث في الحاوية، كان على الحاويات الرئيسية أن تكون على دراية تامة بمتطلبات التنسيق للحاويات الفرعية. باستخدام طلبات بحث الحاوية، يتم عكس هذا المنطق، ما يسمح للمكونات الفرعية بالتحكّم في تنسيقها استنادًا إلى حجم الحاوية الخاصة بها. يؤدي ذلك إلى تبسيط دور العنصر الرئيسي وتقليل عدد عمليات منطق التنسيق في الرمز.

مثال: طلبات البحث عن الحاويات في مقابل طلبات البحث عن الوسائط وJavaScript

قبل (يجب استخدام JavaScript):

/* 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 بالاستجابة لحجم الحاوية المجاورة له، ما يبسط منطق التنسيق ويزيل الحاجة إلى JavaScript تمامًا.

2. سرعة الاستجابة بدون طلبات استعلام معقدة عن الوسائط

اكتشف فريق Netflix كيف تعمل طلبات بحث الحاوية على تبسيط الاستجابة، خاصةً للتصميم المتوافق مع الأجهزة الجوّالة. بدلاً من كتابة طلبات بحث معقدة عن الوسائط، يمكنك إنشاء مكوّنات قابلة لإعادة الاستخدام يتم تعديلها استنادًا إلى حجم الحاوية، ما يتيح استخدام تنسيقات ديناميكية على مختلف أحجام الشاشات والأجهزة. ويُعدّ ذلك مفيداً بشكلٍ خاص للتطبيقات، مثل Netflix، التي تجذب عددًا كبيرًا من الزيارات من الأجهزة الجوّالة.

مثال: استجابة المكوّنات مع طلبات الحاوية

قبل:

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

بدلاً من الاعتماد على طلبات البحث عن الوسائط المستندة إلى إطار العرض، أصبح .sidebar الآن يستجيب لحجم الحاوية، ما يتيح له التكيّف بشكلٍ أكثر طبيعية مع التنسيقات الديناميكية بدون الحاجة إلى معرفة حجم إطار العرض أو الحاوية الرئيسية.

3- تقليل الاعتماد على JavaScript لإدارة التنسيق

قبل طلبات البحث عن الحاويات، كان على العديد من الفِرق، بما في ذلك Netflix، الاعتماد على JavaScript لإنشاء التنسيقات الديناميكية. من خلال طلب حجم النافذة، سيؤدي JavaScript إلى تغييرات في التصميم، ما يزيد من التعقيد واحتمالية حدوث أخطاء. تقضي طلبات الحاوية على هذه الحاجة من خلال السماح لـ CSS بمعالجة ملف الترتيب استجابةً استنادًا إلى حجم الحاوية.

مثال: إزالة منطق التنسيق المستنِد إلى JavaScript

قبل:

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

لا يقتصر هذا الأسلوب على تقليل مقدار JavaScript المطلوب، بل يساهم أيضًا في تحسين الأداء من خلال تجنُّب عمليات الحساب أثناء التشغيل.

4. رمز أقل، أخطاء أقل

لاحظ فريق Netflix أنّ استخدام استعلامات الحاوية أدّى إلى تقليل عدد سطور التعليمات البرمجية وعدد الأخطاء المرتبطة بالتنسيق. من خلال نقل منطق التنسيق من JavaScript إلى CSS والقضاء على الحاجة إلى طلبات الاستعلام عن الوسائط المعقّدة، يمكن للمطوّرين كتابة رمز برمجي يسهل صيانته.

مثال: تقليل رمز التنسيق

لاحظ فريق Netflix أنّه بعد استخدام طلبات البحث عن الحاويات، حدث انخفاض كبير في رمز 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 تتصرف بطريقة أكثر سهولة وتركيزًا على المكوّنات، يمكن للمطوّرين التركيز على إنشاء مكوّنات قابلة لإعادة الاستخدام ومرنة بدون القلق بشأن كيفية تصرفها في كل سيناريو ممكن لتنسيق المحتوى.

على حدّ تعبير أحد أعضاء فريق Netflix، "هذه هي الطريقة التي كان من المفترض أن تعمل بها CSS منذ البداية".

6- عنصر احتياطي لميزة "تعويض الميزات المفقودة من المتصفحات"

على الرغم من توفّر طلبات البحث عن الحاويات في جميع المتصفحات الرئيسية الآن، لا تزال هناك مخاوف بشأن الإصدارات السابقة من المتصفحات التي لا تزال قيد الاستخدام. من المهم جدًا توفير بديل، ويستخدم فريق Netflix JavaScript polyfill الذي أنشأه المساهمون في منتدى الويب. إنّ عملية التنفيذ بسيطة باستخدام ميزة رصد العناصر:

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

الخاتمة

تمثّل طلبات البحث عن الحاويات خطوة كبيرة إلى الأمام في CSS، ما يسهّل على المطوّرين إنشاء مكوّنات مرنة وسلسة الاستجابة يمكن إعادة استخدامها في أجزاء مختلفة من الموقع الإلكتروني. من خلال تقليل الاعتماد على JavaScript لتنسيق الصفحات، والتخلص من طلبات البحث المعقدة عن الوسائط، وتسريع عملية التطوير، توفّر هذه التقنيات مزايا كبيرة في كلّ من الأداء وسهولة الصيانة. في الوقت الحالي، تتوفّر معظم حالات الاستخدام في صفحات Tudum على Netflix، مع خطط محتملة ل استخدام طلبات بحث الحاوية في أجزاء أخرى من Netflix. يعتبر فريق Netflix أنّ طلبات البحث عن الحِزم هي أداة من الدرجة الأولى في مجموعة أدوات المطوّرين، ولن يتوسع استخدامها إلا مع اتّباع المزيد من المطوّرين للاستفادة من المرونة والفعالية التي تقدّمها. سواءً كان ذلك لإعادة تجهيز المكونات الحالية أو تصميم عناصر جديدة تمامًا، توفّر طلبات البحث عن الحاويات مسارًا أبسط وأنظف للتصميم المتوافق مع مختلف الأجهزة.

ننصحك بتجربة طلبات البحث عن الحِزم إذا لم يسبق لك ذلك، ومن المرجّح أن تلاحظ أنّها تبسّط سير عملك بطرق لم تكن تتوقّعها.