Tailwind CSS Peer Variants: مسلط شدن بر استایل دهی عناصر هم سطح

Tailwind CSS با ارائه یک رویکرد utility-first که فرآیند استایل‌دهی را تسریع می‌کند، انقلابی در توسعه فرانت‌اند ایجاد کرده است. در حالی که ویژگی‌های اصلی Tailwind قدرتمند هستند، peer variants آن سطح پیشرفته‌ای از کنترل بر استایل‌دهی عناصر را بر اساس وضعیت همتایان خود ارائه می‌دهند. این راهنما به پیچیدگی‌های peer variants می‌پردازد و نحوه استفاده مؤثر از آن‌ها برای ایجاد رابط‌های کاربری پویا و تعاملی را نشان می‌دهد.

درک Peer Variants

Peer variants به شما این امکان را می‌دهند که یک عنصر را بر اساس وضعیت (به عنوان مثال، hover، focus، checked) یک عنصر هم سطح استایل دهید. این کار با استفاده از کلاس peer در Tailwind همراه با سایر انواع مبتنی بر وضعیت مانند peer-hover، peer-focus و peer-checked انجام می‌شود. این انواع از ترکیب‌کننده‌های هم سطح CSS برای هدف قرار دادن و استایل دادن به عناصر مرتبط استفاده می‌کنند.

اساساً، کلاس peer به عنوان یک نشانگر عمل می‌کند و به انواع مبتنی بر peer بعدی اجازه می‌دهد تا عناصر هم سطحی را که عنصر علامت‌گذاری‌شده را در درخت DOM دنبال می‌کنند، هدف قرار دهند.

مفاهیم کلیدی

• کلاس peer: این کلاس باید به عنصری اعمال شود که وضعیت آن باعث تغییر استایل در همتایانش می‌شود.
• انواع peer-*: این انواع (به عنوان مثال، peer-hover، peer-focus، peer-checked) به عناصری اعمال می‌شوند که می‌خواهید وقتی عنصر peer در حالت مشخص شده است، استایل دهید.
• ترکیب‌کننده‌های هم سطح: Tailwind CSS از ترکیب‌کننده‌های هم سطح (به طور خاص انتخابگر هم سطح مجاور + و انتخابگر هم سطح عمومی ~) برای هدف قرار دادن عناصر استفاده می‌کند.

نحو و کاربرد اولیه

نحو اولیه برای استفاده از peer variants شامل اعمال کلاس peer به عنصر محرک و سپس استفاده از انواع peer-* روی عنصر هدف است.

مثال: استایل دادن به یک پاراگراف زمانی که یک چک باکس انتخاب شده است

<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer" />
  <span>فعال کردن حالت تاریک</span>
</label>
<p class="hidden peer-checked:block text-gray-700">
  حالت تاریک اکنون فعال شده است.
</p>

در این مثال، کلاس peer به عنصر <input type="checkbox"/> اعمال می‌شود. عنصر پاراگراف، که هم سطح چک باکس است، دارای کلاس peer-checked:block است. این بدان معناست که وقتی چک باکس انتخاب می‌شود، نمایش پاراگراف از hidden به block تغییر می‌کند.

مثال‌های عملی و موارد استفاده

Peer variants طیف گسترده‌ای از امکانات را برای ایجاد اجزای رابط کاربری پویا و تعاملی باز می‌کنند. در اینجا چند مثال عملی آورده شده است که تطبیق پذیری آنها را نشان می دهد:

1. برچسب‌های فرم تعاملی

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

<div>
  <label for="name" class="block text-gray-700 font-bold mb-2 peer-focus:text-blue-500 transition-colors duration-200">
    نام:
  </label>
  <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
</div>

در این مثال، کلاس peer به فیلد ورودی اعمال می‌شود. وقتی فیلد ورودی در حالت focus قرار دارد، کلاس peer-focus:text-blue-500 روی برچسب رنگ متن برچسب را به آبی تغییر می‌دهد و یک نشانه بصری برای کاربر ارائه می‌کند.

2. آکاردئون/بخش های جمع شدنی

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

<div>
  <button class="w-full text-left py-2 px-4 bg-gray-100 hover:bg-gray-200 focus:outline-none peer">
    عنوان بخش
  </button>
  <div class="hidden peer-focus:block bg-white py-2 px-4">
    <p>محتوای بخش.</p>
  </div>
</div>

در اینجا، کلاس peer به دکمه اعمال می‌شود. div محتوا دارای کلاس های hidden peer-focus:block است. اگرچه این مثال از حالت 'focus' استفاده می کند، اما توجه به این نکته مهم است که ویژگی های ARIA مناسب (به عنوان مثال، `aria-expanded`) و JavaScript ممکن است برای دسترسی و عملکرد پیشرفته در یک پیاده سازی آکاردئون در دنیای واقعی مورد نیاز باشد. سازگاری ناوبری صفحه کلید و صفحه خوان را در نظر بگیرید.

3. استایل دهی لیست پویا

موارد لیست را با استفاده از peer variants در حالت hover یا focus برجسته کنید.

<ul>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">آیتم 1</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(جزئیات)</span>
  </li>
  <li>
    <a href="#" class="block py-2 px-4 hover:bg-gray-100 focus:outline-none peer">آیتم 2</a>
    <span class="hidden peer-hover:inline peer-focus:inline text-gray-500 ml-2">(جزئیات)</span>
  </li>
</ul>

در این مورد، کلاس peer به تگ anchor در هر مورد لیست اعمال می‌شود. وقتی تگ anchor hover یا focus شود، عنصر span مجاور نمایش داده می شود و جزئیات بیشتری ارائه می دهد.

4. استایل دهی بر اساس اعتبار ورودی

بر اساس اعتبار ورودی خود در فیلدهای فرم، بازخورد بصری به کاربران ارائه دهید.

<div>
  <label for="email" class="block text-gray-700 font-bold mb-2">ایمیل:</label>
  <input type="email" id="email" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline peer" />
  <p class="hidden peer-invalid:block text-red-500 text-sm mt-1">لطفاً یک آدرس ایمیل معتبر وارد کنید.</p>
</div>

در اینجا، ما از شبه کلاس :invalid (به طور بومی توسط مرورگرها پشتیبانی می شود) و نوع peer-invalid استفاده می کنیم. اگر ورودی ایمیل نامعتبر باشد، پیام خطا نمایش داده می شود.

5. دکمه های رادیویی و چک باکس های سفارشی

با استفاده از peer variants برای استایل دهی اندیکاتورهای سفارشی، دکمه های رادیویی و چک باکس های بصری جذاب و تعاملی ایجاد کنید.

<label class="inline-flex items-center">
  <input type="radio" class="form-radio h-5 w-5 text-blue-600 peer" name="radio" value="option1" />
  <span class="ml-2 text-gray-700 peer-checked:text-blue-600">گزینه 1</span>
  <span class="ml-2 hidden peer-checked:inline-block w-5 h-5 rounded-full bg-blue-600"></span>
</label>

در این مثال، از نوع peer-checked برای استایل دهی متن برچسب و یک نشانگر سفارشی (span رنگی) هنگام انتخاب دکمه رادیویی استفاده می شود.

تکنیک ها و ملاحظات پیشرفته

ترکیب Peer Variants با سایر Variants

Peer variants را می توان با سایر Tailwind variants مانند hover، focus و active ترکیب کرد تا تعاملات پیچیده تر و دقیق تری ایجاد کرد.

<button class="peer bg-gray-200 hover:bg-gray-300 focus:outline-none focus:bg-gray-300"
        >
  Hover me
</button>
<p class="hidden peer-hover:block peer-focus:block">این در هنگام hover یا focus نشان داده می شود</p>

این مثال هنگامی که دکمه hover یا focus شود، پاراگراف را نشان می دهد.

استفاده از ترکیب کننده های هم سطح عمومی (~)

در حالی که ترکیب کننده هم سطح مجاور (+) رایج تر است، ترکیب کننده هم سطح عمومی (~) می تواند در سناریوهای خاصی مفید باشد که عنصر هدف بلافاصله در مجاورت عنصر peer نیست.

مثال: استایل دادن به تمام پاراگراف های بعدی بعد از یک چک باکس.

<input type="checkbox" class="peer" />
<p>پاراگراف 1</p>
<p class="peer-checked:text-green-500">پاراگراف 2</p>
<p class="peer-checked:text-green-500">پاراگراف 3</p>

در این مثال، هنگامی که چک باکس انتخاب می شود، رنگ متن تمام پاراگراف های بعدی به سبز تغییر می کند.

ملاحظات دسترسی

هنگام استفاده از peer variants، توجه به دسترسی بسیار مهم است. اطمینان حاصل کنید که تعاملاتی که ایجاد می کنید برای افراد دارای معلولیت قابل استفاده و قابل درک هستند. این شامل:

• ناوبری صفحه کلید: اطمینان حاصل کنید که همه عناصر تعاملی از طریق صفحه کلید قابل دسترسی هستند. از حالت focus به درستی استفاده کنید.
• صفحه خوان ها: برای انتقال وضعیت و هدف عناصر به کاربران صفحه خوان، ویژگی های ARIA مناسب را ارائه دهید. به عنوان مثال، از aria-expanded برای بخش های جمع شدنی و aria-checked برای چک باکس ها و دکمه های رادیویی سفارشی استفاده کنید.
• کنتراست رنگ: از کنتراست رنگ کافی بین متن و رنگ های پس زمینه اطمینان حاصل کنید، به خصوص هنگام استفاده از peer variants برای تغییر رنگ ها بر اساس حالت های عنصر.
• نشانه های بصری واضح: نشانه های بصری واضحی برای نشان دادن وضعیت عناصر ارائه دهید. فقط به تغییر رنگ ها تکیه نکنید. از سایر نشانگرهای بصری مانند آیکون ها یا انیمیشن ها استفاده کنید.

ملاحظات عملکرد

در حالی که peer variants راهی قدرتمند برای استایل دادن به عناصر هم سطح ارائه می دهند، توجه به عملکرد ضروری است. استفاده بیش از حد از peer variants، به خصوص با استایل های پیچیده یا تعداد زیادی از عناصر، می تواند به طور بالقوه بر عملکرد صفحه تأثیر بگذارد. استراتژی های بهینه سازی زیر را در نظر بگیرید:

• محدود کردن محدوده: از peer variants به طور محدود و فقط در صورت لزوم استفاده کنید. از اعمال آنها به بخش های بزرگی از صفحه خودداری کنید.
• ساده کردن استایل ها: استایل های اعمال شده از طریق peer variants را تا حد امکان ساده نگه دارید. از انیمیشن ها یا انتقالات پیچیده خودداری کنید.
• Debounce/Throttle: اگر از peer variants در رابطه با رویدادهای JavaScript (به عنوان مثال، رویدادهای پیمایش) استفاده می کنید، debounce یا throttle کردن کنترل کننده رویداد را در نظر بگیرید تا از به روز رسانی های بیش از حد استایل جلوگیری شود.

عیب یابی مشکلات رایج

در اینجا برخی از مشکلات رایجی که ممکن است هنگام کار با peer variants با آن مواجه شوید و نحوه عیب یابی آنها آورده شده است:

• استایل ها اعمال نمی شوند:
  • اطمینان حاصل کنید که کلاس peer به عنصر صحیح اعمال شده است.
  • تأیید کنید که عنصر هدف هم سطح عنصر peer است. Peer variants فقط با عناصر هم سطح کار می کنند.
  • مشکلات خاص بودن CSS را بررسی کنید. قوانین CSS خاص تر ممکن است استایل های peer variant را نادیده بگیرند. در صورت لزوم از اصلاح کننده !important Tailwind استفاده کنید (اما در استفاده از آن صرفه جویی کنید).
  • CSS تولید شده را بررسی کنید. از ابزارهای توسعه دهنده مرورگر خود برای بررسی CSS تولید شده استفاده کنید و تأیید کنید که استایل های peer variant به درستی اعمال می شوند.
• رفتار غیر منتظره:
  • استایل های متضاد را بررسی کنید. اطمینان حاصل کنید که هیچ قانون CSS دیگری وجود ندارد که در استایل های peer variant تداخل ایجاد کند.
  • ساختار DOM را تأیید کنید. مطمئن شوید که ساختار DOM همانطور که انتظار می رود است. تغییرات در ساختار DOM می تواند بر نحوه عملکرد peer variants تأثیر بگذارد.
  • در مرورگرهای مختلف تست کنید. برخی از مرورگرها ممکن است CSS را کمی متفاوت مدیریت کنند. کد خود را در مرورگرهای مختلف تست کنید تا از رفتار سازگار اطمینان حاصل کنید.

جایگزین های Peer Variants

در حالی که peer variants یک ابزار قدرتمند هستند، رویکردهای جایگزینی وجود دارند که می توانند در برخی موارد استفاده شوند. این جایگزین ها بسته به الزامات خاص پروژه شما ممکن است مناسب تر باشند.

• JavaScript: JavaScript بیشترین انعطاف پذیری را برای استایل دادن به عناصر بر اساس تعاملات پیچیده فراهم می کند. می توانید از JavaScript برای افزودن یا حذف کلاس ها بر اساس حالت های عنصر استفاده کنید.
• ویژگی های سفارشی CSS (متغیرها): از ویژگی های سفارشی CSS می توان برای ذخیره و به روز رسانی مقادیری استفاده کرد که می توانند برای استایل دادن به عناصر استفاده شوند. این می تواند برای ایجاد تم ها یا استایل های پویا که بر اساس ترجیحات کاربر تغییر می کنند مفید باشد.
• شبه کلاس CSS :has() (نسبتاً جدید، سازگاری مرورگر را بررسی کنید): شبه کلاس `:has()` به شما امکان می دهد عنصری را انتخاب کنید که حاوی یک عنصر فرزند خاص باشد. در حالی که جایگزینی مستقیم برای peer variants نیست، می توان از آن در برخی موارد برای دستیابی به نتایج مشابه استفاده کرد. این یک ویژگی جدیدتر CSS است و ممکن است توسط همه مرورگرها پشتیبانی نشود.

نتیجه گیری

Tailwind CSS peer variants راهی قدرتمند و ظریف برای استایل دادن به عناصر هم سطح بر اساس وضعیت یک عنصر دیگر ارائه می دهند. با تسلط بر peer variants، می توانید رابط های کاربری پویا و تعاملی ایجاد کنید که تجربه کاربری را بهبود می بخشد. به یاد داشته باشید که هنگام استفاده از peer variants، دسترسی و عملکرد را در نظر بگیرید و در صورت لزوم رویکردهای جایگزین را بررسی کنید. با درک کامل از peer variants، می توانید مهارت های Tailwind CSS خود را به سطح بعدی ببرید و برنامه های وب واقعا استثنایی بسازید.

این راهنما یک نمای کلی جامع از peer variants ارائه داده است، که همه چیز را از نحو اولیه گرفته تا تکنیک ها و ملاحظات پیشرفته پوشش می دهد. مثال های ارائه شده را آزمایش کنید و امکانات بسیاری را که peer variants ارائه می دهند، بررسی کنید. استایل دهی خوبی داشته باشید!