ساخت مولفه پیشین رسانه

یک نمای کلی از نحوه ساخت یک نمای پیمایشی افقی پاسخگو برای تلویزیون، تلفن، دسکتاپ و غیره.

Adam Argyle

در این پست می‌خواهم درباره راه‌هایی برای ایجاد تجربه‌های اسکرول افقی برای وب که حداقل، واکنش‌گرا، در دسترس هستند و در مرورگرها و پلتفرم‌ها (مانند تلویزیون‌ها!) کار می‌کنند، فکر کنم. نسخه ی نمایشی را امتحان کنید.

اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:

بررسی اجمالی

ما یک طرح اسکرول افقی برای میزبانی تصاویر کوچک رسانه ها یا محصولات ایجاد خواهیم کرد. این مؤلفه به‌عنوان یک فهرست فروتن <ul> شروع می‌شود، اما با CSS به یک تجربه پیمایش رضایت‌بخش و روان تبدیل می‌شود و تصاویر را به نمایش می‌گذارد و آنها را به یک شبکه می‌چسباند. جاوا اسکریپت برای تسهیل تعاملات شاخص گردشی اضافه شده است و به کاربران صفحه کلید کمک می کند تا از بیش از 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> توجه کنید. متن جایگزین برای پیمایش رسانه یک فرصت UX برای کمک به ایجاد زمینه اضافی تصویر کوچک است، یا اگر تصویر بارگیری نشد، به عنوان متن بازگشتی، یا یک رابط کاربری گفتاری برای کاربرانی که به فناوری کمکی مانند صفحه‌خوان تکیه می‌کنند، ارائه می‌کند. با پنج قانون طلایی برای متن جایگزین سازگار بیشتر بیاموزید.

ویژگی 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 این لیست عمومی از محتوا را انتخاب کند و آن را به یک تجربه تبدیل کند. نتفلیکس، اپ استورها و بسیاری از سایت‌ها و برنامه‌های دیگر از نواحی پیمایش افقی برای بسته‌بندی نما با دسته‌ها و گزینه‌ها استفاده می‌کنند.

ایجاد طرح اسکرول

مهم است که از قطع کردن محتوا در چیدمان ها یا تکیه بر کوتاه کردن متن با بیضی اجتناب کنید. بسیاری از تلویزیون‌ها مانند این صفحه‌پیچ‌های رسانه دارند، اما اغلب به محتوای بی‌ضوی متوسل می‌شوند. این طرح ندارد! همچنین به محتوای رسانه اجازه می‌دهد تا اندازه ستون را نادیده بگیرد و 1 طرح را به اندازه کافی انعطاف‌پذیر می‌کند تا بتواند بسیاری از ترکیب‌های جالب را مدیریت کند.

ظرف اجازه می دهد تا با ارائه اندازه پیش فرض به عنوان یک ویژگی سفارشی، اندازه ستون را نادیده بگیرید. این طرح بندی شبکه ای در مورد اندازه ستون نظر دارد، فقط فاصله و جهت را مدیریت می کند:

.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> برای ایجاد نسبت ابعاد پایه ما استفاده می شود: a box:

.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> را تنظیم می‌کند تا امکان پیمایش و پیمایش صفحه‌کلید را در فهرست خود فراهم کند، سپس هر عنصر فرزند مستقیم <li> با دریافت نوع نمایشگر جدیدی از inline-block ::marker حذف می‌شود.

با این حال، تصاویر هنوز پاسخگو نیستند و درست از جعبه‌هایی که داخل آن هستند بیرون می‌آیند. آنها را با برخی از اندازه‌ها، تناسب، و سبک‌های حاشیه، و یک گرادیان پس‌زمینه برای زمانی که در حال بارگذاری تنبل هستند، رام کنید:

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

رفع اشکال padding اسکرول افقی موارد فوق نشان می دهد که قرار دادن یک محفظه اسکرول تا چه حد باید آسان باشد، اما مشکلات سازگاری قابل توجهی با آن وجود دارد (هر چند در Chromium 91+ رفع شد!). برای کمی تاریخچه اینجا را ببینید، اما نسخه کوتاه این است که padding همیشه در نمای پیمایشی در نظر گرفته نشده است.

برای فریب مرورگرها برای قرار دادن بالشتک در انتهای پیمایش، آخرین شکل در هر لیست را هدف قرار می‌دهم و یک عنصر شبه که به مقدار بالشتک مورد نظر است اضافه می‌کنم.

.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 و موارد دیگر ناشی می‌شود. بسیاری از پلتفرم‌های بازی‌های ویدیویی از یک اسکرولر رسانه‌ای بسیار شبیه به این مورد استفاده می‌کنند، به‌عنوان طرح‌بندی صفحه اصلی خود. تمرکز در اینجا یک لحظه UX بزرگ است، نه فقط یک اضافه کوچک. تصور کنید از این پیمایش رسانه از روی کاناپه خود با یک کنترل از راه دور استفاده کنید، به این تعامل چند پیشرفت کوچک بدهید:

.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 مورد در اولین اسکرول نسخه نمایشی وجود دارد. ما می‌توانیم بهتر از آن‌ها کاری کنیم که همه آنها را طی کنند تا به بخش بعدی برسند.

برای ایجاد این تجربه، جاوا اسکریپت باید رویدادهای صفحه کلید را مشاهده کند و رویدادها را متمرکز کند. من یک کتابخانه منبع باز کوچک در npm ایجاد کردم تا به سهولت این تجربه کاربری کمک کنم. در اینجا نحوه استفاده از آن برای 3 اسکرولر آورده شده است:

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 پشت پرچمی در فایرفاکس است اما در مرورگرهای 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 ارتقا می یابند. با استفاده از نحو پیش نویس تودرتو، هر تصویر نسبت ابعاد خود را بسته به اینکه ردیف اول، دوم یا سوم باشد تغییر می دهد. نحو آشیانه همچنین اجازه می دهد تا برخی تنظیمات کوچک درگاه دید را با منطق سایز دیگر تنظیم کنید.

با آن 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.07s)

64 درخواست کمتر، که 60 تصویر در پنجره دید (تست های انجام شده در صفحه نمایش گسترده) این برگه مرورگر، افزایش بارگذاری صفحه 80٪ و 10٪ از داده ها از طریق سیم است. CSS بسیار قدرتمند

نتیجه

حالا که می دانی من چگونه این کار را انجام دادم، شما چطور؟! 🙂

بیایید رویکردهایمان را متنوع کنیم و همه راه‌های ساخت در وب را بیاموزیم. یک Codepen ایجاد کنید یا نسخه نمایشی خود را میزبانی کنید، با آن برای من توییت کنید، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم.

منبع

• منبع چالش های رابط کاربری گرافیکی در GitHub

• پیمایش رسانه کدپن استارت

ریمیکس های انجمن

هنوز چیزی برای دیدن اینجا وجود ندارد!