{"id":"l-css-3-5","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"ابنِ مؤشّرات focus يراها مستخدمو لوحة المفاتيح دائمًا، باستخدام :focus-visible، وحدود outline تصمد في وضع الألوان المفروضة، وscroll padding يُبقي العنصر الذي عليه الـ focus بعيدًا عن رأس الصفحة الثابت.","html":"

افتح جدول Waypoint، وأبعد الفأرة، واضغط Tab. في النسخة الأولى لن ترى شيئًا. كان ملف إعادة الضبط يحتوي على :focus { outline: none; }، أُضيفت لأن مصمّمًا لم تعجبه الحلقة التي تظهر عند النقر على الأزرار. مستخدمو لوحة المفاتيح، ومستخدمو أجهزة التبديل (switch)، وكثير من مستخدمي مكبّرات الشاشة يتنقّلون عبر الـ focus، وكانوا يتنقّلون معصوبي الأعين.

\n

إزالة أنماط الـ focus ليست خيارًا جماليًا؛ إنها صفحة معطوبة لمجموعة كبيرة من الناس. والخبر الجيد أن CSS الحديثة تجعل كتابة أنماط focus جيدة أمرًا سهلًا.

\n

:focus-visible: الحلقة حين تكون مفيدة

\n

شكوى المصمّم كانت حقيقية: حلقة بعد كل نقرة فأرة تبدو خللًا. و:focus-visible تحلّ ذلك. إنها لا تطابق العنصر الذي عليه الـ focus إلا حين يرى المتصفّح أن المؤشّر مفيد:

\n\n
focus.css
:root {\n  --focus: light-dark(#6d28d9, #c4b5fd);\n}\n\n:focus-visible {\n  outline: 2px solid var(--focus);\n  outline-offset: 2px;\n}
\n

هذه القاعدة الواحدة تصلح ما أفسده ملف إعادة الضبط. إنها تنطبق على كل عنصر يمكن أن يستقبل الـ focus، فيحصل مستخدمو لوحة المفاتيح على حلقة واضحة، ولا يراها مستخدمو الفأرة على الأزرار. و:focus-visible متاحة على نطاق واسع حسب Baseline.

\n

لماذا يتفوّق الـ outline على box-shadow

\n

كثير من أنظمة التصميم ترسم حلقات الـ focus بـ box-shadow لأن الظلال كانت تتبع الزوايا المستديرة بينما الـ outlines لم تكن تفعل. لكن الـ outlines تتبع border-radius في كل المتصفّحات الحالية منذ 2023، ولها ثلاث مزايا:

\n
    \n
  1. لا إزاحة في التخطيط. الـ outlines لا تشغل مساحة، لذا فإن وضع الـ focus على زر لا يدفع جيرانه أبدًا.
    2. \n
  2. outline-offset تضع فجوة بين العنصر والحلقة، فتبقى الحلقة ظاهرة على خلفية العنصر نفسه.
    3. \n
  3. وضع الألوان المفروضة. ثيمات التباين العالي في Windows تزيل box-shadow كليًا لكنها تُبقي الـ outlines، بعد إعادة تلوينها بلون من ألوان النظام.
    4. \n
\n\n

التباين في الثيمين

\n

يحتاج مؤشّر الـ focus إلى تباين لا يقل عن 3:1 مع ما يحيط به (معيار تباين العناصر غير النصية في WCAG). والبنفسجي الذي يعمل على الأبيض قد يختفي على سطح رمادي داكن. تعريف --focus بـ light-dark()، كما في الأعلى، يعطي كل ثيم لون حلقته الخاص من token واحد: بنفسجي عميق على الأسطح الفاتحة، وخزامي باهت على الداكنة.

\n

وللـ components التي تجلس على خلفيات لا يمكن توقّعها (صورة الـ hero، أو شارة مسار ملوّنة)، الحلقة ثنائية اللون هي الأكثر أمانًا: outline بلون الـ focus مع هالة متباينة داخلها مباشرةً:

\n
CSS
.hero :focus-visible {\n  outline: 2px solid var(--focus);\n  outline-offset: 2px;\n  box-shadow: 0 0 0 2px var(--surface);  /* halo between element and ring */\n}
\n

الظلّ هنا زخرفة فوق outline حقيقي، لذا يظل مستخدمو الألوان المفروضة يحصلون على الـ outline.

\n

ضع الـ focus على البطاقة كلها

\n

بطاقات الجلسات في Waypoint قابلة للنقر: العنوان رابط، ممدود بواسطة pseudo-element ليغطّي البطاقة. عندها تظهر الحلقة حول نص العنوان فقط، وهذا يبدو غريبًا. انقلها إلى البطاقة بـ :has():

\n
CSS
.session-card:has(a:focus-visible) {\n  outline: 2px solid var(--focus);\n  outline-offset: 4px;\n}\n.session-card a:focus-visible {\n  outline: none;   /* the card shows the ring instead */\n}
\n

إزالة حلقة الرابط نفسه مقبولة هنا، لأن حلقة البطاقة تحلّ محلّها كلما كان على الرابط focus ظاهر. وهذا هو النوع الوحيد من outline: none الذي ينبغي أن تطلقه: نوعٌ يغطّيه مؤشّر آخر.

\n

لا تدع الرأس يخفي الـ focus

\n

أضافت WCAG 2.2 معيار Focus Not Obscured (الـ focus غير محجوب): لا يجوز أن يختفي العنصر الذي عليه الـ focus كليًا خلف محتوى وضعه المطوّر فوقه، مثل رأس صفحة ثابت أو شريط ملفات تعريف الارتباط (cookies). رأس Waypoint ثابت وارتفاعه 64px، وحين يتنقّل المستخدم إلى الخلف، يمرّر المتصفّح البطاقة التي عليها الـ focus إلى أعلى الـ viewport، تحت الرأس مباشرةً.

\n
CSS
html {\n  scroll-padding-top: 64px;\n}
\n

الـ scroll padding تخبر المتصفّح بأن جزءًا من مساحة العرض في حاوية التمرير مغطّى. والتمرير الناتج عن الـ focus والروابط الداخلية (anchors) وscrollIntoView() كلها تحترمها. وإن تغيّر ارتفاع الرأس، فخزّنه في custom property واستخدمها في المكانين.

\n\n

دورك الآن

\n

في صفحة التمرين ملف إعادة الضبط السيئ. استبدله بحلقة :focus-visible، وانقل الحلقة إلى البطاقة حين يكون الـ focus على رابطها، وأضف scroll padding للرأس ذي الـ 64px. وبهذا ينتهي القسم المتجاوب؛ وبعده ستضيف الحركة، بدءًا بالـ transitions والـ keyframes واحترام إعدادات تقليل الحركة.

\n","toc":[{"id":"sec-1","text":":focus-visible: الحلقة حين تكون مفيدة","level":2},{"id":"sec-2","text":"لماذا يتفوّق الـ outline على box-shadow","level":2},{"id":"sec-3","text":"التباين في الثيمين","level":2},{"id":"sec-4","text":"ضع الـ focus على البطاقة كلها","level":2},{"id":"sec-5","text":"لا تدع الرأس يخفي الـ focus","level":2},{"id":"sec-6","text":"دورك الآن","level":2}],"takeaways":[":focus-visible تطابق حين يقرّر المتصفّح أن مؤشّر الـ focus مفيد، وهذا عادةً عند التنقّل بلوحة المفاتيح، فتستطيع إظهار حلقة واضحة دون إظهارها مع كل نقرة فأرة.","استخدم outline مع outline-offset لحلقات الـ focus؛ فهي لا تغيّر التخطيط، وتتبع border-radius، وتبقى ظاهرة في وضع الألوان المفروضة (forced colors) في Windows حيث تختفي box-shadow.","عرّف لون الـ focus بـ light-dark() ليحصل كل ثيم على لون حلقة خاص به، ثم تحقّق من أن تباينه مع السطح لا يقل عن 3:1 في الثيمين.","scroll-padding-top على حاوية التمرير تمنع رأس الصفحة الثابت (sticky) من تغطية العنصر الذي استقبل الـ focus للتوّ."],"further":[{"title":":focus-visible (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible"},{"title":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (W3C)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html"},{"title":"Focus (web.dev Learn CSS)","url":"https://web.dev/learn/css/focus"}],"quiz":[{"q":"

لماذا يُعدّ button:focus { outline: none; box-shadow: 0 0 0 3px violet; } نمط focus محفوفًا بالمخاطر؟

","options":[{"text":"رسم الظلال أبطأ من رسم الـ outlines.","why":"فرق تكلفة الرسم لا يُذكر؛ المشكلة في ظهور المؤشّر لبعض المستخدمين."},{"text":"وضع الألوان المفروضة في Windows يزيل الظلال، فلا يرى مستخدمو لوحة المفاتيح في وضع التباين العالي أيّ focus إطلاقًا.","why":"صحيح. الألوان المفروضة تجرّد الظلال لكنها تُبقي الـ outlines (بعد إعادة تلوينها بلون من ألوان النظام)، لذا فالـ outline هو الخيار المتين."},{"text":"box-shadow لا تتبع border-radius.","why":"الظلال تتبع انحناء الحواف فعلًا؛ ولم تكن هذه هي المشكلة قطّ."}],"answer":1},{"q":"

تريد حلقة focus عند التنقّل بلوحة المفاتيح، لا حين ينقر مستخدم الفأرة زرًّا. أيّ selector تستخدم؟

","options":[{"text":":focus","why":":focus تطابق كل focus، بما في ذلك بعد نقرة الفأرة، فتظهر الحلقة عند النقر أيضًا."},{"text":":focus-within","why":":focus-within تطابق سلفًا للعنصر الذي عليه الـ focus؛ ولا تميّز لوحة المفاتيح من الفأرة."},{"text":":active","why":":active تطابق أثناء الضغط بالمؤشّر، وهذا عكس ما تريده."},{"text":":focus-visible","why":"صحيح. يطبّق المتصفّح قواعده التقديرية (لوحة المفاتيح نعم، نقرة الفأرة على زر لا، حقول النص دائمًا)، ولا تطابق إلا حين يكون المؤشّر مفيدًا."}],"answer":3},{"q":"

رأس صفحة Waypoint بـ position: sticky وارتفاعه 64px. حين يتنقّل المستخدمون إلى الخلف عبر الجدول بلوحة المفاتيح، تُمرَّر البطاقة التي عليها الـ focus إلى مجال الرؤية لكنها تختبئ تحت الرأس. ما الإصلاح؟

","options":[{"text":"html { scroll-padding-top: 64px; }","why":"صحيح. الـ scroll padding تخبر المتصفّح بأن أعلى 64px من الـ viewport مغطّاة، فيتوقّف التمرير الناتج عن الـ focus والروابط الداخلية تحتها."},{"text":".session-card { margin-top: 64px; }","why":"هذا يضيف فراغًا بارتفاع 64px فوق كل بطاقة في الصفحة، طوال الوقت، لمجرّد الالتفاف على مشكلة تمرير."},{"text":"header { z-index: -1; }","why":"سيُرسم الرأس حينها خلف المحتوى، وهذا يكسر الرأس الثابت كليًا."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
Waypoint Conf 2026
\n
\n
\n

Focus Styles That Work

\n

Rings, offsets and forced colors.

\n
\n
","css":"/* Reset (from the prototype) */\n:focus { outline: none; }\n\n:root {\n --focus: light-dark(#6d28d9, #c4b5fd);\n}\n.site-header {\n position: sticky;\n top: 0;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: white;\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n"},"solution":{"html":"
Waypoint Conf 2026
\n
\n
\n

Focus Styles That Work

\n

Rings, offsets and forced colors.

\n
\n
","css":":root {\n --focus: light-dark(#6d28d9, #c4b5fd);\n}\n.site-header {\n position: sticky;\n top: 0;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: white;\n}\n.session-card {\n padding: 12px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n\n:focus-visible {\n outline: 2px solid var(--focus);\n outline-offset: 2px;\n}\n\n.session-card:has(a:focus-visible) {\n outline: 2px solid var(--focus);\n outline-offset: 4px;\n}\n.session-card a:focus-visible {\n outline: none;\n}\n\nhtml {\n scroll-padding-top: 64px;\n}\n"},"checks":[{"id":"button-ring","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); const rules = all.filter((r) => r.selectorText); const b = $('#tickets'); b.focus(); await tick(16); let ok; if (b.matches(':focus-visible')) { ok = style(b, 'outline-style') === 'solid' && parseFloat(style(b, 'outline-width')) >= 2 && style(b, 'outline-color') === 'rgb(109, 40, 217)'; } else { ok = rules.some((r) => r.selectorText.includes(':focus-visible') && !r.selectorText.includes(':has(') && r.style.outlineStyle === 'solid'); } b.blur(); return ok;"},{"id":"ring-offset","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); const rules = all.filter((r) => r.selectorText); const b = $('#tickets'); b.focus(); await tick(16); let ok; if (b.matches(':focus-visible')) { ok = parseFloat(style(b, 'outline-offset')) >= 2; } else { ok = rules.some((r) => r.selectorText.includes(':focus-visible') && parseFloat(r.style.outlineOffset) >= 2); } b.blur(); return ok;"},{"id":"no-ring-unfocused","test":"$('#tickets').blur(); await tick(16); return style('#tickets', 'outline-style') === 'none';"},{"id":"card-ring","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); const rules = all.filter((r) => r.selectorText); const a = $('#card-link'); a.focus(); await tick(16); let ok; if (a.matches(':focus-visible')) { ok = style('.session-card', 'outline-style') === 'solid' && style('.session-card', 'outline-color') === 'rgb(109, 40, 217)'; } else { ok = rules.some((r) => r.selectorText.includes('.session-card:has(') && r.selectorText.includes(':focus-visible') && r.style.outlineStyle === 'solid'); } a.blur(); return ok;"},{"id":"scroll-padding","test":"return parseFloat(style(document.documentElement, 'scroll-padding-top')) === 64;"}],"title":"أعد حلقة الـ focus","prompt":"

ملف إعادة الضبط في النموذج الأولي يزيل كل outline للـ focus. استبدله بحيث:

\n
    \n
  1. يحصل أيّ عنصر عليه focus ظاهر على outline بقيمة 2px solid بلون var(--focus) مع outline-offset لا تقل عن 2px (ولا حلقة حين لا يكون عليه focus).
    2. \n
  2. حين يكون على رابط البطاقة focus ظاهر، تُظهر .session-card الحلقة نفسها (يمكنك إخفاء حلقة الرابط نفسه في هذه الحالة).
    3. \n
  3. يتوقّف التمرير الناتج عن الـ focus تحت رأس الصفحة الثابت ذي الـ 64px.
    4. \n
\n","hints":["احذف قاعدة إعادة الضبط :focus { outline: none; }؛ إنها السبب، لا شيئًا يُلتفّ عليه.",":focus-visible هي الـ selector الخاص بالحلقة؛ و:has(a:focus-visible) تتيح للبطاقة أن تتفاعل مع رابطها.","الـ scroll padding توضع على حاوية التمرير، أي الجذر: html { scroll-padding-top: 64px; }."],"explanation":"

تُظهر :focus-visible الـ outline حين يرى المتصفّح أن المؤشّر مفيد (focus لوحة المفاتيح وحقول النص) وتتخطّاه بعد نقرات الفأرة على الأزرار، وهذا ما كان ملف إعادة الضبط يحاول تحقيقه بطريقة خرقاء. الـ outline لا يؤثّر في التخطيط ويصمد في وضع الألوان المفروضة، وoutline-offset تُبقيه بعيدًا عن العنصر. و.session-card:has(a:focus-visible) تنقل الحلقة إلى البطاقة، لذا فإخفاء outline الرابط نفسه آمن هناك. وscroll-padding-top: 64px على الجذر تخبر المتصفّح بأن أعلى الـ viewport مغطّى، فلا يقع الـ focus أبدًا تحت الرأس الثابت.

\n","checkLabels":{"button-ring":"الزر الذي عليه الـ focus يحصل على حلقة 2px solid بلون الـ focus","ring-offset":"للحلقة إزاحة لا تقل عن 2px","no-ring-unfocused":"لا حلقة حين لا يكون هناك focus","card-ring":"تُظهر البطاقة الحلقة حين يكون الـ focus على رابطها","scroll-padding":"التمرير الناتج عن الـ focus يتجاوز الرأس ذا الـ 64px"}},"words":705,"readMinutes":4}