شبه کلاس های CSS؛ hover و focus-visible | درس 31 + پروژه درس

درس 31 از دوره آموزش HTML و CSS ارومیا دیزاین

یک پیوند ممکن است در حالت عادی زیبا باشد، اما وقتی کاربر ماوس را روی آن می برد یا با کیبورد به آن می رسد، هیچ نشانه ای نشان ندهد. در این درس با شبه کلاس های CSS، ظاهر عنصر را بر اساس وضعیت واقعی آن تنظیم می کنیم. هدف، ساختن پیوند و کنترل هایی است که برای ماوس، کیبورد و صفحه لمسی قابل استفاده باشند.

فایل پروژه و پاسخ: دانلود پروژه درس 31 (ZIP). شامل HTML، CSS، پاسخ تمرین و راهنما؛ فایل را استخراج کنید و index.html را باز کنید. هیچ نصب یا اتصال اینترنت لازم نیست.

در درس کادر و سایه نشانگر فوکوس را دیدیم. اکنون تفاوت حالت ها و انتخابگرهای آن ها را دقیق تر تمرین می کنیم. اندازه و خوانایی نوشته را هم با تایپوگرافی در CSS هماهنگ نگه دارید.

شبه کلاس چیست؟

شبه کلاس به انتخابگر اضافه می شود و عنصر را در یک وضعیت مشخص انتخاب می کند. برای مثال، .action:hover یعنی عنصری با کلاس action که در وضعیت hover قرار دارد. برای تغییر وضعیت، کلاس جدیدی در HTML نمی نویسید؛ مرورگر آن را بر اساس تعامل و وضعیت کنترل تشخیص می دهد.

.action:hover {
  background-color: #0c4a6e;
}

علامت دونقطه بخشی از انتخابگر است. نوشتن .action :hover با فاصله، معنای دیگری دارد و فرزندِ در وضعیت hover را انتخاب می کند. کلاس و شبه کلاس باید در نمونه ما به هم چسبیده باشند. مرور انتخابگرهای CSS برای تشخیص این تفاوت مفید است.

hover؛ اشاره گر روی عنصر

با :hover ظاهر عنصر هنگام قرار گرفتن اشاره گر روی آن تغییر می کند. برای شروع، رنگ زمینه را عوض می کنیم و اندازه کادر را ثابت نگه می داریم. تغییر ضخامت کادر بین حالت ها ممکن است محتوا یا عناصر اطراف را جابه جا کند؛ کادر اولیه را از ابتدا تعریف کنید.

.action {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #075985;
  background-color: #075985;
  color: white;
}

.action:hover {
  background-color: #0c4a6e;
  border-color: #0c4a6e;
}

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

active؛ هنگام فعال سازی، نه صفحه فعلی

حالت :active معمولاً هنگام فعال سازی عنصر، مانند نگه داشتن دکمه ماوس روی پیوند، برقرار می شود. این حالت به معنای «صفحه فعلی منو» یا «پیوند انتخاب شده برای همیشه» نیست. برای صفحه فعلی، وضعیت را باید با ساختار و اطلاعات مناسب HTML مشخص کنید؛ active جای آن را نمی گیرد.

.action:active {
  background-color: #082f49;
}

در پروژه، ماوس را روی پیوند ببرید و دکمه را نگه دارید تا رنگ فشرده را ببینید. پس از رها کردن، وضعیت active پایان می یابد، ولی فوکوس می تواند باقی بماند. در تعامل با کیبورد هم رفتار را با عنصر واقعی بررسی کنید؛ کنترل های مختلف الزاماً یکسان عمل نمی کنند.

focus و focus-visible؛ محل فعلی تعامل

عنصر فوکوس دار، مقصد فعلی تعامل کیبورد است. پیوندهای دارای href و کنترل های بومی مثل input و button معمولاً در مسیر پیمایش هستند. با Tab به کنترل بعدی و با Shift+Tab به قبلی می روید. ظاهر زیبا به تنهایی یک div را به دکمه قابل استفاده تبدیل نمی کند؛ برای کار واقعی از عنصر مناسب استفاده کنید.

حالت :focus عنصر فوکوس دار را انتخاب می کند. :focus-visible علاوه بر فوکوس، به تشخیص مرورگر درباره نیاز به نمایش نشانگر بستگی دارد. اغلب هنگام پیمایش کیبورد فعال می شود، اما فقط مخصوص کیبورد نیست؛ برای ورودی متنی ممکن است بعد از کلیک هم برقرار باشد.

.action:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 4px;
}

input:focus {
  border-color: #075985;
}

برای نمونه این درس، نشانگر پیش فرض فوکوس را حذف نمی کنیم. بنابراین اگر مرورگری انتخابگر جدید را نشناسد، همچنان نشانگر بومی خود را دارد. outline فضای چیدمان را افزایش نمی دهد و برای این هدف مناسب است. رنگ و وضوح آن را در درس رنگ و پس زمینه و کادر درس قبل تطبیق دهید.

focus-within؛ مشخص کردن گروه فعال

اگر یک عنصر یا یکی از فرزندانش فوکوس داشته باشد، والد می تواند با :focus-within انتخاب شود. در فرم پروژه، کادر گروه ورودی تغییر می کند تا کاربر بخش فعال را راحت تر پیدا کند. این نشانه گروه، جای نشانگر خود ورودی را نمی گیرد.

.field:focus-within {
  border-color: #0284c7;
  background-color: #f0f9ff;
}

روی ورودی کلیک کنید و بعد Tab بزنید تا از گروه خارج شوید. کادر والد فقط زمانی باید حالت فعال داشته باشد که فوکوس در خودش یا داخل آن است. تغییر رنگ گروه را از تغییر اندازه جدا نگه داشته ایم تا فرم هنگام تعامل نپرد.

checked و disabled؛ وضعیت واقعی کنترل

گزینه انتخابی را با :checked استایل می دهیم. در مثال زیر، علامت جمع انتخابگر همسایه بعدی است؛ span باید بلافاصله بعد از input و در همان والد باشد. علامت انتخاب واقعی همچنان توسط کنترل بومی نمایش داده می شود و متن نیز با تغییر وزن و زیرخط، نشانه اضافی دارد.

<label class="choice">
  <input type="checkbox">
  <span>دریافت نمونه آموزشی</span>
</label>

.choice input:checked + span {
  color: #166534;
  font-weight: 700;
  text-decoration: underline;
}

حالت disabled برای کنترل هایی است که واقعاً غیرفعال هستند. تغییر رنگ یا cursor به تنهایی، دکمه را غیرفعال نمی کند. در HTML پروژه، دکمه با ویژگی disabled تعریف شده است؛ معمولاً وارد پیمایش Tab نمی شود و کاربر نمی تواند آن را فعال کند. برای فعال بودن کنترل می توانید از enabled کمک بگیرید.

<button type="button" disabled>ارسال غیرفعال</button>

button:disabled {
  color: #475569;
  background-color: #e2e8f0;
  border-color: #94a3b8;
  cursor: not-allowed;
}

button:enabled:hover {
  background-color: #0c4a6e;
}

CSS فقط ظاهر وضعیت را نشان می دهد؛ خودش دکمه disabled را فعال نمی کند یا فرم را به سرور نمی فرستد. پروژه یک دکمه reset واقعی دارد که ورودی و انتخاب گزینه را به حالت اولیه برمی گرداند. هیچ دکمه submit فعالی در این فرم نیست و داده ای ارسال نمی شود.

ترتیب قوانین و همزمانی حالت ها

عنصر می تواند همزمان چند وضعیت داشته باشد؛ مثلاً هم فوکوس داشته باشد و هم اشاره گر روی آن باشد. وقتی قوانین هم وزن یک ویژگی را تغییر دهند، ترتیب آن ها اهمیت پیدا می کند. در پروژه، hover و active زمینه را تغییر می دهند و focus-visible outline می دهد؛ در نتیجه فوکوس با تغییر زمینه ناپدید نمی شود.

برای استایل رنگ پیوندها، ترتیب متداول link، visited، hover و active کمک می کند حالت تعاملی زیر قانون هم وزن قبلی پنهان نشود. مرورگر برای visited محدودیت های حریم خصوصی دارد؛ از آن برای تغییر پیچیده محتوا یا تشخیص تاریخچه کاربر استفاده نکنید. مفهوم تقدم را در آبشار و اولویت قوانین مرور کنید.

جدول کاربرد حالت های این درس

تمرین عملی درس 31

در پروژه، پیوند اصلی و فرم نمونه آماده اند. برای تمرین مستقل فقط پیوندهای داخل .exercise را هدف بگیرید. حالت hover باید زمینه #075985 و متن سفید بدهد؛ active زمینه #082f49 داشته باشد و focus-visible با outline 3px و فاصله 4px مشخص شود. ضخامت کادر و padding در همه حالت ها ثابت بمانند.

فایل index.html ساختار و style.css نمونه ها را دارد. پاسخ در solution.css است و از ابتدا متصل نیست. پس از تلاش خودتان، این خط را بعد از لینک استایل اصلی در head اضافه کنید:

<link rel="stylesheet" href="solution.css">

اندازه و فاصله پیوندهای تمرین را با مدل جعبه در CSS تطبیق دهید. عنوان، متن و عملکرد پیوند در HTML می مانند و استایل ها فقط ظاهر وضعیت را تنظیم می کنند.

دانلود دوباره: دریافت فایل پروژه و پاسخ تمرین درس 31. راهنمای آزمون ماوس و کیبورد در README.txt قرار دارد و تمام اعداد HTML و CSS انگلیسی هستند.

چک کردن نتیجه با ماوس و کیبورد

1. ماوس را روی پیوند ببرید؛ رنگ زمینه باید تغییر کند و اندازه آن ثابت بماند.
2. دکمه ماوس را نگه دارید؛ حالت active را با hover مقایسه کنید.
3. با Tab و Shift+Tab حرکت کنید؛ محل فوکوس باید مشخص باشد.
4. روی پیوند با Enter بروید؛ مقصد همان پیوند باید فعال شود.
5. روی گزینه انتخابی با Space عمل کنید؛ انتخاب و متن کنار آن باید هماهنگ تغییر کنند.
6. دکمه پاک کردن فرم را بزنید؛ مقدار ورودی و گزینه به حالت اولیه برگردند.

اگر hover کار می کند ولی فوکوس دیده نمی شود، حذف outline یا قانون غالب را بررسی کنید. اگر checked متن را تغییر نمی دهد، ترتیب input و span و انتخابگر همسایه را ببینید. اگر دکمه ظاهراً خاکستری ولی فعال است، disabled واقعی در HTML را بررسی کنید. استفاده از important به جای پیدا کردن علت، مشکل را مبهم می کند.

خودآزمایی و مسیر درس بعد

آیا hover برای کاربر لمسی کافی است؟ active چه تفاوتی با صفحه فعلی دارد؟ چرا focus-within جای focus-visible خود کنترل را نمی گیرد؟ پاسخ را روی فایل پروژه نشان دهید تا تفاوت ظاهر و عملکرد را درست درک کنید.

در درس 32، شبه عنصرهای CSS مثل before و after را یاد می گیریم و تفاوت آن ها با شبه کلاس را بررسی می کنیم. مرجع تکمیلی: focus-visible و hover در MDN.