ربط Scroll-Timeline المشروط ضمن استعلامات حاويات CSS

شفافية المحتوى: تم توليد وتنسيق هذا المقال آلياً عبر محرك صِوان AI لتقديم محتوى تقني دقيق، مباشر، وخالٍ من الحشو المزعج.

في عالم تطوير الويب الحديث، أصبحت القدرة على إنشاء تجارب مستخدم ديناميكية ومتجاوبة أمراً حاسماً. مع ظهور استعلامات حاويات CSS (CSS Container Queries) و Scroll-Timeline، أصبح لدى المطورين أدوات قوية لتحقيق ذلك. ومع ذلك، فإن الجمع بين هاتين التقنيتين لإنشاء ربط مشروط للـ Scroll-Timeline بناءً على سياق الحاوية يتطلب فهماً دقيقاً وتطبيقاً ذكياً. يهدف هذا المقال إلى استكشاف هذا التحدي وتقديم حلول عملية.

ما هي استعلامات حاويات CSS؟

تُعد استعلامات حاويات CSS ثورة في تصميم الويب المتجاوب، حيث تسمح للمطورين بتطبيق الأنماط بناءً على حجم أو خصائص الحاوية الأصلية للعنصر، بدلاً من حجم منفذ العرض (viewport) بالكامل. هذا يمنح مرونة غير مسبوقة في تصميم المكونات المستقلة التي تتكيف مع سياقها الخاص.

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

@container card (min-width: 400px) {
  .card-title {
    font-size: 1.5rem;
  }
  .card-image {
    display: block;
  }
}

معلومة!
تُمكن container-type و container-name العنصر من أن يصبح حاوية استعلام، مما يتيح للعناصر الداخلية الاستجابة لتغييراته.

فهم Scroll-Timeline

تُمكن Scroll-Timeline المطورين من ربط الرسوم المتحركة بتقدم التمرير، مما يفتح الباب أمام تأثيرات تمرير جذابة وسلسة. بدلاً من الاعتماد على التوقيت المستند إلى الوقت، يمكن للرسوم المتحركة أن تبدأ وتتوقف وتتغير سرعتها بناءً على موضع التمرير لعنصر معين أو للمستند بأكمله.

.animated-element {
  animation: fade-in linear forwards;
  animation-timeline: scroll(root); /* أو scroll(self) */
  animation-range: entry 0% cover 50%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

التحدي: الربط المشروط

يكمن التحدي في دمج Scroll-Timeline مع استعلامات الحاويات في أن خصائص Scroll-Timeline (مثل animation-timeline و animation-range) تُطبق عادةً بشكل مباشر على العناصر، بينما تُحدد استعلامات الحاويات الأنماط بناءً على سياق الحاوية. قد نرغب في تفعيل تأثير تمرير معين فقط عندما تكون الحاوية كبيرة بما يكفي، أو تعطيله عندما تكون صغيرة لتجنب تشتيت المستخدم أو لتبسيط التجربة.

لا توجد آلية مدمجة مباشرة في CSS تسمح بتفعيل أو تعطيل animation-timeline بشكل مشروط ضمن @container. هذا يتطلب نهجاً غير مباشر.

حلول عملية للربط المشروط

الطريقة الأولى: الاستفادة من متغيرات CSS

تُعد متغيرات CSS (Custom Properties) أداة قوية لتمرير القيم ديناميكياً عبر CSS. يمكننا استخدامها لتعيين قيم Scroll-Timeline بشكل مشروط داخل استعلامات الحاويات، ثم استخدام هذه المتغيرات في تعريف الرسوم المتحركة.

.scroll-container {
  container-type: inline-size;
  container-name: my-container;
  /* القيم الافتراضية أو المعطلة */
  --scroll-timeline-name: none;
  --scroll-timeline-range: auto;
}

@container my-container (min-width: 600px) {
  /* تفعيل Scroll-Timeline عند استيفاء الشرط */
  --scroll-timeline-name: scroll(self);
  --scroll-timeline-range: entry 0% cover 50%;
}

.animated-item {
  animation: slide-in linear forwards;
  animation-timeline: var(--scroll-timeline-name);
  animation-range: var(--scroll-timeline-range);
}

@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

في هذا المثال، يتم تعيين --scroll-timeline-name و --scroll-timeline-range إلى قيم "معطلة" (none و auto) بشكل افتراضي. عند استيفاء شرط @container، يتم تحديث هذه المتغيرات بقيم Scroll-Timeline المرغوبة، مما يؤدي إلى تفعيل الرسوم المتحركة.

الطريقة الثانية: التطبيق المشروط للأنماط الكاملة

بدلاً من استخدام المتغيرات، يمكننا تطبيق خصائص Scroll-Timeline بأكملها مباشرة داخل كتلة @container. هذا النهج أكثر وضوحاً في بعض الحالات.

.scroll-container {
  container-type: inline-size;
  container-name: my-container;
}

.animated-item {
  /* الأنماط الأساسية */
  opacity: 0; /* مخفي افتراضياً */
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s; /* انتقال سلس عند عدم وجود Scroll-Timeline */
}

@container my-container (min-width: 700px) {
  .animated-item {
    animation: fade-up linear forwards;
    animation-timeline: scroll(self);
    animation-range: entry 0% cover 50%;
    /* إلغاء الانتقال اليدوي عند تفعيل Scroll-Timeline */
    transition: none;
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

هنا، يتم تطبيق الرسوم المتحركة المستندة إلى التمرير فقط عندما تكون الحاوية أكبر من 700 بكسل. عندما تكون الحاوية أصغر، قد نختار إما إخفاء العنصر، أو تطبيق انتقال CSS بسيط، أو عرضه بدون أي تأثير تمرير.

اعتبارات وأفضل الممارسات

1. الأداء: تأكد من أن الرسوم المتحركة خفيفة ولا تسبب مشاكل في الأداء، خاصة على الأجهزة الأقل قوة. اختبر على نطاق واسع.
2. إمكانية الوصول: توفير بدائل للرسوم المتحركة أو تعطيلها للمستخدمين الذين يفضلون تقليل الحركة (باستخدام @media (prefers-reduced-motion)).
3. الدعم المتصفح: تحقق من دعم المتصفحات لكل من استعلامات الحاويات و Scroll-Timeline. قد تحتاج إلى استخدام polyfills أو تقديم تجارب بديلة للمتصفحات القديمة.
4. التعقيد: تجنب الإفراط في تعقيد المنطق. كلما كان الحل أبسط، كان أسهل في الصيانة والتصحيح.

نصيحة: عند استخدام scroll(self)، تأكد من أن العنصر الذي يتم تطبيق الرسوم المتحركة عليه هو نفسه الذي يمكن التمرير فيه، أو أن لديه سلفاً قابلاً للتمرير لكي يعمل الـ timeline بشكل صحيح.

هل يمكنني استخدام JavaScript للتحكم في ربط Scroll-Timeline المشروط؟

نعم، يمكن استخدام JavaScript لإضافة أو إزالة فئات CSS التي تحتوي على خصائص Scroll-Timeline بناءً على حجم الحاوية أو أي منطق آخر. ومع ذلك، فإن الحلول المستندة إلى CSS (مثل متغيرات CSS أو @container مباشرة) تُفضل عادةً للبساطة والأداء عندما يكون ذلك ممكناً.

ما هو الفرق بين scroll(root) و scroll(self)؟

scroll(root) يربط الرسوم المتحركة بتقدم التمرير للمستند بأكمله (عادةً <html> أو <body>). بينما scroll(self) يربط الرسوم المتحركة بتقدم التمرير للعنصر نفسه أو أقرب سلف قابل للتمرير له. هذا الأخير مفيد جداً للمكونات المعزولة.

المشاركات ذات الصلة

المقال الأصلي:
ربط Scroll-Timeline المشروط ضمن استعلامات حاويات CSS
المصدر: صِوان AI
شكر خاص لـ GEMINI و جمال الحزازي.