ساخت انیمیشن CSS برای تعیین رتبه با ستاره – از صفر تا صد

در این مقاله به بررسی یک روش ساده اما قدرتمند برای استفاده از سلکتورهای فرزند قبلی در CSS به منظور ساخت انیمیشن CSS برای تعیین رتبه با ستاره می‌پردازیم. در ابتدای این مقاله مقداری در مورد مباحث نظری بحث خواهیم کرد. در نهایت کامپوننتی که می‌خواهیم بسازیم عملکردی مانند تصویر زیر دارد:

تعیین رتبه با ستاره در CSS

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

ما این مسئله را با استفاده از سلکتورهای CSS، انواع Display و Combinator–ها حل می‌کنیم. CSS خود یک زبان برنامه‌نویسی نیست، ‌بلکه یک زبان استایل شیت است که برای توصیف نمایش یک سند نوشته با یک زبان markup مانند HTML مورد استفاده قرار می‌گیرد. به بیان دیگر ما نمی‌توانیم به مرورگر بگوییم که چه کاری انجام دهد، بلکه می‌توانیم بگوییم که یک markup را چطور نمایش دهد.

با استفاده از شبه سلکتورهایی مانند hover ،:focus ‌،:focus-within: و checked: می‌توانیم رفتار کلیک کردن و لمس یک عنصر را در مدل شیء سند (DOM) یا به عبارت ساده‌تر در HTML رندر شده، تقلید کنیم.

توجه کنید که هیچ روش مستقیمی برای هدف‌گیری «هم‌نیای قبلی» (Previous Sibling) وجود ندارد و ما تنها می‌توانیم کانتینر والد، فرزند و موارد مرتبط را در روش آبشاری هدف‌گیری کنیم. اصولاً دلیل این که CSS استایل‌شیت‌های آبشاری نامیده شده، همین است. معنی آن چنین است که از نظر فنی نمی‌توانیم «‌هم‌نیای سابق» را انتخاب کنیم، اما می‌توانیم دقیقاً معکوس آن عمل کنیم، یعنی آن دو را ارائه کنیم.

بازنویسی الزامات قواعد CSS

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

فیلم آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS در فرادرس

کلیک کنید

گزینه یکم: نمایش Flex و flex-direction

از آنجا که می‌خواهیم یک ردیف را نمایش دهیم، خصوصیت flex-direction: row-reverse;‎ را روی کلاس star-rating. اعمال می‌کنیم تا ترتیب همه عناصر فرزند تغییر یابد. توجه کنید که ما تغییری در DOM ایجاد نمی‌کنیم، بلکه شیوه ارائه آن را تغییر می‌دهیم. بدین ترتیب HTML ما اینک به صورت زیر در آمده است:

CSS اعمال شده روی کلاس ‎.star-rating موجب می‌شود که ترتیب همه چیز معکوس شود.

رنگ ستاره را عوض می‌کنیم

به این منظور از ‎:hover برای تغییر رنگ روی ستاره منتخب استفاده می‌کنیم و با استفاده از CSS کامبیناتور هم‌نیای عمومی (~) را به جای کامبیناتور هم‌نیای مجاور (+) مورد استفاده قرار می‌دهیم. اگر از کامبیناتور مجاور استفاده می‌کردیم، باید کدی مانند زیر می‌نوشتیم:

حجم این کد بالا است. علاوه بر آن CSS نامناسبی دارد. از این رو به جای آن، کدی مانند زیر می‌نویسیم:

این کد بسیار آسان‌تر است.

توجه کنید که ما نه تنها هم‌نیای قبلی را استایل‌بندی می‌کنیم، بلکه هم‌نیای بعدی را نیز استایل‌بندی می‌کنیم، اما ترتیب ارائه آن‌ها را به کاربر عوض می‌کنیم.

گزینه دوم: استفاده از SCSS و Grid

در این بخش یک رویکرد SCSS را برای حل این مسئله ارائه می‌کنیم. توجه کنید که این روش یک رویکرد ضد الگو دارد و نباید در پروداکشن مورد استفاده قرار گیرد. در کد زیر از SCSS برای برنامه‌نویسی عملی قابلیت و تولید CSS نهایی استفاده کرده‌ایم:

این کد به صورت CSS زیر کامپایل می‌شود.

در اینجا ما 5 کلاس بی‌استفاده داریم که مساحت هر ستاره را توصیف می‌کنند. آن‌ها را به صورت دستی طوری بازچینی می‌کنیم که از grid-template استفاده کنند.

بدین ترتیب CSS را فریب می‌دهیم.

کاربردهای پیشرفته: SCSS Mixin

اگر دانش شما در زمینه CSS اندک است، در این صورت بهتر است مطالعه این بخش را تا زمانی که اطلاعات بیشتری کسب کنید به تأخیر بیندازید. اما اگر اعتماد به نفس بیشتری دارید، در این بخش یک آمیزه جالب برای استفاده ارائه می‌کنیم. شما می‌توانید بخش ‎:hover را نیز هر جا که دوست دارید حذف کنید:

در نهایت کد مثال ما به صورت زیر است. شما می‌توانید این فایل‌ها را روی سیستم خود کپی کرده و آن را در عمل بررسی کنید:

فایل HTML

فایل SCSS

به این ترتیب به پایان این مقاله می‌رسیم و امیدواریم این مطلب مورد توجه شما قرار گرفته باشد.