پایان دوران nth-child! آشنایی با توابع جدید sibling-index() و sibling-count() در CSS

پایان دوران nth-child! آشنایی با توابع جدید sibling-index() و sibling-count() در CSS

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

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

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

به نقل از کدیران

در سال‌های اخیر شاهد بوده‌ایم که CSS از یک زبان ساده برای استایل دادن، به ابزاری کامل برای چیدمان و انیمیشن تبدیل شده است. معرفی توابع sibling-index() و sibling-count() ادامه همین مسیر و گامی در جهت «استایل‌نویسی اعلانی» است؛ رویکردی که به جای نوشتن دستی قوانین برای هر المان، روابط ریاضی بین عناصر را یک‌جا تعریف می‌کند.

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

اما نکته مهم این است که این توابع همچنان آزمایشی و در حال توسعه هستند؛ پس استفاده در محیط عملیاتی نیازمند صبر و رویکرد پیشرونده (Progressive Enhancement) است. با این حال، روند کلی روشن است: مرورگرها در حال جذب قابلیت‌هایی هستند که روزگاری انحصار جاوااسکریپت بود. اگر این توابع به پشتیبانی گسترده برسند، می‌توانند به اندازه calc() یا فلکس‌باکس بنیادی شوند و نحوه نوشتن کدهای فرانت‌اند، به‌ویژه در محصولات وب۳ و رابط‌های صرافی‌ها، را دگرگون کنند.

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