آشنایی با CSS Counters

مقدمه‌ای بر CSS Counters

CSS Counters یکی از ابزارهای قدرتمند و جذاب در زبان CSS است که به شما اجازه می‌دهد تا شمارنده‌های خودکار ایجاد کنید. این ویژگی معمولاً در لیست‌ها کاربرد دارد، جایی که می‌خواهید آیتم‌ها را شماره‌گذاری کنید. گرچه این امکان در HTML وجود دارد، اما CSS Counters به شما این اجازه را می‌دهد تا کنترل بیشتری بر استایل‌دهی این شماره‌ها داشته باشید.

یکی از کاربردهای جالب CSS Counters، استفاده از آن برای ایجاد تنها شماره‌گذاری نیست؛ بلکه شما می‌توانید از آن برای اهداف دیگر نیز بهره ببرید. به عنوان مثال، می‌توانید در صفحاتی که دارای بخش‌های متعددی هستند، برای هر بخش یک شمارنده منحصر به فرد داشته باشید.

ساختار CSS Counters به این صورت است که شما ابتدا یک نام برای شمارنده تعریف می‌کنید و سپس مانند یک متغیر، آن را استفاده و مقداردهی می‌نمایید. با این کار، شما قادر خواهید بود تا شمارنده‌ها را به روش‌های متنوعی نمایش داده و از آنها در ایجاد تجربه کاربری بهتر در وب‌سایت‌ها بهره ببرید.

در ادامه، به نحوه پیاده‌سازی CSS Counters با یک مثال ساده می‌پردازیم. این مثال مراحل ایجاد و استفاده از شمارنده‌ها را به صورت عملی نشان می‌دهد. با ما همراه باشید تا نحوه استفاده از شمارنده‌ها در CSS را به صورت دقیق‌تر یاد بگیرید.

نمونه کد برای CSS Counters

<style>
  body {
    counter-reset: section; /* ایجاد و reset شمارنده */
  }
  h2::before {
    counter-increment: section; /* افزایش مقدار شمارنده */
    content: "Section " counter(section) ". "; /* نمایش مقدار شمارنده */
  }
</style>
<h2>Title 1</h2>
<p>برخی از محتوا برای بخش اول.</p>
<h2>Title 2</h2>
<p>بیشتر محتوا برای بخش دوم.</p>

توضیحات خط به خط