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

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

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

کاری که این توابع انجام می‌دهند بسیار ساده اما قدرتمند است: sibling-index() موقعیت (اندیس) هر فرزند را در میان خواهر و برادرهایش برمی‌گرداند و sibling-count() تعداد کل فرزندان یک المان والد را به شما می‌دهد. نتیجه؟ استایل‌دهی پویا و هوشمندانه‌ای که تا پیش از این فقط در حد رویا بود.

بدون توجه به اندازه پروژه شما، این توابع یکپارچه عمل می‌کنند؛ چه فقط ۵ المان داشته باشید و چه ۵,۰۰۰ المان در یک لیست طولانی. کد تمیزتر، نگهداری ساده‌تر و عملکرد بهتر، همگی در قالب دو تابع کوچک اما تأثیرگذار.

به نقل از کدیران معرفی این دو تابع را باید نه یک به‌روزرسانی جزئی، بلکه یک تغییر پارادایم واقعی در توسعه رابط کاربری بدانیم. سال‌هاست که توسعه‌دهندگان برای محاسبه موقعیت عناصر هم‌نیا (sibling) به هک‌های جاوااسکریپتی یا انتخابگرهای تو در توی nth-child متکی بوده‌اند؛ رویکردهایی که هم ناخواناترند، هم مستعد خطا و هم از نظر پردازشی پرهزینه‌تر. اکنون، CSS برای اولین بار به صورت بومی ساختار درختی DOM را می‌فهمد و این یعنی محاسبات مستقیماً در لایه استایل و توسط موتور رندر مرورگر انجام می‌شود تا سرعت رندرینگ افزایش یابد و مصرف CPU کاهش پیدا کند. این موضوع برای پلتفرم‌های برخط و مبتنی بر وب که کدیران نیز اخبار آن‌ها را دنبال می‌کند—از داشبوردهای داده‌محور گرفته تا اپلیکیشن‌های مالی با لیست‌های طولانی—به معنای انیمیشن‌های نرم‌تر، افت فریم کمتر و در نهایت تجربه کاربری بهتر است. پیش‌بینی می‌شود در یک تا دو سال آینده، با پخته شدن پیاده‌سازی این توابع در مرورگرهای اصلی، فریم‌ورک‌ها و کتابخانه‌های کامپوننت‌محور نیز به سرعت آن‌ها را بپذیرند و الگوهای طراحی جدیدی شکل بگیرد. توصیه کارشناسی کدیران به توسعه‌دهندگان این است که همین امروز با نسخه‌های آزمایشی کار کنند، پروژه‌های غیربحرانی خود را مهاجرت دهند و بازخوردهایشان را ثبت کنند تا در زمان انتشار رسمی، یک گام جلوتر از رقبا باشند.

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