Lesson 12 / الدرس 12

States: hover, focus, disabled / الحالات: التحويم والتركيز والتعطيل

A page that never reacts feels broken. The same prefix idea as breakpoints applies to states — and one of them is not optional, because people navigate with a keyboard.

الصفحة التي لا تتفاعل أبدًا تبدو معطلة. وفكرة البادئة نفسها من نقاط التوقف تنطبق على الحالات — وواحدة منها ليست اختيارية، لأن الناس يتنقلون بلوحة المفاتيح.

Tailwind prefixes a state exactly as it prefixes a breakpoint: hover:bg-blue-700. Bootstrap mostly builds states into its components, so its buttons already darken on hover without you asking — which is convenient until you want something it did not anticipate.

يبدئ Tailwind الحالة كما يبدئ نقطة التوقف تمامًا: hover:bg-blue-700. وBootstrap يبني الحالات في مكوّناته غالبًا، فأزراره تدكن عند التحويم دون طلبك — وهو مريح حتى تريد شيئًا لم يتوقعه.

State	Tailwind	When it applies
hover:	hover:bg-sky-700	Pointer over it — not on a touch screen
focus:	focus:ring-2	Reached by keyboard or clicked into
focus-visible:	focus-visible:ring-2	Focused BY KEYBOARD only
active:	active:scale-95	Being pressed right now
disabled:	disabled:opacity-50	The control is disabled
group-hover:	group-hover:underline	An ancestor marked group is hovered

The third row is the one worth learning properly. focus fires when you click a button too, which is why a clicked button used to keep a ring around it; focus-visible fires only for keyboard users, which is what you almost always meant.

والسطر الثالث هو الجدير بالتعلم كما ينبغي. فـfocus تُطلق حين تنقر زرًا أيضًا، ولهذا كان الزر المنقور يحتفظ بحلقة حوله؛ وfocus-visible لا تُطلق إلا لمستخدمي لوحة المفاتيح، وهو ما قصدته دائمًا تقريبًا.

Never remove the focus ring

WRONG      <button class="focus:outline-none">
           The keyboard user now has no idea where they are.

RIGHT      <button class="focus-visible:outline-none
                          focus-visible:ring-2 focus-visible:ring-sky-500">
           The default ring is replaced by a better one, not deleted.

This is the single most damaging thing people do with a framework, and it is one class long. Run the demonstration and press Tab repeatedly — the difference between the two rows is the difference between a usable page and an unusable one.

Hover is not available to everyone

A touch screen has no pointer hovering over anything. Anything that only appears on hover — a menu, a delete button on a card, a tooltip carrying the only explanation of an icon — simply does not exist for a phone user. Hover is for enhancement, never for the only route to something.

والزر المعطّل طريق مسدود ما لم يقل شيء لماذا. فـdisabled:opacity-50 تجعله يبدو غير متاح ولا تشرح شيئًا، فيبقى القارئ ينقر زرًا باهتًا ويتساءل ما الخطأ الذي ارتكبه. فإما أن تقول ما الناقص بجانبه، وإما أن تترك الزر مفعّلًا وتشرح عند الإرسال. والأطر تجعل الصيغة الباهتة على بعد صنف والشرح على بعد لا شيء.

One Tailwind idea has no Bootstrap equivalent and is worth knowing: group. Mark a container group, then any child can respond to the container being hovered with group-hover:. That is how a whole card lifts and its title underlines when you hover anywhere on it — a pattern that otherwise needs a CSS rule you cannot express in a class.

وفكرة واحدة في Tailwind لا مكافئ لها في Bootstrap وتستحق المعرفة: group. علّم حاوية بـgroup، فيستطيع أي ابن الاستجابة لتحويم الحاوية بـgroup-hover:. وهكذا ترتفع بطاقة كاملة ويُسطَّر عنوانها حين تحوم في أي موضع منها — وهو نمط يحتاج بغير ذلك قاعدة CSS لا تستطيع التعبير عنها في صنف.

وأضف transition إلى كل ما له حالة تحويم. فبدونها يكون التغيير فوريًا ويبدو خللًا؛ ومعها يُقرأ التغيير نفسه مقصودًا. وهو صنف واحد في Tailwind، ومكوّنات Bootstrap فيها ذلك مدمجًا، وهو أرخص ما تفعله لتبدو الصفحة منتهية.

Try it live / جرّب بنفسك

<h1>Buttons that react</h1>

<h2>Tailwind</h2>
<pre>&lt;button class="bg-sky-600 text-white px-3 py-2 rounded
               hover:bg-sky-700 focus-visible:ring-2 active:scale-95 transition"&gt;</pre>

<h2>Bootstrap</h2>
<pre>&lt;button class="btn btn-primary"&gt;</pre>

<h2>Keyboard test</h2>
<p>Tabbing through, I could / could not see …</p>

<h2>The disabled button</h2>
<p>Instead of leaving it a dead end, I …</p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What is wrong with focus:outline-none on a button?

ما الخطأ في focus:outline-none على زر؟

2. What is the difference between focus and focus-visible?

ما الفرق بين focus وfocus-visible؟

3. Why should nothing important live only behind a hover?

Your task / مهمتك

Build a set of four buttons — primary, secondary, destructive and disabled — in both frameworks, with hover, focus-visible and active states on each. Then test the whole set with the keyboard only: tab through, and confirm you can always see where you are. Report anything that was invisible, and say what you did about the disabled button so it is not a dead end.

ابنِ مجموعة من أربعة أزرار — رئيسي وثانوي ومدمّر ومعطّل — في الإطارين، بحالات تحويم وتركيز مرئي وضغط على كل واحد. ثم اختبر المجموعة كلها بلوحة المفاتيح وحدها: تنقّل بـTab وتأكد أنك ترى دائمًا أين أنت. وأبلغ عن كل ما كان خفيًا، وقل ما فعلته بالزر المعطّل ليكفّ عن كونه طريقًا مسدودًا.

Four buttons, in both frameworks أربعة أزرار في الإطارين
hover, focus-visible and active on each تحويم وتركيز مرئي وضغط على كل واحد
Tabbed through with the keyboard, and reported تنقّل بلوحة المفاتيح، مبلَّغ عنه
The disabled button explains itself الزر المعطّل يشرح نفسه