انقلاب در CSS: تابع‌های جدید sibling-index() و sibling-count() برای افکت‌های پلکانی بدون دردسر

انقلاب در CSS: تابع‌های جدید sibling-index() و sibling-count() برای افکت‌های پلکانی بدون دردسر

تا حالا برای ساخت افکت‌های پلکانی (Staggered) مجبور بودید یا از :nth-child() استفاده کنید و کلی کد تکراری بنویسید، یا به سراغ جاوااسکریپت و کارهای پیچیده بروید. اما حالا با دو تابع جدید CSS به نام‌های sibling-index() و sibling-count()، این کار فقط به یک خط کد نیاز داره! این توابع به شما اجازه می‌دن تعداد و اندیس هر عنصر رو نسبت به هم‌خانواده‌هاشون حساب کنید و به راحتی افکت‌های تاخیری و پلکانی بسازید؛ چه ۵ آیتم داشته باشید، چه ۵۰۰۰ تا.

این قابلیت تازه که توسط مرورگرها در حال پشتیبانیه، یه گام بزرگ به سمت ساده‌سازی و کاهش وابستگی به جاوااسکریپته. دیگه خبری از کلاس‌های اضافه یا محاسبات دستی نیست؛ فقط کافیه از sibling-index() برای دسترسی به شماره هر آیتم (مثلاً برای تنظیم delay) و sibling-count() برای دانستن تعداد کل آیتم‌ها استفاده کنید. این یعنی یه دنیا امکانات جدید برای انیمیشن‌ها، لیست‌ها، منوها و هر جایی که نیاز به افکت‌های پلکانی دارین.

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

منبع: SmashingMagazine (مشاهده متن اصلی)