چرخ فلک با CSS

Adam Argyle

منتشر شده: ۲۰ مارس ۲۰۲۵

از کروم ۱۳۵ به بعد، می‌توانید از ویژگی‌های CSS Overflow 5 که برای ایجاد تجربه‌های اسکرول و چرخ و فلک طراحی شده‌اند، استفاده کنید.

این پست مروری بر بسیاری از تجربیات مختلف پیمایش و چرخ فلک است که با استفاده از این ویژگی‌های جدید و بدون جاوا اسکریپت ساخته شده‌اند. ویدیوی زیر را تماشا کنید و از آنچه اکنون می‌توان به دست آورد هیجان‌زده شوید.

در این ویدیو، هماهنگی بین دکمه‌های اسکرول، نشانگرهای اسکرول، انیمیشن‌های اسکرول-رانده شده، کوئری‌های scroll-state()، :has()، گرید، انکر و موارد دیگر نشان داده شده است.

داستان دسترسی‌پذیری حتی چشمگیرتر است.

به لطف همکاری تیم‌های مهندسی و دسترسی‌پذیری، بهترین شیوه‌های کار با چرخ فلک توسط مرورگر مدیریت می‌شوند. ساختن چرخ فلکی با دسترسی‌پذیری بیشتر از این بسیار دشوار خواهد بود.

با ::scroll-button() و ::scroll-marker() آشنا شوید

یک چرخ و فلک یک ناحیه اسکرول است که حداکثر دو قابلیت رابط کاربری به آن اضافه شده است - دکمه‌ها و نشانگرها.

در نسخه اول ویژگی‌های چرخ فلک CSS، دکمه‌ها و نشانگرها از CSS ساخته می‌شوند. مرورگر عناصر را به صورت خواهر و برادر، با نقش‌های مناسب، در ترتیب تب مناسب قرار می‌دهد و حالت آنها را حفظ می‌کند. این امر توسعه یک چرخ فلک قابل دسترس را آسان‌تر می‌کند.

• دکمه‌های اسکرول
  عناصر <button> با قابلیت پیمایش تعاملی، حالت‌مند و ارائه شده توسط مرورگر که به دسترسی به محتوا کمک می‌کند و با فشردن آن، ۸۵٪ از ناحیه پیمایش پیمایش می‌شود.

• نشانگرهای پیمایش
  عناصر ناوبری <a> با قابلیت نمایش وضعیت که در مرورگر ارائه می‌شوند و به دسترسی به محتوا برای هر مورد درخواستی در ناحیه اسکرول کمک می‌کنند.

ادامه‌ی این پست نحوه‌ی ساخت یک چرخ و فلک با استفاده از این ویژگی‌های جدید را نشان می‌دهد.

با یک اسکرول شروع کنید

شما می‌توانید دکمه‌ها و نشانگرها را به هر ناحیه پیمایش در سایت خود اضافه کنید.

کد CSS زیر یک ناحیه اسکرول اولیه برای استفاده در مراحل بعدی جهت اضافه کردن دکمه‌ها و نشانگرها ایجاد می‌کند. قابلیت اسکرول اسنپینگ برای یک carousel لازم نیست، اما در این مثال از آن استفاده شده است. carouselها همچنین برای اسکرولرهای عمودی و اسکرولرهای دو جهته نیز کار می‌کنند.

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

اضافه کردن دکمه‌های اسکرول با استفاده از ::scroll-button()

بسته به سیستم عامل شما، ممکن است دکمه‌های اسکرول در اطراف نوارهای اسکرول شما وجود داشته باشند. دکمه‌های اسکرول داخلی معمولاً ناحیه اسکرول را جابجا می‌کنند، در حالی که دکمه‌های اسکرول CSS، ۸۵٪ ناحیه اسکرول را جابجا می‌کنند.

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

برای اضافه کردن دکمه‌های اسکرول با 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 با نوار اسکرول متفاوت است زیرا هر نشانگر پیوندی است که می‌تواند هر آیتمی را در اسکرولر نشان دهد.

به عنوان مثالی از این تمایز، فصل‌های یک سریال تلویزیونی را در نظر بگیرید. به جای اینکه برای هر یک از 10 قسمت یک نشانگر درست کنید، 2 نشانگر ایجاد کنید که به ابتدای فصل بروند.

توجه داشته باشید که این نشانگرها نقطه نیستند، بلکه از ویژگی content: "Season 1" در شبه عنصر خود استفاده می‌کنند. نشانگرها همچنین می‌توانند تصاویر کوچک باشند که معمولاً برای چرخ و فلک‌های گالری در تجارت الکترونیک یا وب‌سایت‌های متمرکز بر عکس استفاده می‌شوند.

نشانگرها مانند پیوندهای درون صفحه‌ای <a> هستند، اما ویژگی‌های خاصی دارند:

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

نشانگرها و دکمه‌ها به طور همزمان

این دو را کنار هم قرار دهید، تجربه کاربری شبیه یک چرخ و فلک می‌شود اما مزایای زیر را دارد:

• با غیرفعال بودن جاوا اسکریپت کار می‌کند.
• بدون آب‌رسانی یا با تنبلی سایز می‌شود (CLS را کاهش دهید).
• آماده برای انواع انیمیشن‌های اسکرول و تریگرها.
• دسترسی‌پذیری گنجانده شده است.
• سازگار با لمس، ماوس و صفحه کلید.

کمتر انجام بده، بیشتر برس، سریع‌تر.

منابع

این پست بیشتر به این ویژگی‌ها با عنوان «چرخ فلک» اشاره می‌کند، اما قابلیت‌ها و سودمندی آنها بسیار فراتر از موارد استفاده از چرخ فلک است. برای درک کامل پتانسیل این ویژگی‌های جدید، گالری چرخ فلک را امتحان کنید و اجزای دیگر مانند: scrollspy، tabs و slides را ببینید.

• استانداردهای وب
  • سرریز CSS 5
  • توضیح چرخ فلک
  • چرخ و فلک آریا WAI
• کروم
  • قصد ارسال
  • گالری چرخ فلک
  • پیکربندی چرخ فلک

پیکربندی چرخ فلک

برای زبان‌آموزان بصری و تعاملی، Carousel Configurator را امتحان کنید.

این برنامه سوئیچ‌هایی را ارائه می‌دهد، مثلاً دکمه‌های اسکرول، و وقتی چرخ فلک نشان داده شده فعال شود، بلافاصله دکمه‌ها به همراه CSS مربوطه استفاده شده ظاهر می‌شوند.

همچنین شامل نمونه‌هایی از مفاهیم پیشرفته‌تر است که در مجاورت چرخ فلک قرار دارند:

• تعامل
• حالت اسکرول
• انیمیشن اسکرول محور
• و ستون‌های فوری را اسکرول کنید

گالری چرخ فلک

فضایی نمایشی برای کسانی که کنجکاوند بدانند این ویژگی‌ها تا چه حد می‌توانند پیش بروند و به سوالاتی مانند «آیا می‌تواند X را انجام دهد؟» پاسخ می‌دهند. هر دمو بر اساس یک مورد استفاده در اینترنت است. هر دمو نشان می‌دهد که چگونه می‌توان این دکمه‌ها و نشانگرها را با انیمیشن اسکرول محور ، کوئری‌های scroll-state() و موارد دیگر هماهنگ کرد.

نکته جالب این است که کل سایت بدون جاوا اسکریپت است.

مثال‌ها از سادگی لذت‌بخش تا استحکام فوق‌العاده و ویژگی‌های غنی متغیر هستند. مرور گالری باید الهام‌بخش، اطمینان‌بخش و البته قابل بررسی برای کد باشد. @layer utilities برای ابزارهایی که می‌توانند به شما در ساخت چرخ و فلک کمک کنند، پیدا کنید و بررسی کنید.

کار بیشتر

ما به این که این ویژگی‌ها چقدر خوب با تمام HTML و CSS ادغام می‌شوند، افتخار می‌کنیم. دسترسی به یک carousel CSS درجه یک است. عملکرد یک carousel CSS از هر راه‌حل جاوا اسکریپتی بهتر است. تجربه کاربری یک carousel CSS طبیعی، روان و غنی است. با این حال، راه‌هایی برای بهبود وجود دارد.

المان‌های خودتان را بیاورید

کارهایی در حال انجام است تا بتوانید اجزای خودتان را برای دکمه‌های اسکرول و نشانگرها اضافه کنید. این بدان معناست که می‌توانید تگ‌های <a> خودتان را که محتوای غنی مانند آیکون‌ها دارند، ارائه دهید. همچنین می‌توانید دکمه‌های چندلایه خودتان را که با Tailwind ساخته شده‌اند، بیاورید.

پیمایش چرخه‌ای

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

امیدواریم از این ویژگی لذت ببرید. مشتاقانه منتظر همه کاربران وب «غیرفعال‌شده با جاوا اسکریپت» هستیم که اکنون یک تجربه پیمایش خوب و تمام کاهش‌های CLS را که از چرخه عمر بهتر و زمان‌بندی‌شده یک چرخ فلک داخلی حاصل می‌شود، دریافت خواهند کرد.

کارهای کمتری برای شما، تجربیات کاربری عالی، عملکرد بهتر.