إنشاء مكون تمرير الوسائط

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

Adam Argyle

في هذه المشاركة، أود أن أشارككم أفكارًا حول طرق إنشاء تمرير أفقي. وتجارب الويب بسيطة وذات استجابة سريعة ويمكن الوصول إليها وتعمل عبر المتصفحات والأنظمة الأساسية (مثل أجهزة التلفزيون). ندعوك لبدء العرض التوضيحي.

إليك نسخة من هذه المشاركة على YouTube إذا كنت تفضّل ذلك:

نظرة عامة

سنقوم ببناء تخطيط تمرير أفقي مخصص لاستضافة الصور المصغرة الوسائط أو المنتجات. يبدأ المكوِّن كقائمة <ul> متواضعة ولكنه باستخدام CSS إلى تجربة تصفُّح مُرضية وسلسة، ويعرض الصور ومحاذاةها إلى شبكة. تمت إضافة JavaScript لتسهيل تفاعلات الفهرس المتنقل، لمساعدة مستخدمي لوحة المفاتيح على تخطي اجتياز أكثر من 100 عنصر. بالإضافة إلى ذلك، يتم استخدام استعلام عن الوسائط التجريبي، prefers-reduced-data، لتحويل لتمرير الوسائط إلى تجربة خفيفة لتمرير العناوين.

البدء بترميز يمكن الوصول إليه

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

إرسال قائمة تتضمّن عنصر <ul>:

<ul class="horizontal-media-scroller">
  <li></li>
  <li></li>
  <li></li>
  ...
<ul>

جعل عناصر القائمة تفاعلية باستخدام عنصر <a>:

<li>
  <a href="#">
    ...
  </a>
</li>

استخدام عنصر <figure> لتمثيل دلالي مع صورة وشرحها:

<figure>
  <picture>
    <img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
  </picture>
  <figcaption>Legends</figcaption>
</figure>

لاحِظ السمتَين alt وloading على <img>. نص بديل للوسائط شريط التمرير هو فرصة تجربة مستخدم للمساعدة في إضافة سياق إضافي للصورة المصغّرة، أو نص احتياطي في حال عدم تحميل الصورة، أو توفير واجهة مستخدم منطوقة للمستخدمين الاعتماد على التكنولوجيا المساعدة مثل قارئ الشاشة. مزيد من المعلومات من خلال إضافة Five Gold قواعد النص البديل المتوافق النص.

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

دعم تفضيل نظام الألوان للمستخدم

استخدِم color-scheme كعلامة <meta> لإرسال إشارة إلى المتصفّح بأنّ صفحتك يريد كل من نمط وكيل المستخدم الفاتح والداكن. إنه الوضع الداكن المجاني أو الوضع الفاتح بناءً على نظرك:

<meta name="color-scheme" content="dark light">

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

مزيد من المعلومات من توماس شتاينر على https://web.dev/color-scheme/.

إضافة محتوى

في ضوء بنية محتوى ul > li > a > figure > picture > img أعلاه، فإن المهمة التالية هي إضافة الصور والعناوين للتمرير عبرها. لقد ملأت العرض التوضيحي صور ونص العنصر النائب الثابت، ولكن لا تتردد في تعزيز هذا من مصدر البيانات المفضل.

إضافة نمط باستخدام CSS

حان الوقت الآن لـ CSS لأخذ هذه القائمة العامة من المحتوى وتحويلها إلى المستخدم. تستخدم Netflix ومتاجر التطبيقات والعديد من المواقع الإلكترونية والتطبيقات التمرير بين المناطق لتعبئة إطار العرض بالفئات والخيارات.

إنشاء تنسيق شريط التمرير

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

تسمح الحاوية بتجاوز حجم العمود من خلال توفير الحجم الافتراضي مثل خاصية مخصصة. يتمحور تخطيط الشبكة هذا حول حجم العمود، إدارة التباعد والاتجاه فقط:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
  margin: 0;
}

يستخدم العنصر <picture> السمة المخصّصة بعد ذلك لإنشاء نسبة العرض إلى الارتفاع الأساسية، وهي مربّع:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

باستخدام عدد قليل فقط من الأنماط البسيطة، يمكنك إكمال كل ما يتعلق بشريط تمرير الوسائط:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  & > li {
    display: inline-block; /* removes the list-item bullet */
  }

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

يؤدي إعداد overflow إلى ضبط <ul> للسماح بالانتقال للأعلى أو للأسفل في لوحة المفاتيح. في قائمته، تتم إزالة ::marker لكل عنصر ثانوي مباشر <li> من خلال الحصول على نوع عرض جديد inline-block.

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

img {
  /* smash into whatever box it's in */
  inline-size: 100%;
  block-size: 100%;

  /* don't squish but do cover the space */
  object-fit: cover;

  /* soften the edges */
  border-radius: 1ex;
  overflow: hidden;

  /* if empty, show a gradient placeholder */
  background-image:
    linear-gradient(
      to bottom,
      hsl(0 0% 40%),
      hsl(0 0% 20%)
    );
}

تمرير المساحة المتروكة

تتم إتاحة المحاذاة مع محتوى الصفحة، بالإضافة إلى مساحة سطح التمرير من الحافة إلى الحافة أمرًا بالغ الأهمية لإنشاء مكون متناغم وبسيط.

لإنجاز تخطيط التمرير الشامل الذي يتوافق مع أسلوب الخط وأسطر التخطيط، استخدِم padding الذي يتطابق مع scroll-padding:

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}

إصلاح خطأ في المساحة المتروكة للتمرير الأفقي يوضح ما سبق مدى سهولة ملء حاوية تمرير، ولكن هناك مشاكل توافق عالقة فيها (تم الإصلاح في الإصدار 91 من Chromium أو الإصدارات الأحدث!). عرض هنا قليلاً من التاريخ، ولكن النسخة المختصرة هي أن المساحة المتروكة لم يتم احتسابها دائمًا في عرض التمرير.

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

.horizontal-media-scroller > li:last-of-type figure {
  position: relative;

  &::after {
    content: "";
    position: absolute;

    inline-size: var(--gap);
    block-size: 100%;

    inset-block-start: 0;
    inset-inline-end: calc(var(--gap) * -1);
  }
}

يتيح استخدام الخصائص المنطقية لشريط تمرير الوسائط العمل في أي وضع للكتابة وتوجيه المستند.

محاذاة التمرير

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

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block-end: calc(var(--gap) / 2);

  scroll-snap-type: inline mandatory;

  & figure {
    scroll-snap-align: start;
  }
}

التركيز

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

.horizontal-media-scroller a {
  outline-offset: 12px;

  &:focus {
    outline-offset: 7px;
  }

  @media (prefers-reduced-motion: no-preference) {
    & {
      transition: outline-offset .25s ease;
    }
  }
}

يساعد هذا الإجراء في تمييز نمط مخطط التركيز 7px عن العلبة، وإضافة لمسة لطيفة. مساحة. إذا لم يكن لدى المستخدم تفضيلات للحركة حول تقليل الحركة، فإن الإزاحة يتم نقلها، لإعطاء حركة خفية للحدث الذي يتم التركيز عليه.

المؤشر المتنقل

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

هناك 300 عنصر في شريط التمرير الأول لهذا العرض التوضيحي. يمكننا القيام بما هو أفضل من جعل ويجتازها جميعًا للوصول إلى القسم التالي.

لإنشاء هذه التجربة، يحتاج JavaScript إلى مراعاة أحداث لوحة المفاتيح والتركيز. أحداث. أنشأت مكتبة صغيرة مفتوحة المصدر على npm للمساعدة في جعل هذا المستخدم وتجربة يسهُل تحقيقها. إليك طريقة استخدامه لأشرطة التمرير الثلاثة:

import {rovingIndex} from 'roving-ux';

rovingIndex({
  element: someElement
});

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

document.querySelectorAll('.horizontal-media-scroller')
  .forEach(scroller =>
    rovingIndex({
      element: scroller,
      target: 'a',
}))

لمعرفة المزيد من المعلومات حول هذا التأثير، يُرجى الانتقال إلى مكتبة البرامج المفتوحة المصدر. roving-ux.

نسبة العرض إلى الارتفاع

اعتبارًا من كتابة هذه المشاركة، كان دعم aspect-ratio خلف في Firefox ولكنها متاحة في متصفحات Chromium أو أجهزة فك التشفير. نظرًا لأن يحدد تنسيق شبكة شريط تمرير الوسائط فقط الاتجاه والتباعد، ويمكن تغيير الحجم التغيير داخل استعلام الوسائط الذي تتحقق الميزة من دعم نسبة العرض إلى الارتفاع. التحسين التدريجي لاستخدام بعض أدوات تمرير الوسائط الأكثر ديناميكية

@supports (aspect-ratio: 1) {
  .horizontal-media-scroller figure > picture {
    inline-size: auto; /* for a block-size driven ratio */
    aspect-ratio: 1; /* boxes by default */

    @nest section:nth-child(2) & {
      aspect-ratio: 16/9;
    }

    @nest section:nth-child(3) & {
      /* double the size of the others */
      block-size: calc(var(--size) * 2);
      aspect-ratio: 4/3;

      /* adjust size to fit more items into the viewport */
      @media (width <= 480px) {
        block-size: calc(var(--size) * 1.5);
      }
    }
  }
}

إذا كان المتصفّح يتوافق مع بنية aspect-ratio، سيتم حفظ صور أشرطة تمرير الوسائط تمت الترقية إلى حجم aspect-ratio. باستخدام مسودة بناء جملة التداخل، يتم تعيين كل صورة تغير نسبة العرض إلى الارتفاع اعتمادًا على ما إذا كان الصف الأول أو الثاني أو الثالث. تشير رسالة الأشكال البيانية يسمح بنية Nest أيضًا بإعداد بعض الوحدات تعديلات إطار العرض، مباشرةً مع منطق الحجم الآخر.

وباستخدام خدمة CSS هذه، ونظرًا لتوفر هذه الميزة في المزيد من محركات المتصفحات، ومن السهل ولكن سيتم عرض تصميم أكثر جاذبية مرئيًا.

يُفضّل استخدام البيانات المخفّضة

في حين أن هذا الأسلوب التالي متاح فقط وراء علم في إصدار Canary، أردت أن أشارككم كيف يمكنني توفير قدر كبير من وقت تحميل الصفحة البيانات باستخدام بضعة أسطر من CSS. الاستعلام عن الوسائط prefers-reduced-data من المستوى 5 يسمح بالسؤال عما إذا كان الجهاز في أي حالات مخفّضة للبيانات، مثل وضع توفير البيانات. إذا كان الأمر كذلك، يمكنني تعديل المستند، وفي هذه الحالة، قم بإخفاء الصور.

figure {
  @media (prefers-reduced-data: reduce) {
    & {
      min-inline-size: var(--size);

      & > picture {
        display: none;
      }
    }
  }
}

لا يزال المحتوى قابلاً للتنقل، ولكن بدون تكلفة الصور الثقيلة تم تنزيله. في ما يلي الموقع الإلكتروني قبل إضافة خدمة مقارنة الأسعار (CSS) من prefers-reduced-data:

(7 طلبات، 100 كيلوبايت من الموارد في 131 مللي ثانية)

في ما يلي أداء الموقع الإلكتروني بعد إضافة خدمة مقارنة الأسعار (CSS) من prefers-reduced-data:

(71 طلبًا، 1.2 ميغابايت من الموارد في 1.07 ثانية)

64 طلبًا أقل، من المفترض أن تكون هذه الصور حوالى 60 صورة ضمن إطار العرض (اختبارات تم إجراؤها). في شاشة عريضة) في علامة تبويب المتصفح هذه، مع زيادة في تحميل الصفحة بنسبة 80% تقريبًا، 10% من البيانات عبر السلك. لغة CSS قوية جدًا.

الخاتمة

والآن بعد أن عرفت كيف فعلت ذلك، كيف حالك؟! 🙂

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

المصدر

• مصدر "تحديات واجهة المستخدم الرسومية" على GitHub

• بداية استخدام أداة الترميز لتصفّح الوسائط

ريمكسات من إنشاء المنتدى

ما من محتوى جديد حتى الآن.