العروض الدوّارة باستخدام CSS

Adam Argyle

تاريخ النشر: 20 مارس 2025

بدءًا من الإصدار 135 من Chrome، يمكنك استخدام ميزات من مواصفات CSS Overflow 5 المصمّمة لإنشاء تجارب التمرير السريع والدوّار.

تقدّم هذه المشاركة نظرة عامة على العديد من تجارب التمرير ولوحات العرض الدوّارة المختلفة التي تم إنشاؤها باستخدام هذه الميزات الجديدة وبدون JavaScript. شاهِد الفيديو التالي واستعدّ لما يمكنك تحقيقه الآن.

يظهر في الفيديو مجموعة من أزرار التمرير وعلامات التمرير والرسوم المتحركة المستندة إلى التمرير وطلبات البحث scroll-state() وhas() وgrid وanchor وغير ذلك الكثير.

والأكثر إثارة للإعجاب هو قصة سهولة الاستخدام.

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

‫Meet ::scroll-button() و::scroll-marker()

اللوحة الدوّارة هي مساحة قابلة للتمرير تحتوي على ما يصل إلى عنصرَين إضافيَين من عناصر واجهة المستخدم، وهما الأزرار والعلامات.

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

• أزرار التمرير
  عناصر تفاعلية ومستندة إلى الحالة وموفّرة من المتصفّح لتسهيل التمرير <button> تساعد في الوصول إلى المحتوى وتمرير% 85 من مساحة التمرير عند الضغط عليها.

• علامات التمرير
  عناصر التنقّل <a> التي يوفّرها المتصفّح وتحتفظ بحالتها، وتساعد في الوصول إلى المحتوى الخاص بأي عنصر مطلوب في مساحة التمرير.

يوضّح الجزء المتبقي من هذه المشاركة كيفية إنشاء لوحة عرض دوّارة باستخدام هذه الميزات الجديدة.

البدء باستخدام أداة تمرير

يمكنك إضافة أزرار وعلامات إلى أيّ منطقة قابلة للتمرير على موقعك الإلكتروني.

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

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

إضافة أزرار التمرير باستخدام ::scroll-button()

استنادًا إلى نظام التشغيل، قد تكون هناك أزرار تمرير حول أشرطة التمرير. تميل أزرار شريط التمرير المضمّنة إلى دفع مساحة التمرير، بينما تنقل أزرار التمرير في CSS الصفحة بنسبة% 85 من مساحة التمرير.

بالنسبة إلى العروض الدوّارة التي تعرض عنصرًا واحدًا فقط بعرض كامل في كل مرة مع نقاط المحاذاة عند التمرير، سيبدو ذلك وكأنّه مبلغ لكل عنصر. بالنسبة إلى القوائم الطويلة التي يظهر فيها أكثر من عنصر واحد في كل مرة، يتم التمرير بمقدار صفحة كاملة تقريبًا.

لإضافة أزرار التمرير باستخدام CSS، اتّبِع الخطوات التالية:

1. أضِفها مثل العناصر الزائفة الأخرى، باستخدام أداة اختيار: .carousel::scroll-button(right) لزر التمرير إلى اليسار.
2. حدِّد content مع نص بديل احتياطي يسهل الوصول إليه اختياري.

سينشئ المتصفّح أزرارًا حقيقية تحتوي على المحتوى الخاص بك، وستكون هذه الأزرار عناصر شقيقة لعنصر التمرير. يمكنك الآن ترتيب هذه الأزرار أو تصميمها أو anchor()ها حسب حاجتك. ينشئ رمز CSS التالي زرَّين، أحدهما للتمرير إلى اليسار والآخر للتمرير إلى اليمين.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

إضافة علامات التمرير باستخدام ::scroll-marker()

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

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

لاحظ أنّ هذه العلامات ليست نقاطًا، بل تستخدم السمة content: "Season 1" للعنصر الزائف. يمكن أن تكون العلامات أيضًا صورًا مصغّرة، ويتم استخدامها عادةً في العروض الدوّارة الخاصة بالمعارض في مواقع التجارة الإلكترونية أو المواقع الإلكترونية التي تركّز على الصور.

تشبه العلامات روابط <a> داخل الصفحة، ولكنها تتضمّن بعض الميزات الخاصة:

1. تتضمّن هذه العلامات الحالة :target-current عندما تكون العلامة ظاهرة أو تم التقاطها.
2. يتضمّن التنقّل باستخدام لوحة المفاتيح، ويتصرف مثل مجموعة تركيز.
3. يتم تضمين تجربة قارئ الشاشة، ويتم عرض التقارير على شكل قائمة علامات تبويب.

أضِف علامات إلى نقاط الاهتمام المهمة في أداة التمرير باتّباع الخطوات التالية:

1. حدِّد موضع scroll-marker-group على أنّه before أو after.
2. اختَر نقاط الاهتمام باستخدام أداة اختيار .carousel .point-of-interest::scroll-marker.
3. حدِّد content مع نص بديل احتياطي يسهل الوصول إليه اختياري أو أرقام أو نص أو قيمة فارغة أو صورة.

ينشئ المتصفّح جميع العلامات ويضعها في حاوية مجموعة العلامات. ينشئ هذا المثال علامة فارغة لكل <li>، وذلك لإنشاء نقطة علامة لكل عنصر.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

يُطلق على العنصر الحاوي للعلامات اسم ::scroll-marker-group ويتم إنشاؤه كعنصر مجاور لعنصر التمرير، تمامًا مثل أزرار التمرير. يمكن تصميم هذا الحاوية ووضعها في أي مكان تريده.

العلامات والأزرار في الوقت نفسه

عند الجمع بينهما، تبدو التجربة كلوحة عرض دوّارة ولكن مع المزايا التالية:

• تعمل هذه الميزة حتى في حال إيقاف JavaScript.
• لا يتم ترطيب المحتوى أو تغيير حجمه بشكل غير متزامن (للحدّ من CLS).
• جاهز لجميع أنواع الرسوم المتحركة والتأثيرات عند التمرير.
• يتم تضمين ميزات تسهيل الاستخدام.
• متوافق مع اللمس والماوس ولوحة المفاتيح

إنجاز المزيد من المهام بسرعة أكبر وبجهد أقل

الموارد

تشير هذه المشاركة في الغالب إلى هذه الميزات باسم "لوحة العرض الدوّارة"، ولكنّ إمكاناتها وفائدتها تتجاوز بكثير حالات استخدام لوحة العرض الدوّارة. للحصول على صورة كاملة عن إمكانات هذه الميزات الجديدة، جرِّب "معرض لوحة العرض الدوّارة" واطّلِع على مكوّنات أخرى، مثل: scrollspy وعلامات التبويب والشرائح.

• معايير الويب
  • CSS Overflow 5
  • Carousel Explainer
  • WAI Aria Carousel
• ‫Chrome
  • Intent to Ship
  • معرض الرف الدائري
  • أداة ضبط لوحة العرض الدوّارة

أداة ضبط إعدادات لوحة العرض الدوّارة

بالنسبة إلى المتعلمين المرئيين والتفاعليين، جرِّب أداة ضبط لوحة العرض الدوّارة.

توفّر هذه الأداة مفاتيح تبديل، مثل أزرار التمرير، وعند تفعيلها، تظهر الأزرار على الفور في لوحة العرض الدوّارة المعروضة بالإضافة إلى ملف CSS المرتبط بها.

يتضمّن أيضًا أمثلة على مفاهيم أكثر تقدّمًا ذات صلة بمنصّة العرض الدوّارة:

• التفاعلية
• scroll-state
• الصور المتحركة المستندة إلى التمرير
• وأعمدة المحاذاة عند التمرير

معرض الرف الدائري

مساحة عرض مخصّصة للأشخاص الذين يريدون معرفة مدى إمكانية الاستفادة من هذه الميزات، والإجابة عن أسئلة مثل "هل يمكنها تنفيذ X؟". يستند كل عرض توضيحي إلى حالة استخدام تم العثور عليها على الإنترنت. يوضّح كل عرض توضيحي كيفية تنسيق هذه الأزرار والعلامات باستخدام الرسوم المتحركة المستندة إلى التمرير واستعلامات scroll-state() وغير ذلك الكثير.

معلومة طريفة: الموقع الإلكتروني بأكمله لا يستخدم JavaScript.

تتراوح الأمثلة بين البسيطة والممتعة إلى القوية والغنية بالميزات. يجب أن يكون تصفّح المعرض ملهمًا ومطمئنًا، وبالطبع يجب أن يكون قابلاً للفحص للحصول على الرمز. ابحث عن @layer utilities وافحصه للعثور على أدوات مساعدة يمكن أن تساعدك في إنشاء لوحات عرض دوّارة.

العمل الإضافي

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

إضافة عناصرك الخاصة

نعمل حاليًا على إتاحة إضافة مكوّناتك الخاصة لأزرار التمرير وعلامات التحديد. هذا يعني أنّه يمكنك توفير علامات <a> خاصة بك تتضمّن محتوًى غنيًا، مثل الرموز. يمكنك أيضًا استخدام أزرار متعددة الطبقات تم إنشاؤها باستخدام Tailwind.

التمرير الدوري

تلتف العديد من اللوحات الدوّارة حول نفسها عندما تصل إلى النهاية، مثل لعبة الأرجوحة الدوّارة في أحد المعارض. نحن على عِلم بهذه المشكلة وننوي تقديم حلّ لها على المنصة.

نأمل أن تستفيد من هذه الميزة. نتطلّع إلى أن يحصل جميع مستخدمي الويب الذين أوقفوا JavaScript على تجربة تصفّح سلسة، وأن يتم تقليل مقياس CLS بفضل تحسين توقيت دورة الحياة لدوّارة مدمجة.

جهد أقل، وتجارب مستخدم رائعة، وأداء أفضل: