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

Adam Argyle

تاريخ النشر: 20 آذار (مارس) 2025

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

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

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

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

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

لقطة شاشة لآلة العرض الدوّارة لشجرة تسهيل الاستخدام في "أدوات مطوّري البرامج في Chrome"— الإصدار التجريبي

التعرّف على ::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 من منطقة التمرير.

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

ملاحظة: إذا كنت تريد أن تنقل الأزرار عنصرًا واحدًا فقط في المرة الواحدة، استخدِم scroll-snap-type: x mandatory مع scroll-snap-stop: always في كل عنصر ثانوي من عناصر المقطع.

لإضافة أزرار للانتقال للأعلى أو للأسفل باستخدام 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: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

الإصدار التجريبي

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

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

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

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

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

الإصدار التجريبي

الموارد

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

• معايير الويب
  • CSS Overflow 5
  • شرح لوحة العرض الدوّارة
  • منصة العرض الدوّارة WAI Aria
• Chrome
  • Intent to Ship (نية الشحن)
  • معرض الرف الدائري
  • أداة ضبط لوحة العرض الدوّارة

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

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

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

https://chrome.dev/carousel-configurator/

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

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

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

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

من المثير للاهتمام أنّ الموقع الإلكتروني بأكمله لا يستخدم JavaScript.

https://chrome.dev/carousel/

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

مزيد من العمل

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

إحضار العناصر الخاصة بك

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

الانتقال إلى الأسفل أو للأعلى بشكل دوري

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

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

تقليل الإجراءات التي عليك اتّخاذها، وتقديم تجارب رائعة للمستخدمين، وتحسين الأداء