شمارش حرفه‌ای درخت‌ها: معرفی توابع CSS جادویی `sibling-index()` و `sibling-count()`

شمارش حرفه‌ای درخت‌ها: معرفی توابع CSS جادویی `sibling-index()` و `sibling-count()`

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

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

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

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