توابع sibling-index() و sibling-count(): پایان دوران :nth-child() در CSS؟

توابع sibling-index() و sibling-count(): پایان دوران :nth-child() در CSS؟

توابع جدید sibling-index() و sibling-count() به تازگی معرفی شده‌اند و قرار است روش توسعه‌دهندگان را برای شمارش عناصر خواهرخوانده در DOM کاملاً متحول کنند. این توابع که اکنون در نسخه‌های آزمایشی مرورگرها در دسترس قرار گرفته‌اند، به شما اجازه می‌دهند بدون نیاز به نوشتن قوانین پیچیده :nth-child() یا تکیه بر راه‌کارهای جاوااسکریپتی، شماره و تعداد خواهرخوانده‌های هر عنصر را مستقیماً در CSS به دست آورید.

یکی از جذاب‌ترین کاربردهای این توابع، ایجاد افکت آبشاری پلکانی (Staggered Cascade) تنها با یک خط کد CSS است. تصور کنید می‌خواهید انیمیشن ورود ۵ یا حتی ۵٬۰۰۰ آیتم را با تأخیرهای متوالی اجرا کنید؛ پیش از این چنین کاری نیازمند محاسبات دستی یا اسکریپت‌های جانبی بود، اما اکنون با ترکیب sibling-index() و تابع calc() در عرض چند ثانیه انجام می‌شود.

نکته کلیدی دیگر، مقیاس‌پذیری است؛ فرقی نمی‌کند پروژه شما ۵ المان داشته باشد یا ۵٬۰۰۰، این توابع عملکردی یکنواخت و مستقل از تعداد عناصر ارائه می‌دهند. این ویژگی، آن‌ها را برای اپلیکیشن‌های بزرگ و پلتفرم‌هایی که لیست‌های پویا و طولانی تولید می‌کنند، به یک نقطه عطف واقعی تبدیل کرده است.

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