{"checkpoints":{"s-css-1":[{"q":"

ما لون الرابط؟

\n
CSS
@layer base, components;\n@layer components {\n  .btn { color: white; }\n}\na { color: blue; }
\n
HTML
<a class=\"btn\" href=\"#\">Buy tickets</a>
\n","options":[{"text":"white، لأن components هي آخر layer مُعلنة.","why":"كونها آخر layer مسمّاة لا يجعلها تتغلّب إلا على الـ layers المسمّاة الأخرى؛ أما القاعدة الواقعة خارج الـ layers فتتفوّق عليها كلها."},{"text":"blue، لأن الأنماط العادية خارج الـ layers تتغلّب على كل layer.","why":"صحيح. الأنماط خارج الـ layers تجلس في layer ضمنية فوق كل الـ layers المسمّاة، فيفوز selector النوع رغم أن الـ specificity الخاصة به أقل."},{"text":"white، لأن الـ class أدقّ تحديدًا من selector النوع.","why":"الـ specificity لا تُقارَن إلا داخل الـ layer نفسها. وأولوية الـ layers تُحسم أولًا."},{"text":"لون الروابط الافتراضي في المتصفّح، لأن القاعدتين تلغي إحداهما الأخرى.","why":"القواعد لا تلغي بعضها أبدًا؛ الـ cascade يختار دائمًا فائزًا واحدًا."}],"answer":1},{"q":"

القاعدتان تستهدفان <h3 class="title"> داخل .card. أيّ لون يفوز؟

\n
CSS
:where(.card) .title { color: green; }\n.title { color: red; }
\n","options":[{"text":"red، لأن درجة الـ selectorين (0,1,0) والأحمر يأتي لاحقًا.","why":"صحيح. :where() لا تضيف شيئًا، فتتعادل الـ specificity ويحسم ترتيب الظهور."},{"text":"green، لأنه أدقّ تحديدًا.","why":":where(.card) تضيف specificity صفرًا، فدرجة selector الأخضر (0,1,0) نفسها درجة الأحمر."},{"text":"green، لأن selectors العناصر الداخلية تتغلّب على الـ selectors المفردة.","why":"الروابط بين الـ selectors لا تضيف specificity؛ ولا يُحسب إلا الـ selectors البسيطة."},{"text":"لا هذا ولا ذاك؛ :where() تجعل القاعدة الأولى غير صالحة.","why":":where() صالحة في كل مكان وتظل تطابق؛ لكنها لا تزن شيئًا."}],"answer":0},{"q":"

يُفترض أن يكبر توهّج بطاقة عند المرور بـ transition: --glow 300ms، مع box-shadow: 0 0 var(--glow) violet. لكن التوهّج يقفز بدل أن يتحرّك. ما الإصلاح؟

","options":[{"text":"أضف transition-behavior: allow-discrete ليُسمح للـ custom property بالدخول في transition.","why":"allow-discrete تتيح لقيمة لا يمكن الانتقال بين قيمها تدريجيًا أن تشارك في الـ transition، لكنها تظل تنقلب دفعة واحدة عند منتصف المدة. المتصفّح يحتاج إلى أن يعرف أن --glow طول ليمزج بين قيمها."},{"text":"انقل --glow إلى :root لتُورَث.","why":"مكان تعريف الخاصية لا يغيّر قابليتها للانتقال التدريجي."},{"text":"سجّل --glow بـ @property مع syntax: "<length>" وقيمة ابتدائية.","why":"صحيح. حين يعرف المتصفّح أن --glow طول، يستطيع الانتقال بين قيمها تدريجيًا، فيتحرّك الظلّ بسلاسة."},{"text":"أضف will-change: --glow.","why":"will-change تلميح للأداء؛ ولا تجعل القيمة التي بلا نوع قابلة للتحريك."}],"answer":2},{"q":"

الـ HTML هو <label class="field">Email <input type="email"></label>. أيّ selector ينسّق التسمية (label) حين يكون الـ focus على حقلها؟

","options":[{"text":".field:focus","why":"التسمية نفسها لا تستقبل الـ focus أبدًا؛ الحقل الذي بداخلها هو الذي يستقبله."},{"text":"input:focus + .field","why":"الرابط + يبحث عن شقيق لاحق، لكن التسمية هي أب الحقل."},{"text":".field > input:focus","why":"هذا يحدّد الحقل، لا التسمية."},{"text":".field:has(input:focus)","why":"صحيح. تطابق التسمية حين تحتوي على حقل عليه الـ focus. و.field:focus-within ستنجح هنا أيضًا."}],"answer":3},{"q":"

داخل قاعدة .session-card متداخلة، أيّ selector يستهدف البطاقة نفسها حين تحمل أيضًا الـ class is-live؟

\n
CSS
.session-card {\n  /* ??? */ { border-color: red; }\n}
\n","options":[{"text":"& .is-live","why":"المسافة تجعله selector لعنصر داخلي: عنصر .is-live داخل البطاقة."},{"text":".is-live","why":"الـ selector المتداخل بلا & يُعامَل كعنصر داخلي، فهذا أيضًا يعني عنصرًا داخل البطاقة."},{"text":"&:is-live","why":":is-live ليست pseudo-class، فالـ selector غير صالح."},{"text":"&.is-live","why":"صحيح. دون مسافة تشكّل & و.is-live selector مركّبًا واحدًا: .session-card.is-live."}],"answer":3}],"s-css-2":[{"q":"

صفحة بـ display: flex فيها شريط جانبي بعرض 16rem وmain له flex: 1. جدول بيانات عريض داخل main يدفع الصفحة إلى التمرير الأفقي. ما الإصلاح الموجَّه؟

","options":[{"text":"أضف min-width: 0 إلى main ودع الجدول يتمرّر داخل غلاف خاص به له overflow-x: auto.","why":"صحيح. الحدّ الأدنى التلقائي لعرض main هو عرض محتواه؛ وإزالته تتيح لـ main أن يتقلّص، وتحصر الفيضان حيث ينتمي."},{"text":"أضف flex-shrink: 1 إلى main.","why":"flex-shrink: 1 هي القيمة الافتراضية أصلًا؛ والتقلّص يتوقّف عند الحدّ الأدنى التلقائي على أيّ حال."},{"text":"اضبط overflow: hidden على body.","why":"هذا يخفي محتوى يحتاجه المستخدمون ويجعل قراءة الجدول مستحيلة على الشاشات الصغيرة."},{"text":"غيّر flex: 1 إلى flex: auto على main.","why":"auto تجعل main يبدأ من عرض محتواه، فيزيد الفيضان سوءًا لا تحسّنًا."}],"answer":0},{"q":"

شبكة تستخدم grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) بلا فجوة في حاوية عرضها 500px. كم عمودًا فيها، وما عرض كلٍّ منها؟

","options":[{"text":"عمودان بعرض 200px و100px من المساحة الفارغة.","why":"الحدّ الأقصى 1fr يتيح للـ tracks أن تكبر لتتقاسم المساحة المتبقية."},{"text":"عمودان بعرض 250px.","why":"صحيح. يتّسع اثنان من الـ tracks بعرض 200px ولا يتّسع الثالث، ثم يقسم الحدّ الأقصى 1fr الـ 100px المتبقية بين الاثنين."},{"text":"ثلاثة أعمدة بعرض يقارب 167px.","why":"لكل track حدّ أدنى 200px، فلا تتّسع ثلاثة في 500px."},{"text":"عمود واحد بعرض 500px.","why":"auto-fill تنشئ أكبر عدد من الـ tracks يتّسع بحجمها الأدنى، وهو اثنان هنا."}],"answer":1},{"q":"

نموذج تسجيل المتحدّثين فيه ثلاثة fieldsets، في كلٍّ منها أزواج من التسميات والحقول. يجب أن تشكّل التسميات عمودًا واحدًا متساوي العرض عبر كل الـ fieldsets. والنموذج شبكة من عمودين. ماذا تضيف إلى كل fieldset؟

","options":[{"text":"display: grid; grid-template-columns: max-content 1fr;","why":"كل fieldset يحدّد عرض عمود تسمياته بنفسه، فلا توسّع تسمية طويلة في أحدها الأخرى."},{"text":"display: contents;","why":"قد يحاذي هذا الحقول، لكنه يزيل صندوق الـ fieldset (وحدّه وتخطيط الـ legend فيه)، فينكسر التجميع."},{"text":"display: grid; grid-column: span 2; grid-template-columns: subgrid;","why":"صحيح. كل fieldset يمتدّ على عمودي النموذج ويتبنّاهما، فتتشارك كل التسميات track عمود واحدًا."},{"text":"width: 100%;","why":"العرض لا يربط الأعمدة الداخلية للـ fieldsets ببعضها."}],"answer":2},{"q":"

بطاقة جلسة في شريط جانبي عرضه 300px. يتبدّل تخطيطها بـ @container (width > 400px)، والشريط الجانبي هو حاوية الحجم. عرض نافذة المتصفّح 1400px. أيّ تخطيط تحصل عليه البطاقة؟

","options":[{"text":"التخطيط الضيّق، لأن الاستعلام يقيس الشريط الجانبي ذا الـ 300px.","why":"صحيح. الـ container queries تتجاهل الـ viewport؛ وما يُقاس هو أقرب حاوية حجم."},{"text":"التخطيط العريض، لأن النافذة أعرض من 400px.","why":"هذا سلوك الـ media query. أما الـ container query فتقيس الحاوية."},{"text":"لا هذا ولا ذاك؛ الـ container queries تحتاج إلى اسم حاوية لتطابق.","why":"الاستعلامات بلا اسم تستخدم أقرب حاوية حجم بين الأسلاف."},{"text":"يعتمد على عرض البطاقة نفسها.","why":"لا يستطيع العنصر أن يستعلم عن نفسه؛ والقياس هو عرض حاوية الشريط الجانبي."}],"answer":0},{"q":"

ما العرض الذي تُنتجه width: clamp(280px, 50%, 600px) داخل عنصر أب عرضه 400px؟

","options":[{"text":"280px","why":"صحيح. 50% من 400px تساوي 200px، وهي تحت الحدّ الأدنى 280px، فيفوز الحدّ الأدنى."},{"text":"200px","why":"200px هي القيمة المفضّلة، لكن clamp() لا تنزل أبدًا تحت حدّها الأدنى."},{"text":"400px","why":"عرض العنصر الأب ليس إحدى القيم الثلاث؛ تُرجع clamp() الحدّ الأدنى أو المفضّلة أو الحدّ الأقصى."},{"text":"600px","why":"الحدّ الأقصى لا ينطبق إلا حين تتجاوزه القيمة المفضّلة."}],"answer":0}],"s-css-3":[{"q":"

يسأل مصمّم لماذا يستخدم عنوان الواجهة الرئيسية clamp(2rem, 1.2rem + 3vw, 3.5rem) لا clamp(32px, 3vw + 19px, 56px). ما أفضل جواب؟

","options":[{"text":"نسخة الـ rem تتدرّج مع حجم الخط الافتراضي لدى المستخدم ومع التكبير؛ أما نسخة الـ px فتقفل المدى على إعدادات المصمّم.","why":"صحيح. حدود rem ونقطة تقاطع بـ rem تُبقي تفضيلات المستخدم داخل الحساب، وعلى هذا يعتمد معيار Resize Text."},{"text":"نسخة الـ px لا تعمل في Safari.","why":"كلتاهما صالحة في كل المتصفّحات الحالية؛ الفرق في إمكانية الوصول لا في الدعم."},{"text":"الـ rem تُرسم أسرع من الـ px.","why":"لا فرق في سرعة الرسم بين الوحدتين."},{"text":"لا يمكنك جمع px وvw داخل clamp().","why":"الوحدات المختلطة مسموحة في الدوال الرياضية؛ و3vw + 19px صالحة."}],"answer":0},{"q":"

زر إغلاق موضوع بـ inset-inline-end: 8px. والصفحة dir="rtl". إلى أيّ خاصية فيزيائية تُترجَم؟

","options":[{"text":"left: 8px","why":"صحيح. في النص المكتوب من اليمين إلى اليسار، نهاية السطر على اليسار."},{"text":"right: 8px","why":"هذا هو المقابل في النص من اليسار إلى اليمين، حيث تنتهي الأسطر على اليمين."},{"text":"top: 8px","why":"top موضع على محور الـ block؛ والخصائص الـ inline تقابل اليسار واليمين في الكتابة الأفقية."},{"text":"لا أثر لها في RTL.","why":"الخصائص المنطقية وُجدت تحديدًا لتعمل في الاتجاهين."}],"answer":0},{"q":"

أيّ تصريح يعطي الزر المعطّل لونًا رماديًا بالإضاءة المُدرَكة نفسها التي للون العلامة التجارية؟

","options":[{"text":"background: hsl(from var(--brand) h 0% l);","why":"إضاءة HSL ليست إدراكية، فلن تطابق الإضاءة الظاهرة للرمادي إضاءة لون العلامة التجارية."},{"text":"background: oklch(from var(--brand) l 0 h);","why":"صحيح. ضبط التشبّع على 0 يزيل اللونية مع الإبقاء على L، فيبدو الرمادي بالإضاءة نفسها."},{"text":"background: color-mix(in srgb, var(--brand), grey);","why":"المزج مع الرمادي يُبقي نصف اللون ويزيح الإضاءة نحو إضاءة الرمادي، لا إضاءة العلامة التجارية."},{"text":"filter: grayscale(1);","why":"الـ filter يحوّل النص وأيّ أيقونات إلى الرمادي أيضًا، ويعمل في فضاء غير إدراكي."}],"answer":1},{"q":"

الصفحة في الوضع الداكن، لكن لوحة «معاينة الطباعة» داخلها يجب أن تُرسم بالقيم الفاتحة لكل tokens light-dark(). ماذا تضبط على اللوحة؟

","options":[{"text":"@media (prefers-color-scheme: light) حول قواعد اللوحة.","why":"هذه الـ media query تفحص إعداد نظام تشغيل المستخدم، وهو ما زال داكنًا."},{"text":"data-theme="light" على اللوحة.","why":"قواعد مفتاح التبديل في هذه الدورة تقرأ data-theme على الجذر، لذا لا تفعل السمة على اللوحة شيئًا ما لم تستهدفها CSS."},{"text":"color-scheme: light;","why":"صحيح. تُحسم light-dark() بحسب النظام اللوني المستخدم في كل عنصر، ويرثه العناصر داخل اللوحة."},{"text":"filter: invert(1);","why":"القلب يعكس الصور وألوان العلامة التجارية أيضًا، ولا يلمس قيم الـ tokens."}],"answer":2},{"q":"

تضيف Waypoint شريط «إعدادات ملفات تعريف الارتباط» ثابتًا ارتفاعه 56px أسفل الـ viewport. يبلّغ مستخدمو لوحة المفاتيح أن الرابط الذي عليه الـ focus يختبئ أحيانًا خلفه. أيّ إصلاح يعالج معيار Focus Not Obscured في WCAG؟

","options":[{"text":":focus-visible { outline-offset: 56px; }","why":"إزاحة الحلقة لا تُخرج العنصر من تحت الشريط."},{"text":".cookie-bar { opacity: 0.9; }","why":"الشفافية الطفيفة تظل تحجب العنصر؛ المعيار يتعلّق باختفائه، لا بمظهر الشريط."},{"text":"body { padding-top: 56px; }","why":"الشريط في الأسفل؛ والحشوة العلوية لا تغيّر المكان الذي تستقرّ فيه العناصر التي عليها الـ focus."},{"text":"html { scroll-padding-bottom: 56px; }","why":"صحيح. الـ scroll padding تحدّد أن الـ 56px السفلية مغطّاة، فيُبقي التمرير الناتج عن الـ focus العنصرَ فوق الشريط."}],"answer":3}],"s-css-4":[{"q":"

أيّ زوج من الخصائص يستطيع المتصفّح تحريكه دون إعادة تشغيل التخطيط أو الرسم في كل إطار؟

","options":[{"text":"translate وopacity","why":"صحيح. إنهما تغيّران طريقة تركيب طبقة مرسومة أصلًا، فيستطيع المتصفّح تخطّي التخطيط والرسم."},{"text":"width وheight","why":"كلتاهما تغيّران الأبعاد، فيعمل التخطيط في كل إطار."},{"text":"top وleft","why":"المواضع أبعاد أيضًا؛ وتغييرها يستدعي التخطيط."},{"text":"background-color وbox-shadow","why":"هاتان تتخطّيان التخطيط لكنهما تعيدان الرسم في كل إطار."}],"answer":0},{"q":"

أثناء view transition في الجدول، يتلاشى رأس الصفحة الثابت تقاطعيًا مع الصفحة، فيبدو كأنه يومض. كيف تُبقيه ثابتًا؟

","options":[{"text":"اضبط position: fixed على الرأس.","why":"العناصر الثابتة تُلتقط أيضًا في صورة الـ root، فتتلاشى تقاطعيًا هي الأخرى."},{"text":"اضبط z-index: 1000 على الرأس.","why":"ترتيب التراكب في الصفحة الحيّة لا يهمّ أثناء الانتقال؛ الرأس يظل جزءًا من صورة الـ root التي تتلاشى تقاطعيًا."},{"text":"أعطِ الرأس view-transition-name: header واضبط animation: none على ::view-transition-group(header).","why":"صحيح. تسمية الرأس تعطيه مجموعة خاصة به، منفصلة عن التلاشي التقاطعي للـ root، وإزالة حركة تلك المجموعة تُبقيه ثابتًا."},{"text":"أضف will-change: transform إلى الرأس.","why":"هذا تلميح للرسم ولا أثر له في طريقة التقاط الانتقال للرأس."}],"answer":2},{"q":"

شريط تقدّم القراءة يستخدم animation: grow ease both; animation-timeline: scroll(root);. في منتصف الصفحة يكون الشريط ممتلئًا بنسبة 80% بالفعل. لماذا؟

","options":[{"text":"scroll(root) تقيس الـ viewport لا المستند.","why":"scroll(root) تتتبّع تقدّم حاوية تمرير المستند؛ والتشوّه يأتي من منحنى التسارع."},{"text":"نمط التعبئة both يجعل الشريط يقفز إلى الأمام.","why":"both لا تفعل إلا تطبيق أول keyframe وآخرها خارج النطاق النشط."},{"text":"خطوط زمن التمرير تعمل دائمًا بسرعة مضاعفة في المنتصف.","why":"التقدّم متناسب مع موضع التمرير؛ ومنحنى التسارع وحده هو الذي يغيّر طريقة ربطه بالـ keyframes."},{"text":"منحنى التوقيت ease يربط تقدّم التمرير بشكل غير خطي؛ استخدم linear ليتتبّع الشريط مسافة التمرير بدقّة.","why":"صحيح. دوال التوقيت تظل تنطبق على خطوط زمن التمرير، فيشوّه المنحنى الربط."}],"answer":3},{"q":"

أضاف مطوّر جديد .session-card { margin-block-start: 24px; } كي لا تتلامس البطاقات في الشريط الجانبي. ما الذي يجب أن تقترحه المراجعة بدلًا من ذلك؟

","options":[{"text":"استخدم margin-top بدلًا منها، من أجل المتصفّحات الأقدم.","why":"الخصائص المنطقية مدعومة في كل مكان؛ المشكلة في أن الـ component يضع مسافاته بنفسه."},{"text":"أضف !important لتصمد الـ margin في التخطيطات الأخرى.","why":"هذا يجعل تعديل الـ margin لكل سياق مستحيلًا، وهو عكس المطلوب."},{"text":"انقل الـ margin إلى layer الـ utilities.","why":"ستظل البطاقة تحمل مسافاتها في كل مكان؛ والشريط الجانبي هو المكان الذي يحتاج إليها."},{"text":"أعطِ تخطيط الشريط الجانبي display: grid (أو flex) مع gap، وأبقِ البطاقة خالية من الـ margins الخارجية.","why":"صحيح. السياق يملك المسافات، فتبقى البطاقة قابلة لإعادة الاستخدام في الشبكة والشريط الجانبي والـ carousel."}],"answer":3},{"q":"

أضفت content-visibility: auto إلى قسم كل يوم في جدول طويل ولا شيء غير ذلك. ماذا يلاحظ المستخدمون؟

","options":[{"text":"يقفز شريط التمرير كلما رُسمت الأقسام، لأن الأقسام المتخطّاة لا ارتفاع لها حتى يُحسب تخطيطها.","why":"صحيح. contain-intrinsic-size: auto <length> تعطي الأقسام المتخطّاة ارتفاعًا نائبًا وتعالج القفز."},{"text":"تختفي الأقسام الواقعة خارج الشاشة من نتائج البحث داخل الصفحة.","why":"المحتوى الذي تتخطّاه content-visibility: auto يبقى قابلًا للبحث ولإمكانية الوصول."},{"text":"لا يتغيّر شيء، لأن content-visibility لا تعمل إلا مع JavaScript.","why":"إنها CSS خالصة وتأخذ مفعولها فورًا."},{"text":"يُرسم كل قسم مرتين، فتبطؤ الصفحة.","why":"يرسم المتصفّح القسم حين يقترب من الـ viewport؛ ولا يرسمه مرتين."}],"answer":0}]},"final":[{"q":"

ما لون الفقرة؟

\n
HTML
<p style=\"color: red\">Doors open at 08:30</p>
\n
CSS
p { color: blue !important; }
\n","options":[{"text":"red، لأن الأنماط المضمّنة تفوز دائمًا.","why":"الأنماط المضمّنة تتغلّب على قواعد ملف الأنماط العادية، لكن !important تُحسم في مرحلة أسبق من الـ cascade."},{"text":"red، لأنها أدقّ تحديدًا.","why":"الأنماط المضمّنة لا تُقارَن بالـ specificity؛ والأهمية تُحسم قبل كليهما."},{"text":"blue، لأن قواعد ملف الأنماط تُحمَّل بعد الأنماط المضمّنة.","why":"ترتيب التحميل ليس السبب؛ الأهمية تتفوّق على النمط المضمّن."},{"text":"blue، لأن التصريح المهمّ يتغلّب على النمط المضمّن العادي.","why":"صحيح. الأهمية جزء من أول معايير الـ cascade، وتُفحص قبل الأنماط المضمّنة."}],"answer":3},{"q":"

لعنصرٍ السمة hidden والـ class card. ما قيمة display فيه؟

\n
CSS
@layer reset, components;\n@layer reset { [hidden] { display: none !important; } }\n@layer components { .card { display: grid !important; } }
\n","options":[{"text":"none، لأن التصريحات المهمّة في الـ layers الأسبق تفوز.","why":"صحيح. مع !important ينعكس ترتيب الـ layers، فتتغلّب reset على components."},{"text":"grid، لأن components هي الـ layer اللاحقة.","why":"هذا صحيح في التصريحات العادية؛ أما المهمّة فتعكس الترتيب."},{"text":"grid، لأن الـ class يتغلّب على selector السمة.","why":"كلاهما درجته (0,1,0)، وعلى أيّ حال تُقارَن الـ layers قبل الـ specificity."},{"text":"القيمة الافتراضية للعنصر في المتصفّح.","why":"القاعدتان تنطبقان؛ والـ cascade يختار إحداهما."}],"answer":0},{"q":"

--accent غير معرّفة في أيّ مكان. ما الذي تُنتجه color: var(--accent, teal)؟

","options":[{"text":"اللون الموروث، لأن التصريح غير صالح.","why":"القيمة البديلة موجودة لهذه الحالة بالذات؛ ولا يكون التصريح غير صالح إلا إن لم توجد قيمة بديلة قابلة للاستخدام."},{"text":"black، القيمة الابتدائية لـ color.","why":"حتى دون قيمة بديلة كانت color سترث من العنصر الأب لا أن تعود إلى الأسود؛ وهنا تنطبق القيمة البديلة على أيّ حال."},{"text":"teal","why":"صحيح. الـ custom property غير المعرّفة تحمل القيمة غير الصالحة حتمًا، فتستخدم var() قيمتها البديلة."},{"text":"سلسلة فارغة، فيصبح النص شفافًا.","why":"الـ custom properties لا تُنتج الشفافية من تلقاء نفسها؛ والقيمة البديلة هي التي تنطبق."}],"answer":2},{"q":"

شبكة من عمودين تستخدم grid-template-columns: 1fr 1fr. مثال كود فيه سطر طويل جدًا يجعل العمود الأول أعرض بكثير. أيّ تغيير يُبقي العمودين متساويين ويتيح للكود أن يتمرّر؟

","options":[{"text":"grid-template-columns: repeat(2, auto)","why":"الـ tracks بقيمة auto تتحدّد بحسب المحتوى، فيزيد السطر الطويل الأمر سوءًا."},{"text":"grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) مع overflow-x: auto على كتلة الكود.","why":"صحيح. إزالة الحدّ الأدنى التلقائي تُبقي الـ tracks متساوية؛ وكتلة الكود تعالج فيضانها بنفسها."},{"text":"white-space: nowrap على كتلة الكود.","why":"هذا يمنع السطر من الالتفاف، وهو المشكلة أصلًا."},{"text":"grid-auto-flow: column","why":"هذا يغيّر اتجاه وضع العناصر، لا أحجام الـ tracks."}],"answer":1},{"q":"

component يستخدم font-size: clamp(1rem, 4cqi, 2rem)، لكنه في إحدى الصفحات ليس داخل أيّ حاوية حجم. إلامَ تُحسب 4cqi هناك؟

","options":[{"text":"4% من الحجم الأفقي للـ viewport الصغير، وهو البديل الاحتياطي لوحدات الحاوية.","why":"صحيح. في غياب حاوية مؤهّلة ترجع وحدات الحاوية إلى وحدات الـ viewport الصغيرة، فتظل القاعدة تعمل."},{"text":"صفر، فيستقرّ حجم الخط عند الحدّ الأدنى 1rem.","why":"وحدات الحاوية لا تُحسب صفرًا؛ بل ترجع إلى وحدات الـ viewport."},{"text":"عرض العنصر الأب.","why":"حاويات الحجم وحدها تُحسب؛ والعنصر الأب العادي لا يُقاس."},{"text":"التصريح غير صالح ويُتجاهل.","why":"القيمة صالحة؛ لكنها تستخدم بديل الـ viewport فحسب."}],"answer":0},{"q":"

أيّ تصريح يوسّط كتلة ثابتة العرض أفقيًا في الصفحات المكتوبة من اليسار إلى اليمين ومن اليمين إلى اليسار معًا؟

","options":[{"text":"margin-inline-start: auto;","why":"جهة واحدة فقط تمتصّ المساحة، فتُدفع الكتلة إلى النهاية لا إلى المنتصف."},{"text":"text-align: center;","why":"هذا يوسّط المحتوى الـ inline داخل الكتلة، لا الكتلة نفسها."},{"text":"inset-inline: 0;","why":"خصائص الـ inset لا تؤثّر إلا في العناصر ذات التموضع، وهي تضبط المواضع لا margins التوسيط."},{"text":"margin-inline: auto;","why":"صحيح. الـ margin في جهتي الـ inline كلتيهما تمتصّان المساحة الحرّة بالتساوي، أيًّا كان الاتجاه."}],"answer":3},{"q":"

ما الذي تُنتجه background: color-mix(in oklch, var(--brand), transparent 80%)؟

","options":[{"text":"لون العلامة التجارية بعتامة 20%.","why":"صحيح. يأخذ transparent نسبة 80% من المزيج، فيحتفظ لون العلامة التجارية بـ 20% من قناة alpha الخاصة به."},{"text":"لون العلامة التجارية بعتامة 80%.","why":"الـ 80% تخصّ transparent، اللون الذي تليه، فلا يحصل لون العلامة التجارية إلا على 20%."},{"text":"رمادي، لأن المزج مع transparent يزيل التشبّع.","why":"ليس لـ transparent درجة لون يجذب نحوها، فتُحفظ إضاءة لون العلامة التجارية وتشبّعه ودرجته."},{"text":"قيمة غير صالحة، لأن transparent لا يمكن مزجه.","why":"transparent لون عادي في color-mix()، وهو الطريقة المعتادة لإضافة الشفافية."}],"answer":0},{"q":"

الوضع الداكن لديك يبدّل كل token بشكل صحيح، لكن قوائم <select> في النماذج وأشرطة التمرير تبقى بيضاء ساطعة. ما الناقص؟

","options":[{"text":"tokens داكنة لـ --select-bg و--scrollbar-bg.","why":"واجهة المتصفّح الأصلية لا تقرأ الـ custom properties الخاصة بك افتراضيًا."},{"text":"media query prefers-color-scheme حول الـ tokens.","why":"هذا يغيّر الـ tokens لديك، وهي تعمل أصلًا؛ أما عناصر التحكّم الأصلية فما زالت تحتاج إلى color-scheme."},{"text":"appearance: none على كل عنصر تحكّم.","why":"هذا يرمي التنسيق الأصلي وميزات إمكانية الوصول لإصلاح شيء تعالجه خاصية واحدة."},{"text":"تصريح color-scheme يتضمّن dark، ليرسم المتصفّح واجهته الخاصة بالوضع الداكن.","why":"صحيح. عناصر التحكّم المدمجة وأشرطة التمرير تتبع color-scheme، لا الـ custom properties الخاصة بك."}],"answer":3},{"q":"

مستخدم الفأرة ينقر زرًّا فلا يرى حلقة focus؛ ومستخدم لوحة المفاتيح يصل إليه بـ Tab فيرى حلقة. الـ CSS تستخدم :focus-visible. هل هذا خطأ؟

","options":[{"text":"نعم. يجب أن تظهر الحلقة لكل مستخدم مع كل focus.","why":"تشترط WCAG مؤشّرًا ظاهرًا للتشغيل بلوحة المفاتيح، وهذا ما توفّره :focus-visible."},{"text":"لا. :focus-visible تستخدم قواعد المتصفّح التقديرية لتُظهر المؤشّر مع focus لوحة المفاتيح لا بعد نقرة فأرة على زر.","why":"صحيح. هذا هو السلوك المقصود، وهو يستوفي معيار Focus Visible لمستخدمي لوحة المفاتيح."},{"text":"نعم. الـ focus البرمجي مطلوب لمستخدمي الفأرة.","why":"مستخدمو الفأرة يرون أصلًا أين نقروا؛ ولا حاجة إلى focus برمجي."},{"text":"لا، لكن فقط لأن الزر بلا outline في ملف إعادة الضبط.","why":"ملف إعادة الضبط لا علاقة له بالأمر؛ قواعد :focus-visible التقديرية هي ما يفسّر السلوك."}],"answer":1},{"q":"

نافذة حوار تُعرض بـ showModal() يجب أن تظهر تدريجيًا من opacity صفر. الـ transition على opacity لا يعمل أبدًا عند الفتح. ما الإصلاح؟

","options":[{"text":"زِد مدة الـ transition.","why":"الـ transition لا يبدأ أصلًا، فمدّته لا تهمّ."},{"text":"أضف @starting-style { dialog[open] { opacity: 0; } } ليكون لأول نمط قيمة بداية.","why":"صحيح. دون حالة سابقة لا يوجد ما ينطلق منه الـ transition حين تُرسم نافذة الحوار أول مرة."},{"text":"استخدم animation-delay بدل الـ transition.","why":"التأخير لا يعطي المتصفّح نمط بداية هو الآخر."},{"text":"اضبط will-change: opacity على نافذة الحوار.","why":"will-change تلميح للأداء ولا تُنشئ قيمة بداية."}],"answer":1},{"q":"

بطاقات المتحدّثين تظهر تدريجيًا بحركة مرتبطة بالتمرير داخل @supports (animation-timeline: view()). ماذا يرى زائر يستخدم نسخة Firefox المستقرة في 2026؟

","options":[{"text":"البطاقات ظاهرة بالكامل، بلا حركة ظهور تدريجي.","why":"صحيح. كتلة @supports لا تنطبق، فتحتفظ البطاقات بأنماطها العادية الظاهرة."},{"text":"بطاقات غير مرئية، لأن الظهور التدريجي يبدأ من opacity صفر.","why":"الـ keyframe ذو opacity صفر لا يُستخدم إلا داخل كتلة @supports التي يتخطّاها Firefox."},{"text":"ظهورًا تدريجيًا زمنيًا عند تحميل الصفحة.","why":"لا شيء في الكتلة المحمية ينطبق، فلا حركة على الإطلاق."},{"text":"طبقة خطأ يعرضها المتصفّح.","why":"المتصفّحات تتخطّى بصمت الـ CSS التي لا تدعمها."}],"answer":0},{"q":"

خمسون بطاقة متحدّث تحرّك box-shadow عند المرور، وتحريك الفأرة عبر الشبكة يبدو ثقيلًا. ما الطريقة الأرخص للحصول على المظهر نفسه؟

","options":[{"text":"أضف will-change: box-shadow إلى كل بطاقة.","why":"رفع الطبقة لا يمنع الظلّ من إعادة الرسم في كل إطار، وخمسون طبقة تكلّف ذاكرة."},{"text":"قلّل مدة الـ transition إلى 50ms.","why":"إطارات أقل من إعادة الرسم تظل إعادة رسم، ويصبح التأثير مفاجئًا."},{"text":"ضع الظلّ الأكبر على pseudo-element ::after وحرّك الـ opacity الخاصة به بدلًا من ذلك.","why":"صحيح. يُرسم الظلّ مرة واحدة؛ والمرور لا يغيّر إلا التركيب، فلا تعمل إعادة رسم في كل إطار."},{"text":"استخدم filter: drop-shadow() بدلًا منها.","why":"تغيير ظلّ الـ filter يظل يتطلّب إعادة رسم العنصر المرشَّح في كل إطار."}],"answer":2}],"glossary":[{"id":"cascade","term":"Cascade","definition":"الخوارزمية التي يستخدمها المتصفّح لاختيار قيمة واحدة حين تستهدف عدّة تصريحات الخاصية نفسها على العنصر نفسه: المصدر والأهمية، ثم الأنماط المضمّنة، ثم الـ layers، ثم الـ specificity، ثم ترتيب الظهور.","lesson":"l-css-1-1"},{"id":"inheritance","term":"الوراثة (Inheritance)","definition":"حين لا يستهدف أيّ تصريح خاصيةً موروثة مثل color أو font-family، يأخذ العنصر القيمة المحسوبة لعنصره الأب؛ أما الخصائص غير الموروثة فترجع إلى قيمتها الابتدائية.","lesson":"l-css-1-1"},{"id":"specificity","term":"Specificity","definition":"وزن الـ selector، ويُحسب ثلاثة أعداد منفصلة (الـ IDs؛ ثم الـ classes والسمات والـ pseudo-classes؛ ثم الأنواع والـ pseudo-elements) تُقارَن عمودًا بعمود، ولا تُجمع معًا أبدًا.","lesson":"l-css-1-2"},{"id":"where-pseudo-class","term":":where()","definition":"pseudo-class تطابق كما تطابق :is() لكن الـ specificity فيها صفر دائمًا، ما يجعلها مثالية لأنماط إعادة الضبط والأنماط الأساسية التي يجب أن تتجاوزها الـ components بسهولة.","lesson":"l-css-1-2"},{"id":"is-pseudo-class","term":":is()","definition":"pseudo-class تطابق أيّ selector في قائمتها وتأخذ specificity أدقّ وسيط فيها؛ وتستخدم قائمة selectors متسامحة، فلا يُسقط وسيط واحد غير صالح القاعدة كلها.","lesson":"l-css-1-2"},{"id":"cascade-layer","term":"طبقة الـ cascade (Cascade layer)","definition":"مجموعة مسمّاة من القواعد تُنشأ بـ @layer. الـ layers المُعلنة لاحقًا تتغلّب على السابقة قبل مقارنة الـ specificity، والأنماط خارج الـ layers تتغلّب على كل الـ layers في التصريحات العادية.","lesson":"l-css-1-3"},{"id":"custom-property","term":"Custom property","definition":"خاصية يبدأ اسمها بشرطتين، مثل --track-color، وتُقرأ بـ var(). وهي موروثة افتراضيًا، وتُستبدل حيث تُستخدم، في وقت حساب القيمة.","lesson":"l-css-1-4"},{"id":"invalid-at-computed-value-time","term":"غير صالح في وقت حساب القيمة (Invalid at computed-value time)","definition":"ما يحدث حين يُنتج الاستبدال في var() قيمة لا تستطيع الخاصية استخدامها: تتصرّف الخاصية كأنها غير مضبوطة، فتأخذ قيمتها الموروثة أو الابتدائية بدل تصريح سابق.","lesson":"l-css-1-4"},{"id":"at-property","term":"@property","definition":"قاعدة at-rule تسجّل custom property بصيغة وعلامة للوراثة وقيمة ابتدائية، فيستطيع المتصفّح فحص صحّتها والانتقال بين قيمها تدريجيًا في الـ transitions والحركات.","lesson":"l-css-1-4"},{"id":"css-nesting","term":"CSS nesting","definition":"صيغة أصلية لكتابة القواعد داخل قواعد أخرى، حيث تمثّل & الـ selector الأب. وهي تعمل على الـ selectors لا على النص، فلا تستطيع بناء أسماء classes على طريقة BEM كما يفعل Sass.","lesson":"l-css-1-5"},{"id":"has-pseudo-class","term":":has()","definition":"pseudo-class علائقية تطابق العنصر حين يجد الـ selector النسبي بداخلها تطابقًا، فتتيح تنسيق عنصر أب أو شقيق سابق بحسب أبنائه أو أشقّائه اللاحقين.","lesson":"l-css-1-5"},{"id":"flex-basis","term":"flex-basis","definition":"الحجم الذي يبدأ منه عنصر flex على امتداد المحور الرئيسي، قبل أن تتقاسم flex-grow المساحة المتبقية أو تستردّ flex-shrink النقص.","lesson":"l-css-2-1"},{"id":"automatic-minimum-size","term":"الحجم الأدنى التلقائي (Automatic minimum size)","definition":"القيمة الافتراضية min-width: auto لعناصر flex وgrid، التي تمنعها من التقلّص تحت حجم محتواها. وضبط min-width: 0 يتيح للنص الطويل أن يُقتطع بدل أن يفيض.","lesson":"l-css-2-1"},{"id":"grid-template-areas","term":"grid-template-areas","definition":"خاصية grid تسمّي مناطق الشبكة بسلاسل نصية، سلسلة لكل صف، فتستطيع وضع العناصر بأسمائها وإعادة ترتيب التخطيط بإعادة رسم السلاسل.","lesson":"l-css-2-2"},{"id":"auto-fit","term":"auto-fit","definition":"كلمة مفتاحية لـ repeat() تنشئ أكبر عدد من الـ tracks يتّسع وتطوي الفارغة منها، فتتمدّد العناصر القليلة لتملأ الصف؛ أما auto-fill فتحتفظ بالـ tracks الفارغة.","lesson":"l-css-2-2"},{"id":"subgrid","term":"Subgrid","definition":"القيمة subgrid لـ grid-template-rows أو grid-template-columns، التي تجعل الشبكة المتداخلة تستخدم tracks الأب التي تمتدّ عليها، فيصطفّ المحتوى عبر الـ components الشقيقة.","lesson":"l-css-2-3"},{"id":"fit-content","term":"fit-content","definition":"كلمة مفتاحية للتحجيم الذاتي تجعل حجم العنصر بعرض max-content الخاص به، محدودًا بالمساحة المتاحة، فتستطيع الكتلة أن تحتضن محتواها دون أن تفيض.","lesson":"l-css-2-4"},{"id":"clamp","term":"clamp()","definition":"دالة رياضية تُرجع قيمة مفضّلة محصورة بين حدّ أدنى وحدّ أقصى، وتُكتب clamp(MIN, PREFERRED, MAX). وهي تساوي max(MIN, min(PREFERRED, MAX)).","lesson":"l-css-2-4"},{"id":"container-query","term":"Container query","definition":"قاعدة @container تطبّق الأنماط بحسب حجم حاوية من الأسلاف أو نمطها بدل الـ viewport، فيتكيّف الـ component مع الخانة التي يجلس فيها.","lesson":"l-css-2-5"},{"id":"container-units","term":"وحدات الحاوية (Container query units)","definition":"وحدات مثل cqi وcqb تساوي 1% من الحجم الأفقي أو الرأسي لأقرب حاوية حجم، وترجع إلى وحدات الـ viewport الصغيرة حين لا توجد حاوية.","lesson":"l-css-2-5"},{"id":"fluid-type","term":"الخطوط المرنة (Fluid type)","definition":"أحجام خطوط تتغيّر باستمرار مع العرض المتاح، وتُكتب عادةً بـ clamp() مع حدّ أدنى بـ rem، وقيمة مفضّلة خطية تجمع rem مع vw أو cqi، وحدّ أقصى بـ rem.","lesson":"l-css-3-1"},{"id":"logical-properties","term":"الخصائص المنطقية (Logical properties)","definition":"خصائص مسمّاة بحسب سير النص لا بحسب الجهات الفيزيائية، مثل margin-inline-start وinline-size، فتنعكس التخطيطات بشكل صحيح في اللغات التي تُكتب من اليمين إلى اليسار مثل العربية.","lesson":"l-css-3-2"},{"id":"oklch","term":"oklch()","definition":"دالة ألوان تستخدم الإضاءة والتشبّع ودرجة اللون الإدراكية، فتبدو الألوان المتساوية في الإضاءة متساوية في السطوع. وتستطيع أيضًا التعبير عن ألوان خارج نطاق sRGB.","lesson":"l-css-3-3"},{"id":"relative-color-syntax","term":"صيغة الألوان النسبية (Relative color syntax)","definition":"طريقة لاشتقاق لون من آخر بفكّ قنواته باستخدام from، كما في oklch(from var(--brand) calc(l - 0.1) c h)، وتغيير ما تحتاج إليه فقط.","lesson":"l-css-3-3"},{"id":"light-dark","term":"light-dark()","definition":"دالة ألوان تُرجع قيمتها الأولى حين يكون النظام اللوني المستخدم في العنصر فاتحًا، والثانية حين يكون داكنًا. وتحتاج إلى أن تسمح color-scheme بالداكن.","lesson":"l-css-3-4"},{"id":"focus-visible","term":":focus-visible","definition":"pseudo-class تطابق العنصر الذي عليه الـ focus فقط حين يرى المتصفّح أن مؤشّر الـ focus مفيد، مثل focus لوحة المفاتيح أو أيّ حقل نصي، لا عند نقرة فأرة على زر.","lesson":"l-css-3-5"},{"id":"starting-style","term":"@starting-style","definition":"قاعدة at-rule تحدّد الأنماط التي ينطلق منها العنصر في الـ transition حين يُرسم أول مرة أو ينتقل من display: none إلى الظهور، فتتيح حركات الدخول بـ CSS وحدها.","lesson":"l-css-4-1"},{"id":"view-transition","term":"View transition","definition":"حركة تُنشئها document.startViewTransition(): يلتقط المتصفّح صورتين للحالتين القديمة والجديدة في تحديث الـ DOM، ويحرّك الانتقال بينهما عبر pseudo-elements تستطيع تنسيقها.","lesson":"l-css-4-2"},{"id":"scroll-driven-animation","term":"الحركة المرتبطة بالتمرير (Scroll-driven animation)","definition":"حركة CSS يتبع تقدّمها خط زمن للتمرير، يُضبط بـ animation-timeline: scroll() أو view()، بدل الزمن المنقضي.","lesson":"l-css-4-3"},{"id":"compositing","term":"التركيب (Compositing)","definition":"المرحلة الأخيرة من الرسم، حيث تُجمَّع الطبقات المرسومة على الـ GPU. وكثيرًا ما يمكن معالجة تغييرات transform وopacity هنا وحدها، بتخطّي التخطيط والرسم.","lesson":"l-css-4-5"}]}