أفضل 60+ سؤالاً وجواباً في مقابلة CSS (2026)
إيما دافيس
هل تستعد لمقابلة CSS؟ حان الوقت لصقل معرفتك بالأساسيات وما بعدها. فهم مقابلة CSS يمكن للأسئلة أن تكشف عن مدى فهم المرشحين لبنية التصميم ومنطق الأسلوب.
تفتح مهنة تطوير CSS آفاقًا واسعة لفرص عمل متنوعة، بدءًا من تصميم الواجهة الأمامية ووصولًا إلى تطبيقات الويب سريعة الاستجابة. بفضل الخبرة التقنية، وخبرة المجال، ومهارات التحليل القوية، يمكن للمهنيين إبراز مهاراتهم المتقدمة التي يُقدّرها قادة الفرق والمديرون. تساعد هذه الأسئلة والأجوبة المطورين الجدد، والمتوسطين، والخبراء على اجتياز المقابلات بثقة وفعالية.
استنادًا إلى الأفكار التي شاركها أكثر من 85 متخصصًا، بما في ذلك القادة الفنيون والمديرون وخبراء التوظيف، يجمع هذا الدليل ممارسات المقابلات الموثوقة عبر الصناعات المختلفة - مما يضمن الدقة والملاءمة والمصداقية لجميع مستويات الخبرة.
أهم أسئلة وأجوبة مقابلة CSS
1) شرح سلسلة CSS الحديثة، بما في ذلك @layer، والخصوصية، وترتيب المصدر.
يُحدد التسلسل أي قاعدة "تفوز" عندما تستهدف قواعد متعددة العنصر نفسه. ويعتمد القرار على الأهمية ( !important )، الأصل (وكيل المستخدم، المستخدم، المؤلف)، ثم ترتيب الطبقات من @layer، متبوعًا بالتحديد، وأخيرًا ترتيب المصدر. باستخدام @layer يتيح لك تحديد طبقات قابلة للتنبؤ، مثل إعادة الضبط، والأساس، والمكونات، والأدوات المساعدة، بحيث تتجاوز مجموعات كاملة من القواعد قواعد أخرى دون رفع مستوى تحديد المُحدد. الميزة الرئيسية هي سهولة الصيانة؛ أما العيب الرئيسي فهو أن ترتيب الطبقات غير الصحيح قد يُخفي الأخطاء. يُفضل مُحددات الفئات منخفضة التحديد، ويُفضل الاحتفاظ بها. !important للسياسات المتعمدة، والحفاظ على البنية التحتية واضحة.
الإجابة مع الأمثلة
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 تحميل ملف PDF مجانًا: أسئلة مقابلة CSS
2) كيف تختلف استعلامات الحاوية عن استعلامات الوسائط، وأين تستخدم كل منهما؟
تستجيب استعلامات الحاوية لحجم أو نمط العنصر المحتويمما يجعل المكونات واعية بذاتها وقابلة لإعادة الاستخدام في سياقات مختلفة. تستجيب استعلامات الوسائط لـ العرض أو خصائص الجهاز، وتألقها في تحولات التخطيط العالمية. تُمكّن استعلامات الحاويات البطاقات والأدوات والوحدات النمطية المتداخلة من التكيف محليًا؛ وتظل استعلامات الوسائط مثالية للتنقل على مستوى الموقع أو لتغييرات واجهة المستخدم. تشمل مزايا استعلامات الحاويات دقة أكبر ونقاط توقف عالمية أقل؛ وتشمل عيوبها الإعداد عبر container-type والاختيار الدقيق للحدود.
الفرق بين (جدول المقارنة)
| عامل | تساؤلات الإعلام | استعلامات الحاويات |
|---|---|---|
| تحفيز عملية | ميزات Viewport | حجم الحاوية أو الطراز |
| مجال | على مستوى الصفحة | المكون المحلي |
| اقامة | لا يوجد شيء خارج نطاق الاستعلام | يتطلب container-type / اسم اختياري |
| أفضل ل | نقاط التوقف العالمية | متغيرات البطاقة أو القطعة |
الإجابة مع الأمثلة
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) ما هي خصائص وفوائد :has()، وكيف يتم مقارنته بـ :is() و :where() ?
الطبقة الزائفة العلائقية :has() يختار عنصرًا بناءً على أحفاده أو النمط اللاحق، مما يتيح تصميم الحالة الأصلية دون Javaهذا النص فعّال لمجموعات التحقق من صحة النماذج، أو حالات التنقل، أو تبديلات الكثافة. على النقيض من ذلك، :is() و :where() تبسيط قوائم الاختيار الطويلة؛ :where() يساهم في عدم وجود أي خصوصية، في حين :is() يساهم في تحديد حجته الأكثر تحديدًا. فوائد :has() يتضمن تنسيقًا سياقيًا وترميزًا أكثر وضوحًا؛ ومن عيوبه مشاكل محتملة في الأداء عند استخدامه مع محددات غير محدودة. ضيّق نطاقه، وادمجه مع الفئات أو السمات لزيادة قابلية التنبؤ.
الإجابة مع الأمثلة
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) أين يمكنك تطبيق خصائص CSS المخصصة للموضوعات، وما هي مزاياها وعيوبها؟
تُمرر خصائص CSS المخصصة القيم عبر التسلسل، وترث بشكل طبيعي، وتُحل في وقت التشغيل، مما يجعلها مثالية للسمات، وأنماط الكثافة، ورموز التصميم. كما أنها تسمح بتبديل الوضع الداكن أو التبديلping أنظمة ألوان بدون إعادة بناء الأصول. تشمل المزايا التحديثات الديناميكية، والتواجد المشترك مع المكونات، والتوافق مع @layerتشمل العيوب عدم توجيه المُحللين الثابتين، والحاجة إلى تصميم بدائل. استخدم رموزًا ذات نطاق جذر للدلالات العالمية، ورموزًا ذات نطاق المكونات للمتغيرات، وحافظ على ثبات الأسماء لضمان صيانتها على المدى الطويل.
الإجابة مع الأمثلة
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) ما هو نظام التخطيط الذي يناسب كل مشكلة: Flexbox، أو Grid، أو Subgrid؟
Flexbox هو الخيار الأمثل لـ الأبعاد واحد المحاذاة والتوزيع على طول محور واحد، تتميز الشبكة بالتميز ثنائي الأبعاد تحديد الموقع والوضوح tracالتحكم k، وتتيح الشبكة الفرعية للعناصر الفرعية وراثة الشبكة الأصلية tracتُستخدم ks لضمان محاذاة متسقة بين المكونات المتداخلة. اختيار النظام المناسب يقلل من عمليات التجاوز ويحسن من سهولة القراءة. من الأنماط الشائعة استخدام Grid لإطارات الصفحات ولوحات المعلومات، وFlexbox لأشرطة الأدوات وقوائم الشرائح، وSubgrid لمحاذاة العناصر الداخلية مثل بيانات تعريف البطاقات مع الأعمدة الخارجية.
الأنواع والاختلافات بينها (جدول المقارنة)
| الحلول المقترحة | حول flexbox | شبكة | الشبكة الفرعية |
|---|---|---|---|
| الابعاد | 1-D | 2-D | ثنائي الأبعاد عبر الموروث tracks |
| قوة | التوزيع والمحاذاة | مناطق واضحة، قابلة للتكرار tracks | محاذاة بين المكونات |
| اقامة | أدنى | تحديد الصفوف/الأعمدة | الشبكة الرئيسية مطلوبة |
| مثال | أشرطة التنقل، الحبوب | المعرض، لوحات المعلومات | تذييلات البطاقة محاذية لشبكة الصفحة |
الإجابة مع الأمثلة
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
٦) هل تُحسّن الخصائص المنطقية التدويل؟ اشرح الفوائد والتنازلات.
تستبدل الخصائص المنطقية الاتجاهات المادية، مثل اليسار واليمين، بمصطلحات مرتبطة بالتدفق، مثل بداية ونهاية السطر والكتلة. هذا يُمكّن ورقة الأنماط الواحدة من التكيف مع لغات الكتابة من اليمين إلى اليسار وأنماط الكتابة العمودية دون قواعد التفرع. تتمثل المزايا في عولمة أفضل، وتقليل تكرار القواعد، ومكونات أكثر مرونة. تشمل التنازلات تحولًا فكريًا أثناء التبني، وفجوات عرضية في خصائص الذيل الطويل. تفضيل margin-inline, padding-blockو inset-inline-start للتباعد وتحديد المواقع لتحقيق تخطيطات متسقة عبر المواقع.
الإجابة مع الأمثلة
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) متى تستخدم clamp() ووحدات العرض الحديثة ( svh, lvh, dvh ) لنوع السائل والتباعد؟
استعمل clamp(min, preferred, max) عندما تريد قيمًا تتناسب بسلاسة مع نمو نافذة العرض دون تجاوز الحدود المعقولة. هذا مثالي للطباعة والحشو وأقسام البطل. وحدات نافذة العرض الحديثة مصممة لواجهة مستخدم متصفح كروم للأجهزة المحمولة، مما يوفر ارتفاعات ثابتة لأقسام ملء الشاشة. تشمل المزايا استعلامات وسائط أقل، وإيقاعًا ثابتًا، وإمكانية وصول مُحسّنة عند دمجها مع remالعيب هو ضرورة إجراء الاختبار عبر الأجهزة للتأكد من القصد البصري وأهداف النقر الآمنة.
الإجابة مع الأمثلة
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) ما هو سياق التكديس، وكيف تعمل عوامل المؤشر z والوضع على إنشائه أو عزله؟
سياق التكديس هو نطاق رسم معزول، حيث تُجرى مقارنات مؤشر Z فقط بين العناصر الشقيقة ضمن السياق نفسه. تنشأ السياقات الجديدة من العنصر الجذري، والعناصر الموضوعة مع z-index غير auto، وبعض الخصائص مثل transform, opacity < 1, filterو position: fixedيُفسر فهمها مشاكل "تعطل مؤشر Z" الشائعة، حيث لا يستطيع الطفل تجاوز المحتوى خارج سياقه. تكمن الفائدة في التغليف، بينما يكمن الخطر في العزل غير المقصود الذي يمنع التراكبات المقصودة.
الإجابة مع الأمثلة
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) هل تعشيش CSS الأصلي جاهز للإنتاج، وكيف يمكنك الانتقال من المعالجات المسبقة؟
يحظى التعشيش الأصلي بدعم واسع النطاق ويقلل من التكرار من خلال وضع علاقات القواعد في مكان واحد مع الحفاظ علىping يجب أن تكون عملية الترحيل مُختصرة. ينبغي أن تُعطي الأولوية للمكونات أولاً، باستبدال سلاسل التبعية العميقة بمستوى أو مستويين من التداخل، وإزالة البنى المُخصصة للمعالج المُسبق فقط، مثل المزيجات. تشمل الفوائد حزمًا أصغر حجمًا وخريطة أدوات المطورين المُحسّنة.pingتشمل العيوب إغراء الإفراط في التعشيش، مما يزيد من التخصص ويعيق إعادة الاستخدام. ضع ضوابط: قلل العمق، واستخدم خطافات قائمة على الفئات، واجمع مع @layer للتحكم في ترتيب التجاوز.
الإجابة مع الأمثلة
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) هل يمكنك استخدام استعلامات نمط الحاوية، وما هي فوائدها العملية؟
تتيح استعلامات الأنماط للمكونات التكيف مع الأنماط المحسوبة لحاوياتها، مثل رمز الكثافة أو متغير السمة، دون الحاجة إلى إضافة أسماء فئات إضافية عبر نموذج الكائن (DOM). يُمكّن هذا أنظمة التصميم من التبديل بين الوضعين المختصر والمريح، أو بين اللمسات الفاتحة والداكنة لكل حاوية. تتمثل مزاياها في مكونات منفصلة وحدود أكثر وضوحًا؛ بينما تشمل عيوبها الحاجة إلى تسمية الرموز بعناية، وحلول احتياطية موثقة، وإعداد حاوية مدروس. استخدمها للتعبير عن الحالة كبيانات بدلًا من محددات هيكلية هشة.
الإجابة مع الأمثلة
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) ما هي عوامل الأداء المهمة بالنسبة لـ CSS، وكيف تتجنب مشاكل التخطيط؟
يعتمد أداء CSS على عدد مرات إعادة الحساب التي يجب على المتصفح القيام بها نمط، إحصاء - عد نسق، وإعادة طلاء أو مركب الطبقات. يحدث خلل في التخطيط عندما تُجبر عمليات القراءة والكتابة المتداخلة للخصائص المؤثرة على التخطيط على إعادة تدفق متكررة. النهج المُنظّم هو تقليل تعقيد المُحدد، والحفاظ على مستوى منخفض من الخصوصية، وتحريك الخصائص المُناسبة للتركيب فقط. تُقرأ DOM دفعة واحدة قبل عمليات الكتابة، وتُستغل خاصية الاحتواء للحد من نصف قطر الانفجار.
الإجابة مع الأمثلة
- تفضل
transformوopacityللرسوم المتحركة؛ تجنب الرسوم المتحركةwidth/height/top/left. - تطبيق
content-visibility: autoإلى أقسام خارج الشاشة وتوفيرهاcontain-intrinsic-size. - استعمل
will-changeبشكل مقتصد لتعزيز الطبقات فقط للرسوم المتحركة طويلة الأمد. - استبدال محددات السلالة العميقة بخطافات من فئة واحدة لتقليل إعادة حساب الأسلوب.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
١٢) ما هي ميزات CSS التي تدعم إمكانية الوصول مباشرةً؟ اذكر المزايا والأمثلة.
لا يمكن لـ CSS استبدال HTML الدلالي أو ARIA، لكنه يعمل على تحسينه تركيز الرؤية، سلامة الحركةو استراتيجيات التباين. :focus-visible يكشف شبه الفئة عن التركيز عند اكتشاف نمط لوحة المفاتيح، مما يمنع الضوضاء البصرية لمستخدمي الماوس مع الحفاظ على الإشارات لمستخدمي لوحة المفاتيح. ميزات الوسائط مثل prefers-reduced-motion يسمح بأنماط بديلة محترمة، بينما يدعم تصميم رموز الألوان الدقيق تباينًا كافيًا. الميزة هي إعدادات افتراضية شاملة لمختلف تفضيلات المستخدم؛ أما القيد فهو ضرورة توفير الدلالات والتنقل عبر لوحة المفاتيح من خلال الترميز والبرمجة النصية.
الإجابة مع الأمثلة
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) طرق مختلفة لإدراج CSS ومزايا وعيوب كل نهج.
توجد استراتيجيات إدراج متعددة، لكل منها خصائص مميزة تؤثر على التخزين المؤقت والمسار الحرج وسهولة الصيانة. تُبقي أوراق الأنماط الخارجية الأمور منفصلة وتستفيد من التخزين المؤقت للمتصفح؛ <style> مناسب للقواعد الحرجة التي يجب تحميلها باستخدام HTML؛ مضمن style="" السمات ذات أولوية قصوى، لكنها تُضعف إعادة الاستخدام وتُزيد من الخصوصية. اختيار النوع المناسب يُقلل من تكرار الحمولة مع الحفاظ على بيئة عمل المطور.
المزايا مقابل العيوب (جدول المقارنة)
| الأسلوب | المزايا | عيوب | استخدام نموذجي |
|---|---|---|---|
| ورقة الأنماط الخارجية | تخزين مؤقت للمتصفح؛ مشترك عبر الصفحات | طلب HTTP إضافي | نظام التصميم العالمي |
في النسق <style> |
يزيل الطلب؛ مثالي لـ CSS الحرجة | أصعب في الإدارة على نطاق واسع | الأنماط فوق الطية |
في النسق style="" |
فورية وأعلى درجة من التحديد | لا إعادة استخدام؛ HTML صاخب | التجاوزات لمرة واحدة |
الإجابة مع الأمثلة
<link rel="stylesheet" href="/ar/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) ما الفرق بين relative, absolute, fixedو sticky تحديد المواقع؟ تقديم إرشادات حول حالات الاستخدام.
يحدد تحديد الموضع كيفية وضع العناصر في التدفق وكيفية تفاعلها مع التمرير والأسلاف. relative يحافظ على التدفق الطبيعي لكنه يوازن بين الصندوق المرئي، وغالبًا ما يستخدم لإنشاء سياق ثابت. absolute يزيل عنصرًا من التدفق، ويضعه بالنسبة لأقرب سلف موضعي، مما يمنح الدقة على حساب الاستجابة. fixed يقوم بتثبيت العناصر في منفذ العرض، وهو أمر مثالي للأشرطة الدائمة ولكن يجب أن يأخذ في الاعتبار لوحات المفاتيح التي تظهر على الشاشة والمناطق الآمنة. sticky يتنقل بين الثابت والثابت حسب عتبات التمرير، مما يوفر عناوين الأقسام وفهرسات داخل الصفحة.
الإجابة مع الأمثلة
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) ما هي العوامل التي تشكل بنية CSS قابلة للصيانة (BEM، ITCSS، الأدوات المساعدة، الطبقات)، وما هي دورة حياة نمط المكون؟
توازن الهندسة المعمارية القابلة للصيانة تخصص محدد، قابل للتنبؤ طبقاتو مستقر تسميةيوفر BEM خطافات صريحة، ويطلب ITCSS القواعد من عمليات إعادة التعيين منخفضة المستوى إلى المرافق عالية المستوى، وتسرع الأساليب التي تركز على المرافق التكرار باستخدام العناصر البدائية المقيدة، و @layer يُرسّم ترتيب التجاوز عبر قاعدة الكود. تبدأ دورة حياة المكوّن عادةً بتعريف الرمز، ثم تنتقل إلى قواعد القاعدة والمكوّن، وتُضيف المتغيرات والحالات، وتنتهي بسياسات الإهمال التي تتجنب التغييرات الجذرية. الميزة هي اتساق السلوك بين الفرق؛ بينما يكمن التناقض في التخطيط والحوكمة المسبقة.
الإجابة مع الأمثلة
- الرموز في
:root(التباعد، اللون، نصف القطر). - المكونات الموضوعة في
@layer componentsمع محددات فئة واحدة. - المتغيرات عبر سمات البيانات أو استعلامات نمط الحاوية من أجل الوضوح.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) كيف يؤثر Shadow DOM على CSS scopingوما هي الطرق المختلفة لتصفيف أجزاء الجسم؟
يُغلّف Shadow DOM الترميز والتنسيق، مما يمنع التسريب العرضي ويضمن استقرار المكونات. يمكن للمؤلفين كشف الأسطح عمدًا: ::part() الأهداف هي الأجزاء المسماة التي تم تصديرها بواسطة المكون، بينما ::slotted() أنماط مُخصصة لعقد DOM خفيفة في فتحات. تشمل المزايا تغليفًا قويًا وسطحًا للتصميمات المتوقعة؛ أما العيوب فتشمل محدودية الوصول إلى المكونات الداخلية ما لم يوفر مصمم المكونات الأجزاء، والحاجة إلى توثيقها للمستهلكين.
الإجابة مع الأمثلة
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) ما هي خصائص نموذج مربع CSS، ولماذا؟ box-sizing: border-box شيء؟
يصف نموذج الصندوق كيفية تحديد الحجم الإجمالي للعنصر من المحتوى، الحشو، الحدودو هامش. مع الافتراضي content-box، أعلن width يستثني الحشو والحدود، مما قد يؤدي إلى حدوث مفاجآت فيضان وحسابات معقدة. اعتماد border-box يتضمن حشوًا وحدودًا ضمن العرض والارتفاع المُعلنَين، مما يجعل حسابات الشبكة وحجم المكونات أكثر قابلية للتنبؤ. الميزة هي تبسيط النماذج الذهنية وتقليل أخطاء التخطيط؛ أما الجانب السلبي فهو أن خلط النماذج داخل النظام قد يُربك المساهمين. توحيد الاستثناءات من الجذر وتوثيقها بشكل مفتوح.
الإجابة مع الأمثلة
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) أين ستستخدم @supports لتحسين تدريجي وما هي الفوائد؟
@supports يُمكّن اكتشاف الميزات في CSS، مما يسمح لخط الأساس بالعمل في أي مكان مع التحسينات الشرطية عند توفرها. يُقلل هذا النمط من المخاطر عند استخدام ميزات حديثة مثل استعلامات الحاويات، :has()أو شبكة فرعية. المزايا الرئيسية هي تدهور سلس ومسارات هجرة أوضح؛ تشمل العيوب الحفاظ على مسارات برمجية مزدوجة لفترة من الوقت. قم ببناء السلوك الأساسي أولًا، ثم ادمج السلوك المتقدم داخل مسار مستهدف. @supports كتل بحيث لا تتراجع البيئات القديمة.
الإجابة مع الأمثلة
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) ما هي وحدات CSS التي يجب عليك اختيارها، وما الفرق بينها؟
يؤثر اختيار الوحدة على التوسع والقابلية للقراءة وإمكانية الوصول. rem يتناسب مع حجم الخط الجذري، مما يجعله مثاليًا للنوع العالمي والتباعد؛ em يتناسب مع العنصر الحالي، وهو أمر مفيد داخل المكونات ولكن يمكن أن يتراكم بشكل غير متوقع. ch يعكس عرض الحرف "0" وهو ممتاز للقياس (طول الخط). px هل الجهاز متوافق مع البكسل وآمن للخطوط الدقيقة، ولكنه لا يستجيب لتفضيلات المستخدم. وحدات ارتفاع الخط مثل lh و rlh ساعد في الحفاظ على الإيقاع الرأسي عن طريق ربط التباعد بالشبكة الطباعية.
الإجابة مع الأمثلة
- استعمل
max-width: 65chللفقرات القابلة للقراءة. - تعيين التباعد العالمي كمضاعفات
remلاحترام تفضيلات المستخدم. - استعمل
emللمكونات الداخلية مثل أزرار الأيقونات التي تتناسب مع حجم الخط.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) هل تساعد عدادات CSS في تنظيم المحتوى، وما هي فوائدها وعيوبها؟
توفر عدادات CSS ترقيمًا تلقائيًا دون تغيير دلالات HTML، وهو أمرٌ قيّم للعناوين والأشكال والمستندات القانونية. تشمل مزاياها ترميزًا واضحًا ومرونة في العرض عبر المواقع أو الأقسام. أما عيوبها، فتتمثل في ثغرات محتملة في إمكانية الوصول إذا كان الترقيم ينقل معنىً أساسيًا لا ينعكس في بنية DOM أو لا تُعلن عنه التقنيات المساعدة. استخدم العدادات للترقيم العرضي مع ضمان صحة التسلسل الهرمي الأساسي وسهولة التنقل فيه.
الإجابة مع الأمثلة
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) متى يجب عليك استخدام CSS للتحريك، وما هي الخصائص الأكثر أمانًا للأداء؟
تكون الرسوم المتحركة أكثر مرونةً عند تشغيلها على خصائص مُلائمة للمُركِّب، والتي تتجنب الترحيل وإعادة الرسم. يتفوق CSS في الانتقالات الإعلانية المُدارة بالحالة، حيث يُمكن للمتصفح تحسين جدولة الإطارات. الخيارات الأكثر أمانًا هي transform و opacity، والتي تعمل عادةً على سلسلة المُركِّب وتُقلِّل من عمل السلسلة الرئيسية. استخدم CSS للتفاعلات الدقيقة، وانتقالات التمرير، وتأثيرات الدخول البسيطة. تجنَّب تحريك الخصائص التي تؤثر على التخطيط مثل width, height, topو left لأنها تُفعّل إعادة حساب التخطيط. عندما تكون تغييرات الهندسة ضرورية، فكّر في الأوهام القائمة على التحويل أو الاقتران اللطيف. max-height الانتقالات مع إدارة التدفق الزائد والخيارات البديلة للوصول بعناية.
الإجابة مع الأمثلة
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) هل يمكن لـ CSS مساعدة الصور المستجيبة، وما هي الطرق المختلفة للتعامل معها؟
تتمتع لغة HTML بالاختيار الجوهري للصورة من خلال srcset و sizes، ولكن تظل لغة CSS مهمة للصور الزخرفية، والتوجيه الفني للخلفيات، وملاءمة الكائنات. استخدم image-set() لتوفير دقة متعددة للصور الخلفية، ويفضل object-fit و object-position للتحكم في العناصر المُستبدلة داخل صناديقها. ادمج هذه العناصر مع استعلامات الحاويات أو الوسائط لتعديل المحاصيل أو الكثافة أو نقاط التركيز. الميزة هي تحكم بصري دقيق دون تكاثر العلامات؛ أما العيب فهو أن صور الخلفية في CSS تفتقر إلى إمكانية التفاوض على الحجم بشكل جوهري ولا يتم الإعلان عنها بواسطة التقنيات المساعدة، لذا يجب أن تبقى صور المحتوى بتنسيق HTML.
المزايا مقابل العيوب (جدول المقارنة)
| النهج | الخصائص | المزايا | عيوب | استخدام نموذجي |
|---|---|---|---|---|
HTML srcset/sizes |
الاختيار الجوهري | الدلالات الصحيحة؛ أفضل أداء | يتطلب تغييرات العلامات | صور المحتوى |
CSS image-set() |
مجموعات دقة الخلفية | التبديل السهل لكل نقطة توقف | لا يوجد حجم جوهري | خلفيات زخرفية |
object-fit / position |
Box السيطرة على الاحتواء | محصول ثابتping | غير مخصص للصور الخلفية | الصور المصغرة، الصور الرمزية |
الإجابة مع الأمثلة
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) هو Javaهل الوضع المظلم الخالي من البرامج النصية ممكن، وما هي العوامل التي تجعله قويًا؟
A Javaيمكن تنفيذ الوضع المظلم الخالي من البرامج النصية من خلال الجمع بين الخصائص المخصصة مع prefers-color-scheme ميزة وسائط وسمة HTML اختيارية لتجاوزات المستخدم. عرّف الرموز الدلالية في الجذر، ووفر متغيرات داكنة ضمن استعلام الوسائط، واسمح بـ [data-theme] تجاوزٌ لاحترام اختيار المستخدم الصريح أو هوية المؤسسة. يُقلل هذا النهج من التعقيد، ويُقلل من الوميض، ويُحافظ على موثوقية التسلسل. يكمن القيد في الاعتماد على تفضيلات النظام عند عدم وجود تجاوز صريح. وثّق الرموز، وتأكد من وجود تباين كافٍ، واختبر حدود التركيز وحالاته في كلا الوضعين.
الإجابة مع الأمثلة
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) هل هناك عيوب لتعشيش المحدد العميق والخصوصية العالية، وما هي الفوائد التي تأتي من نهج الخصوصية المنخفضة؟
التعشيش العميق والخصوصية العالية تجعل الأنماط هشة، وتُبطئ عمليات إعادة البناء، وتزيد من خطر التجاوزات غير المقصودة. تربط هذه المحددات CSS بإحكام ببنية المستند، مما يزيد من تكاليف الصيانة عند تطور الترميز. يُفضّل نهج الخصوصية المنخفضة استخدام خطافات أحادية الفئة، والبنية المسطحة، و @layer ترتيب لإدارة التجاوزات بشكل متوقع. تشمل المزايا ملكية أوضح، وعرضًا أسرع بفضل سهولة المطابقة، وتكوينًا أسهل بين الفرق. ضع حدودًا لعمق التعشيش، وتجنب تأهيل الفئات بأسماء العناصر عند عدم الحاجة، ووفر أدوات مساعدة للمخارج.
الإجابة مع الأمثلة
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) ما هي المنهجية التي تناسب الفرق المختلفة - BEM، أو ITCSS، أو المنفعة أولاً، وما هي المزايا والعيوب؟
يعتمد اختيار المنهجية على حجم الفريق وثقافة المراجعة وتقلب المنتج. حسنا يوفر خطافات واضحة وقابلة للقراءة وقابلة للتطوير في فرق كبيرة. ITCSS ينظم قاعدة التعليمات البرمجية من عمليات إعادة التعيين منخفضة المستوى عبر الكائنات والمكونات إلى الأدوات المساعدة، بما يتماشى مع التسلسل. المنفعة أولاً يُسرّع التسليم باستخدام بدائيات مقيدة، ويُفضّل التكوين على المُحددات المُخصصة. الهجينة شائعة: ITCSS للطلب، وBEM للتسمية عند الحاجة، والأدوات المساعدة للتعديلات لمرة واحدة. تشمل المُقايضات الإسهاب (BEM)، والتخطيط المُسبق (ITCSS)، واحتمالية انتشار الفئات (الأداة المساعدة أولًا).
الاختلافات (جدول المقارنة)
| الأسلوب | الخصائص | المزايا | عيوب | أفضل مناسب |
|---|---|---|---|---|
| حسنا | .block__elem–تسمية mod | خطافات يمكن التنبؤ بها | محددات مطولة | فرق كبيرة، أنظمة التصميم |
| ITCSS | العمارة متعددة الطبقات | مسح أمر التجاوز | تخطيط النفقات العامة | مستودعات أحادية متعددة الفرق |
| المنفعة أولاً | Atomفصول ic | السرعة والاتساق | خطر فقدان الطبقة | نموذج أولي سريعpingتطبيقات |
26) اشرح دورة حياة رموز التباعد والطباعة من التصميم إلى الكود مع الأمثلة.
تبدأ دورة حياة الرمز المميز في التصميم باختيارات المقياس والنسب وأهداف إمكانية الوصول. تُصبح هذه خصائص مخصصة مُسمّاة ومُنسّقة تُمثّل الدلالات. أنواع (فمثلا، --space-2, --font-scale-1 ) بدلاً من القيم الخام. تتدفق الرموز إلى الأنماط الأساسية، ثم إلى المكونات والمتغيرات، وفي النهاية يتم إيقاف استخدامها أو إعادة توجيهها عبر الأسماء المستعارة مع تطور الأنظمة. تشمل المزايا إيقاعًا ثابتًا، واختلافات أصغر، وتحسين التكافؤ بين الأنظمة؛ أما العيوب فتشمل تكلفة الحوكمة الأولية والحاجة إلى توثيق واضح. تعامل مع الرموز كواجهات برمجة تطبيقات عامة: حدد النطاقات، وربطها بإرشادات الاستخدام، وقدم ملاحظات حول الترحيل.
الإجابة مع الأمثلة
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) كيف :focus-visible, :focus-withinو :target تختلف، وما هي المزايا التي يوفرها كل منها؟
تعمل هذه المحددات على معالجة خصائص التفاعل والتنقل المميزة. :focus-visible يعرض التركيز فقط عندما تقترح طريقة الإدخال التنقل باستخدام لوحة المفاتيح، مما يقلل من التشتتtracحلقات رنين لمستخدمي الماوس مع دعم إمكانية الوصول. :focus-within يتطابق مع الحاوية عندما يكون أي سليل لديه تركيز، مما يتيح التمييز المجمع للمركبات مثل حقول النموذج. :target يطابق العنصر المشار إليه بواسطة URL تتيح هذه الميزة إمكانية تخطي الروابط والتنقل داخل الصفحة دون الحاجة إلى نصوص برمجية. وعند دمجها بشكل مدروس، فإنها تُحسّن التوجيه، وتقلل الجهد الذهني، وتدعم سير العمل الفعال باستخدام لوحة المفاتيح.
الإجابة مع الأمثلة
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) ما هي فوائد وعيوب content-visibility واحتواء CSS على المستندات الكبيرة؟
content-visibility: auto يؤجل عمل عرض العناصر خارج الشاشة حتى تصبح قريبة من نافذة العرض، مما يقلل بشكل كبير من تكلفة العرض الأولية في البث الطويل. احتواء إضافي ( contain: layout paint style ) يحد من تأثير الشجرة الفرعية على بقية الصفحة، مما يقلل نطاق إعادة التدفق ويسرع التحديثات المتكررة. تتمثل المزايا في تحسين الاستجابة وتقليل استخدام الذاكرة؛ وتشمل العيوب تأثيرات الظهور المفاجئ المحتملة إذا كانت الأحجام الجوهرية غير معروفة والتعقيد عند Javaيجب أن يقيس النص الأحجام. خفف من ذلك بتوفير contain-intrinsic-size والقياس فقط عند الضرورة.
الإجابة مع الأمثلة
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) كيف تقوم ببناء شبكة مستجيبة مع الحد الأدنى من نقاط التوقف باستخدام minmax() و auto-fit/auto-fill?
يمكن تحقيق تصميم مرن من خلال تحديد مرونة tracks التي تتمدد حتى تصل إلى أقصى عرض ثم تلتف تلقائيًا. repeat(auto-fit, minmax(min, 1fr)) يُنشئ أكبر عدد ممكن من الأعمدة، مع طي الأعمدة الفارغة. tracيُساعد هذا الأسلوب على تجنب الفجوات غير المرغوب فيها، مما يقلل الاعتماد على نقاط التوقف الصريحة مع الحفاظ على كثافة متناسقة عبر أحجام الشاشات المختلفة. يُعد هذا الأسلوب مثاليًا للمعارض والبطاقات وقوائم المنتجات. وفّر حدًا أدنى مناسبًا (على سبيل المثال، 16rem ) والاعتماد على تباعد الفجوات للحفاظ على الإيقاع.
الإجابة مع الأمثلة
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) ما هي العوامل التي تحدد متى يجب الاختيار؟ gap مقابل الهوامش للتباعد بين العناصر؟
gap هو تباعد مدروس للتدفق يعمل بشكل أصلي مع Flexbox وGrid، ويطبق فصلًا متماثلًا دون حالات حافة تنهار فيها الهوامش. وهو مثالي لـ داخل المكون التباعد لأنه لا يؤثر على محاذاة أول/آخر فرع، ولا يتطلب تعديلات اتجاهية في تخطيطات من اليمين إلى اليسار. الهوامش مفضلة لـ خارجي التباعد الذي يُعد جزءًا من واجهة برمجة التطبيقات العامة للمكون، أو عندما يتعين تفاعل التباعد مع سياقات غير مرنة/شبكية. اختر بناءً على النطاق والملكية ودلالات التخطيط لتجنب التداخلات المفاجئة والحفاظ على الحد الأدنى من قواعد التجاوز.
الاختلافات (جدول المقارنة)
| معيار | gap |
هوامش |
|---|---|---|
| مجال | حاوية داخلية للتخطيط | الخارجية بين الأشقاء والجيران |
| اتجاهية | منطقي ومتماثل | قد يتطلب تعديلات RTL |
| سلوك الانهيار | غير قابل للتطبيق | عرضة لانهيار الهامش |
| أفضل استخدام | تباعد الطفل المرن/الشبكي | تباعد المكونات الخارجي وتخطيطهاtracts |
الإجابة مع الأمثلة
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) ما هي العيوب التي تأتي مع الاعتماد على !importantوما هي البدائل الأكثر أمانا؟
الإفراط في الاستخدام !important يتجاوز دورة الحياة الطبيعية للتسلسل، مما يحجب النية، ويمنع التجاوزات المشروعة، ويُجبر المساهمين المستقبليين على تصعيد التفاصيل أكثر. كما يُقوّض قابلية الاختبار لأن القواعد تصبح محصنة ضد الترتيب. @layer الاستراتيجيات. البديل المهني هو تصميم مسارات تجاوز يمكن التنبؤ بها: تقليل خصوصية المحدد، ووضع السياسات في طبقة أدوات مساعدة مخصصة، أو إعادة ترتيب المصادر باستخدام @layer بدلاً من تسليح التصريحات. الاحتياطي !important للحالات التي يقودها المستخدم بشكل مقصود مثل أدوات التباين العالي أو أدوات الرؤية القسرية التي تعمل كبوابة هروب موثقة.
الإجابة مع الأمثلة
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) ما هي أنواع المحددات التي يجب تجنبها لتحسين الأداء أو الصيانة، ولماذا؟
تُعدّ المحددات التي ترتبط ارتباطًا وثيقًا بعمق المستند أو سماته عبر DOM بأكمله محفوفة بالمخاطر. تزيد سلاسل السلاسل الطويلة من تكلفة المطابقة وتُنشئ تبعيات هشة على ترميز البيانات. محددات السمات الشاملة مثل [class*="btn"] or [data-*] بدون scoping يمكن مسح الأشجار الفرعية الكبيرة. محددات مؤهلة أكثر من اللازم مثل ul.nav > li > a.link يقلل ذلك من إمكانية إعادة الاستخدام ويعقد عمليات التجاوز. يفضل النهج القابل للصيانة استخدام خطافات من فئة واحدة، وسمات حالة ذات دلالات واضحة.tracts (على سبيل المثال، [data-state="open"] )، والعلاقات القصيرة ( > , + ) داخل حدود المكونات. هذا يُحسّن قابلية القراءة، ويُقلّل من تعارضات التسلسل، ويُسرّع عمليات إعادة الهيكلة.
الإجابة مع الأمثلة
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) متى يجب عليك الاختيار؟ @layer الأدوات المساعدة مقابل المتغيرات المكونة، وما هي الفوائد؟
المرافق العامة تعديلات لمرة واحدة مثل التباعد أو العرض أو المحاذاة التي يجب تجاوزها دون إثارة التحديد. تعبر متغيرات المكونات عن الحالات أو الأوضاع القابلة للتكرار التي تنتمي إلى واجهة برمجة تطبيقات المكونات. تتألق الأدوات المساعدة أثناء تكوين شيفرة التطبيق لأنها سهلة التنبؤ ولا تتطلب تعديل جدول أنماط المكون. تتفوق المتغيرات عند تكرار الحالة نفسها، ويجب توثيقها واختبارها كجزء من نظام التصميم. تضع البنية المتوازنة الأدوات المساعدة في مرتبة متأخرة في ترتيب الطبقات، وتحافظ على خصوصية متغيرات المكونات المنخفضة ضمن طبقة المكونات.
الإجابة مع الأمثلة
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) هل يمكن لـ Grid استبدال جميع استخدامات Flexbox، أم أن هناك أسبابًا مختلفة للاحتفاظ بكليهما؟
تُستخدم Grid و Flexbox لحل المشكلات المتعامدة. توفر Grid تحكمًا ثنائي الأبعاد مع إمكانية الوصول الصريح. tracتُسهّل تعريفات k إنشاء إطارات صفحات معقدة، ولوحات معلومات، ومعارض بطاقات. يتفوق Flexbox في التوزيع أحادي المحور، والتحجيم التلقائي على طول المحور الرئيسي، والمحاذاة داخل الصفوف أو الأعمدة، مما يجعله مثاليًا لأشرطة الأدوات والقوائم والشرائح. إن محاولة فرض استخدام Grid في كل مكان تُضحي بسلوك المحاذاة المريح، بينما يؤدي فرض استخدام Flexbox للتخطيط الكلي إلى ظهور أغلفة هشة. تجمع الأنظمة المتطورة بين كليهما عمدًا، أحيانًا داخل المكون نفسه، وتختار المحرك الذي تتناسب خصائصه مع المشكلة.
الاختلافات (جدول المقارنة)
| معيار | شبكة | حول flexbox |
|---|---|---|
| الابعاد | ثنائي الأبعاد tracks | التدفق أحادي البعد |
| قوة | المناطق الصريحة، الفجوات، الشبكة الفرعية | التوزيع، المحاذاة، إعادة الترتيب |
| أفضل استخدام | إطارات الصفحات ولوحات المعلومات | أشرطة الأدوات، والملاحة، وقوائم الشرائح |
الإجابة مع الأمثلة
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) ما هي فوائد وعيوب استخدام aspect-ratio مقابل اختراقات الحشو؟
aspect-ratio يُقدم هذا الأسلوب طريقةً تعريفيةً ذاتية التوثيق للحفاظ على أشكال البطاقات والوسائط والصور المصغرة دون الحاجة إلى عناصر غلاف أو تعديلات شبه عنصرية. يتكامل بسلاسة مع ملاءمة الكائنات ويعمل بكفاءة في تخطيطات الشبكة والمرونة. تتمثل عيوبه الرئيسية في وجود ثغرات في المتصفحات القديمة في البيئات القديمة، والحاجة إلى إعادة النظر في شيفرات CSS السابقة القائمة على التعديلات. لا تزال تعديلات Padding-top خيارًا بديلًا للمحركات القديمة جدًا، ولكنها تزيد من تعقيد DOM وتقلل من الوضوح. يُفضل aspect-ratio من أجل إمكانية الصيانة، وربطها بـ @supports فقط في حالة تغطية الأنظمة القديمةtracمطلوب فعلياً.
الإجابة مع الأمثلة
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) كيف يمكنك بناء رأس ثابت مرن يحترم المناطق الآمنة ومنافذ العرض المحمولة؟
رأس مرن يوازن position: sticky لمراسي مستوى القسم مع position: fixed فقط عندما يتطلب التصميم استمرارية عالمية. تمنع إضافات المناطق الآمنة التداخل مع واجهة مستخدم النظام على الأجهزة ذات الشقوق، ووحدات العرض الحديثة مثل dvh تجنب انهيار العناصر عند إظهارها أو إخفائها في متصفح كروم. تتضمن الاستراتيجية تحديد سياق تكديس واضح، وحجز مساحة لمنع تغييرات التخطيط، وتوفير تفضيلات حركة لتأثيرات الدخول. يُعد الاختبار عبر لوحات المفاتيح وفي الوضع الأفقي أمرًا بالغ الأهمية، لأن لوحات المفاتيح الافتراضية قد تُخفي عناصر ثابتة إذا لم يتم التعامل معها.
الإجابة مع الأمثلة
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
الاعتبارات (جدول سريع)
| عامل | توصية مجاناً |
|---|---|
| المناطق الآمنة | استعمل env(safe-area-inset-*) |
| العرض | تفضل dvh للمناطق ذات الارتفاع الكامل |
| مؤشر Z | إنشاء مقياس تراكب واحد وتوثيقه |
37) ما هو الفرق بين مقياس الكثافة ومقياس الحجم في المكونات، ومتى يجب استخدام كل منهما؟
تعديل مقياس الكثافة التباعد والفجوات وارتفاع الخط بينما تحافظping أحجام الخطوط ثابتة، مما ينتج عنه أشكال مضغوطة أو مريحة أو واسعة دون تغيير التسلسل الهرمي للطباعة. يؤدي تغيير حجم الخط إلى تغيير المقياس الطباعي نفسهمع تحويل العناوين ونصوص المحتوى وعناصر التحكم إلى خطوات أكبر أو أصغر. استخدم مقياس الكثافة لواجهات المستخدم المؤسسية حيث تختلف كثافة المعلومات باختلاف المهمة؛ استخدم مقياس الحجم للاستجابة لمسافة الجهاز، أو احتياجات إمكانية الوصول، أو متطلبات العلامة التجارية. تعامل مع كليهما كرموز ذات نطاقات موثقة لضمان الاتساق عبر مختلف الأسطح.
الإجابة مع الأمثلة
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) ما هي العيوب الناجمة عن عمليات إعادة الضبط العالمية الثقيلة، وما هي البدائل الأكثر أمانًا؟
قد تؤدي عمليات إعادة الضبط العدوانية إلى إزالة إعدادات افتراضية مفيدة، مثل مخططات التركيز، ودلالات القوائم، وإمكانات التحكم في النماذج، دون قصد. هذا يُضر بإمكانية الوصول ويُجبر على إعادة تنفيذ السلوكيات الأصلية بشكل متكرر. تشمل البدائل الأكثر أمانًا: التطبيعات الحديثة التي تخفف من التناقضات مع الحفاظ على الدلالات، و إعادة تعيين النطاق يتم التقديم عبر @layer للمكونات التي تتطلب لوحة فارغة. وثّق سياسة إعادة الضبط، واستعِد الميزات المهمة صراحةً مثل :focus-visibleوتجنب ضبط العناصر إلى الصفر والتي تنقل قيمها الافتراضية المعنى، مثل b, strongو em.
الإجابة مع الأمثلة
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) كيف يمكنك تصحيح أخطاء التسلسل المعقدة بشكل فعال باستخدام DevTools وميزات CSS الحديثة؟
يبدأ التصحيح الفعال بعزل العنصر في DevTools وفحصه محسوب لعرض قيم الخصائص النهائية ومصادرها. بعد ذلك، تحقق من أنماط ترتيب قواعد اللوحة وتفاصيلها لفهم سبب فوز القاعدة، مع الاهتمام بـ @layer الترتيب وما إذا كان هناك سياق تكديس أو احتواء جديد يتعارض معه. Togglقواعد للتحقق من صحة الفرضيات، واستخدام عرض الطبقات المتتالية (إن وجد) لتصور أولوية الطبقات. أضف مخططات تصحيح أخطاء مؤقتة، وفكّر في علامات الميزات عبر @supports لتقسيم المشاكل عن طريق تعطيل المسارات المتقدمة بشكل انتقائي.
الإجابة مع الأمثلة
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) أين تقع أنماط الطباعة واستعلامات الوسائط في خط أنابيب CSS الاحترافي، وما هي مزاياها وعيوبها؟
تظل أنماط الطباعة أساسية للمنتجات والفواتير والوثائق القانونية ذات الكثافة العالية. يتضمن خط الإنتاج الاحترافي الحد الأدنى @media print قسم يُزيل عناصر Chrome غير الضرورية، ويُحدد مقياسًا قابلًا للقراءة، ويضمن وضوح استخدام الألوان على أجهزة التدرج الرمادي. تشمل المزايا تحسين جودة الأرشفة وثقة المستخدم؛ بينما تشمل العيوب الصيانة الإضافية والحاجة إلى تدقيق المحتوى التفاعلي عادةً. حافظ على اعتماد قواعد الطباعة على الرموز، وتجنب تحديد المواقع المطلقة باستثناء الرؤوس والتذييلات، واختبر المتصفحات الشائعة ومولدات PDF لمنع أي تشوهات في ترقيم الصفحات.
الإجابة مع الأمثلة
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) ما هي الاستراتيجية التي تنتج نظام تراكب يمكن التنبؤ به، وكيف يجب عليك إدارة z-index مقياس؟
يتعامل نظام التراكب المتوقع مع الطبقات كعملية موثقةtracاستخدم قيمًا افتراضية بدلًا من الأرقام العشوائية. حدد مقياسًا صغيرًا مُسمى (على سبيل المثال، قاعدة، مرتفع، طبقة علوية، نافذة منبثقة، تنبيه) وقم بتعيين المكونات للمستويات من خلال متغيرات أو فئات مساعدة. احتفظ بكل طبقة علوية ضمن سياق تكديسها الخاص فقط عند الحاجة إلى العزل، وتجنب السياقات العرضية من transform or filter ما لم يكن ذلك متعمدًا. الميزة الرئيسية هي أن المهندسين يستطيعون التفكير في التضاربات دون تجربة وخطأ؛ أما العيب فهو تواضع التصنيف الأولي. اقرن المقياس برموز التصميم والبيانات غير المكتملة للقيم الخارجة عن النطاق لمنع الانحراف.
مقياس التراكب (جدول المقارنة)
| الطبقة | الهدف | نموذجي z-index |
ملاحظة |
|---|---|---|---|
| الفئة الأساسية | المحتوى العادي | 0 | تجنب إنشاء سياقات جديدة |
| إجمالي التبرعات | العناوين اللاصقة والأدراج | 10-100 | الحفاظ على الاتساق داخل القشرة |
| غطاء | الخلفيات، المباريات الودية | 900 | درع النقر على الصفحة الكاملة |
| عاصمة | الحوارات، أدوات الاختيار | 1000 | الموقع الحالي fixed; التركيز على الفخ |
| خبز شرائح | الإشعارات | 1100 | غير مانع؛ إزالة مؤقتة |
الإجابة مع الأمثلة
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) كيف ينبغي تصميم عناصر التحكم في النماذج الأصلية بشكل مسؤول، وما هي فوائد وعيوب التقنيات الشائعة؟
يُراعي تصميم النماذج المسؤول الدلالات مع تحسين الإمكانيات. ابدأ بالحفاظ على أداء لوحة المفاتيح وقارئ الشاشة، ثم أضف تحسينات على الطبقات: استخدم accent-color لكي تتوافق المدخلات القابلة للتحقق مع العلامة التجارية دون استبدال عناصر التحكم؛ يتم تطبيقها appearance بشكل مقتصد لتطبيع واجهات المستخدم غير المتسقة؛ واستهداف عناصر التحكم في التحميل عبر ::file-selector-button. الفائدة هي إمكانية الوصول إلى ضوابط متسقة مع الحد الأدنى من Javaالنص؛ تشمل عيوبه اختلافات بين المتصفحات، والرغبة في استبدال عناصر التحكم بالكامل. تُعدّ حالات تركيز المستند، وحالات الخطأ، وحالات التعطيل جزءًا من واجهة برمجة التطبيقات للمكونات لتجنب التجاوزات غير المقصودة.
الإجابة مع الأمثلة
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) ما هي الاستراتيجيات الموجودة لتقسيم CSS وتقسيم الكود، وما هي المزايا والعيوب؟
تعمل خاصية CSS الحرجة على تحسين خاصية Largest Contentful Paint من خلال تضمين القواعد اللازمة للمحتوى الموجود أعلى الصفحة، مع تأجيل الباقي. Codeيقسم التقسيم ورقة الأنماط حسب المسار أو الميزة أو المكون. يجمع النهج المدروس بين شريحة صغيرة حرجة وحزم خارجية متعددة الطبقات لسهولة الصيانة. من مزاياه سرعة التحميل الملحوظة وحجم البيانات الأولي الأصغر؛ أما عيوبه فتشمل تعقيد عملية البناء وخطر التكرار إذا لم تتم إزالة التكرارات في وقت الترجمة. يُفضل استخدام الطبقات المحددة ( @layer ) واتفاقيات التسمية للحفاظ على استقرار التجاوزات عبر الأجزاء.
استراتيجيات التحميل (جدول المقارنة)
| الإستراتيجيات | الفوائد | عيوب | استخدام نموذجي |
|---|---|---|---|
حرجة مضمنة <style> |
LCP أسرع؛ لا يوجد طلب | أصعب في الصيانة | صدفة فوق الطية |
| CSS خارجي غير متزامن | قابلة للتخزين المؤقت؛ معيارية | ومضة من خطر المحتوى غير المصمم | مسارات التطبيق |
| حزم الوسائط المقسمة | التحميل المشروط | التعقيد؛ تكلفة الاختبار | الطباعة، عالية الدقة، الوضع المظلم |
الإجابة مع الأمثلة
<link rel="preload" href="/ar/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/ar/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) ما هي خيارات الألوان الحديثة في CSS ( color-mix(الألوان النسبية، والمساحات الإدراكية)، ومتى يجب استخدامها؟
يدعم CSS الحديث تكوين الألوان في وقت التشغيل باستخدام color-mix() وتعديل المكونات عبر بنية الألوان النسبية، مما يتيح تصميم سمات ديناميكية دون الحاجة إلى تجميع مسبق. توفر مساحات الألوان الإدراكية، مثل OKLCH أو Lab، تعديلات أكثر اتساقًا في السطوع واللون مقارنةً بـ sRGB، مما يجعل المنحدرات والحالات (التحويم، التعطيل) أكثر اتساقًا. الميزة الأساسية هي التباين المتوقع وتغيرات اللون عبر السمات؛ وتشمل العيوب الدعم الجزئي في المحركات القديمة والحاجة إلى التحقق من توافق العلامة التجارية. استخدم المزج وقت التشغيل لحالات التحويم أو التأكيد، وخزّن الرموز الأساسية في مساحة إدراكية كلما أمكن، مع الرجوع إلى sRGB عند الضرورة.
الإجابة مع الأمثلة
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) ما هي التقنيات التي تخلق طباعة مرنة ومتجاوبة وإيقاعًا عموديًا؟
يُوازن أسلوب الطباعة المرن بين طول السطور السهل القراءة، والأحجام القابلة للتطوير، والتباعد المتناسق. ابدأ بحجم خط أساسي يراعي تفضيلات المستخدم، ثم استخدم clamp() لتحديد خطوات سلسة محدودة بحدود منطقية. إنشاء إيقاع عمودي مع lh أو ارتفاع خط الجذر ثابت، وتقييد الفقرات إلى ch- التدابير القائمة على الأدلة. text-wrap: balance يمكن تحسين العناوين من خلال توزيع الفواصل بشكل أكثر توازناً، بينما hyphens: auto تُقلل بيانات اللغة الوصفية من تفاوت الحواف. تتمثل فوائدها في سهولة القراءة وسهولة الوصول عبر مختلف منافذ العرض؛ أما عيوبها فتشمل الحاجة إلى اختبار الأربطة وموازنة سلوكها مع خطوط العلامة التجارية.
الإجابة مع الأمثلة
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) كيف يتم تثبيت التمرير؟ping وهل تتعاون الحشوات/الهوامش الخاصة بالتمرير لتحسين التنقل؟
التقاط سريع للتمريرping يُنشئ مواضع استراحة محددة للدوارات والتصاميم المقسمة، بينما scroll-padding و scroll-margin تأكد من محاذاة الأهداف بشكل صحيح أسفل العناوين الثابتة. استخدم scroll-snap-type على الحاوية و scroll-snap-align على العناصر لتوجيه السلوك. تشمل المزايا إحساسًا متسقًا وتنقلًا محسّنًا بلوحة المفاتيح مع tabindex والمراسي؛ من عيوبها إحباط محتمل إذا كانت نقاط الالتقاط حادة جدًا أو غير مُهيأة للحركة على أجهزة اللمس. وفّر حشوًا منطقيًا لأعلى نافذة العرض لتجنب إخفاء المحتوى تحت واجهة المستخدم الثابتة، وتحقق من صحة التفاعلات باستخدام لوحة المفاتيح والمؤشر.
الإجابة مع الأمثلة
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) ما هي أنماط CSS التي تجعل تلميحات الأدوات والنوافذ المنبثقة مرنة، ومتى تكون كذلك؟ Javaهل لا يزال النص مطلوبًا؟
يمكن لـ CSS التعامل مع أدوات التلميح البسيطة والاتجاهية باستخدام position، الإزاحات المنطقية، و ::after السهام، التي يتم تشغيلها بواسطة :hover و :focus-visible. استعمال inset ويتحول لوضع دقيق و @layer أدوات مساعدة لترتيب العناصر على المحور Z. للنوافذ المنبثقة المعقدة - اكتشاف التصادم، أو إعادة تموضع الأسهم، أو حصر التركيزping-Javaلا يزال النص البرمجي ضروريًا، لكن CSS لا يزال يُعرّف رموز العرض. ميزة أنماط CSS المُركزة على CSS هي انخفاض التكاليف التشغيلية وسهولة التدهور؛ أما عيبها فهو محدودية تكيفها مع حواف نافذة العرض دون منطق. تأكد دائمًا من إمكانية الوصول إلى تلميحات الأدوات عبر لوحة المفاتيح، وعدم حجب عناصر التحكم الأساسية.
الإجابة مع الأمثلة
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) كيف تقوم بتصميم جداول بيانات سريعة الاستجابة وسهلة القراءة دون اللجوء إلى عمليات إعادة كتابة معقدة؟
تحافظ الجداول المتجاوبة على الدلالات مع توفير عروض قابلة للاستخدام على الشاشات الضيقة. ابدأ بالتمرير الأفقي داخل غلاف مُقيّد لتجنب إعادة ترتيب العناوين والعلاقات. بالنسبة لبيانات المفتاح والقيمة، انتقل إلى تخطيط مُكدّس باستخدام display: grid مع مناطق مُسمّاة، أو إضافة عناصر تحكم في رؤية الأعمدة للكشف التدريجي. تشمل المزايا الحفاظ على إمكانية الوصول وسهولة الصيانة؛ أما العيوب فهي مساحة الشاشة المحدودة والحاجة إلى تنسيق دقيق للتدفق الزائد. وثّق الأعمدة الأساسية عند كل نقطة توقف، وفضّل... text-overflow مع تلميحات الأدوات للقيم الطويلة.
النهج (جدول المقارنة)
| تقنية | الفوائد | عيوب | أفضل من أجل |
|---|---|---|---|
| غلاف التمرير الأفقي | يحافظ على الدلالات | يتطلب التصميم الزائد | طاولات واسعة وكثيفة |
| تخطيط القيمة الرئيسية المكدسة | سهل القراءة | يفقد ميزات الجدول الأصلية | مواصفات الهاتف المحمول والفواتير |
| تبديل الأعمدة | كثافة مخصصة | يتطلب توصيل JS | لوحات معلومات الإدارة |
الإجابة مع الأمثلة
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) متى توفر أوضاع المزج والمرشحات والأقنعة قيمة عملية، وما هي التنازلات؟
أوضاع المزج ( mix-blend-mode, background-blend-mode ), المرشحات ( blur, grayscale, drop-shadow )، والأقنعة ( mask-image, mask-composite ) تُمكّن تأثيرات مثل التشكيل الزجاجي، والدوتون، والكشف غير المستطيلي دون الحاجة إلى تحرير نقطي. تتألق هذه التأثيرات في أسطح التسويق وملامح البيانات المرئية حيثما يكون التوجيه الفني مهمًا. تتمثل مزاياها في تقليل تكاثر الأصول والموضوعات الديناميكية؛ وتشمل عيوبها تكاليف الأداء على الأجهزة منخفضة الطاقة، واحتمالية حدوث مشاكل في إمكانية الوصول في حال انخفاض التباين. احتفظ بالتأثيرات الثقيلة للأسطح غير الحرجة، واختبر تأثير وحدة معالجة الرسومات، ووفر بدائل مخفضة التفضيلات.
الإجابة مع الأمثلة
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) ما هو الدور الذي يقوم به color-scheme هل تلعب واجهة المستخدم ونظام التصميم دورًا في التصميم المتماسك عبر المتصفحات؟
استخدم color-scheme تُعلن الخاصية عن لوحات الألوان الفاتحة والداكنة المقصودة، بحيث تُعرض مكونات وكيل المستخدم (عناصر تحكم النماذج، وأشرطة التمرير في بعض محركات البحث) بخلفيات وألوان نص متطابقة. يُقلل هذا من الحاجة إلى واجهات تحكم مخصصة، ويمنع حدوث عدم تطابق مُزعج عند تفعيل الوضع الداكن. تكمن الفائدة في التماسك مع الحد الأدنى من التعليمات البرمجية؛ أما العيب فهو تطور التكافؤ بين محركات البحث، وقد تتطلب العلامات التجارية المخصصة تجاوزات. اجمع color-scheme مع خصائص مخصصة للرموز المميزة، والسماح بتجاوزات صريحة من المستخدم لتجنب الوقوع في الفخ.ping المستخدمون في تفضيلات النظام التي لم يختاروها.
الإجابة مع الأمثلة
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 أفضل أسئلة مقابلة CSS مع سيناريوهات واقعية واستجابات استراتيجية
1) ما الفرق بين inline, inline-blockو block العناصر في CSS؟
المتوقع من المرشح: يريد القائم بالمقابلة اختبار مدى فهمك لخصائص عرض العناصر وكيفية تأثيرها على نماذج التخطيط والصندوق.
مثال للإجابة:
في وظيفتي السابقة، كنت أتعامل غالبًا مع تناقضات في التخطيط ناجمة عن سوء فهم أنواع العرض. block يشغل العنصر العرض الكامل المتاح ويبدأ في سطر جديد. inline يشغل العنصر عرضًا مساويًا لعرض محتواه فقط ولا يبدأ في سطر جديد. inline-block يسمح العنصر بضبط العرض والارتفاع كعنصر كتلة، ولكنه يتدفق بسلاسة كالنص. ساعدني فهم هذه الفروقات على تحسين التصاميم المتجاوبة والحفاظ على محاذاة متسقة.
2) كيف تتعامل مع تصحيح أخطاء CSS في التخطيطات المعقدة؟
المتوقع من المرشح: يريد القائم بالمقابلة أن يعرف نهجك المنهجي في تحديد أخطاء التخطيط وإصلاحها.
مثال للإجابة:
في وظيفتي السابقة، اتبعتُ نهجًا منظمًا لتصحيح أخطاء CSS. استخدمتُ أدوات تطوير المتصفحات لفحص الأنماط المحسوبة ونماذج الصناديق، وعزلتُ المحددات المتضاربة، وتعطيلتُ القواعد خطوةً بخطوة. كما استخدمتُ بادئات خاصة بالمتصفح، واختبرتُها على أجهزة متعددة. وقد قلّلت هذه العملية المنهجية لتصحيح الأخطاء من مشاكل تخطيط الواجهة الأمامية بشكل ملحوظ.
3) هل يمكنك شرح كيفية عمل CSS Cascade وspecificity؟
المتوقع من المرشح: يريد القائم بالمقابلة أن يقيس مدى معرفتك بكيفية قيام المتصفحات بتحديد قواعد CSS التي لها الأولوية.
مثال للإجابة:
تسلسل CSS هو العملية التي تُحدد القواعد التي تُطبق عند استهداف مُحددات متعددة للعنصر نفسه. تُحدد الخصوصية الأولوية، حيث تكون الأنماط المضمنة هي الأعلى، تليها المُعرفات، ثم الفئات، ثم الفئات الزائفة، وأخيرًا العناصر. كما أن ترتيب المصدر مهم إذا كانت الخصوصية متساوية. معرفة ذلك تُساعد على منع الكتابة فوق الأنماط عن غير قصد، وتُعزز وضوح الكود.
4) وصف كيفية تعاملك مع التصميم المستجيب دون الاعتماد بشكل كبير على الأطر.
المتوقع من المرشح: يقوم المحاور بالتحقق من فهمك لمرونة CSS واستخدام استعلامات الوسائط.
مثال للإجابة:
"في وظيفتي الأخيرة، قمت بتصميم تخطيطات مستجيبة باستخدام شبكات مرنة ووحدات نسبية مثل em و remواستخدمتُ استعلامات الوسائط لتكييف التصميمات مع مختلف أحجام الشاشات. كما وظّفتُ CSS Grid وFlexbox لتصميمات مرنة. وقد تجنّب هذا النهج الاعتماد غير الضروري على أطر العمل مع الحفاظ علىping التصميم قابل للتطوير والصيانة.
5) كيف يمكنك تحسين CSS للأداء والقدرة على الصيانة؟
المتوقع من المرشح: يقوم المحاور بتقييم مدى وعيك بأفضل الممارسات المتعلقة بالتوسع والأداء.
مثال للإجابة:
في وظيفتي السابقة، قمتُ بتحسين CSS بإزالة الأنماط غير المستخدمة، ودمج الملفات لتقليل طلبات HTTP، وتطبيق متغيرات CSS لتسهيل الصيانة. كما اعتمدتُ قواعد تسمية BEM للحفاظ على تنظيم الكود وسهولة توسيعه. بالإضافة إلى ذلك، استخدمتُ أدوات حديثة مثل PostCSS وminification لتحسين الأداء.
6) أخبرني عن وقت اضطررت فيه إلى التعاون مع المطورين أو المصممين لحل نزاع التصميم.
المتوقع من المرشح: يرغب القائم بالمقابلة في رؤية مهارات العمل الجماعي والتواصل في البيئات الوظيفية المتعددة.
مثال للإجابة:
في مشروع سابق، نشأ تعارض بين توقعات التصميم وتطبيق المطور لنموذج ديناميكي. حدّدتُ موعدًا لمزامنة سريعة مع كلا الطرفين، وعرضتُ المشكلة المرئية باستخدام لقطات شاشة، واقترحتُ تعديلات على متغيرات CSS للحفاظ على اتساق التصميم. وقد ضمن هذا التعاون الاستباقي نتيجةً متناسقة بصريًا دون التأثير على الأداء.
7) ما هي التحديات التي واجهتك عند تنفيذ الرسوم المتحركة أو الانتقالات CSS، وكيف تغلبت عليها؟
المتوقع من المرشح: يريد القائم بالمقابلة تقييم مدى فهمك لتحسين الأداء وتقديم المتصفح.
مثال للإجابة:
في أحد المشاريع، تسببت الرسوم المتحركة في حدوث خلل بسبب مشاكل في إعادة التدفق. لاحظتُ أن بعض خصائص CSS مثل top و left كانت تُفعّل إعادة حسابات التخطيط. تحولت إلى استخدام transform و opacity، وهي مُسرّعة بوحدة معالجة الرسومات، مما يُؤدي إلى انتقالات أكثر سلاسة. كما حسّنتُ مدة الرسوم المتحركة لإضفاء طابع طبيعي.
8) كيف يمكنك هيكلة CSS لتطبيق واسع النطاق؟
المتوقع من المرشح: يريد القائم بالمقابلة أن يفهم نهجك في التنظيم وقابلية التوسع وإمكانية الصيانة.
مثال للإجابة:
سأستخدم بنيةً معياريةً مثل BEM أو SMACSS أو وحدات CSS لتنظيم الأنماط منطقيًا. سيكون لكل مكون أنماطه الخاصة لتجنب التعارضات. سأطبق أيضًا دليل أنماط واتفاقيات تسمية للحفاظ على الاتساق بين الفرق ومنع تضخم CSS مع نمو المشروع.
9) افترض أن أحد العملاء يشكو من تعطل تخطيط الصفحة في Internet Explorer 11. ما هي الخطوات التي ستتخذها لحل هذه المشكلة؟
المتوقع من المرشح: يريد القائم بالمقابلة اختبار قدرتك على التكيف مع مشكلات المتصفح القديم.
مثال للإجابة:
سأُعيد إنتاج المشكلة أولًا باستخدام إصدار المتصفح نفسه. ثم سأحدد ميزات CSS غير المدعومة من خلال أدوات تطوير المتصفح، وأتحقق من التوافق باستخدام موارد مثل MDN أو Can I Use. بعد ذلك، سأُطبّق الحلول البديلة أو الإضافات حسب الحاجة. كما سأوثّق الحل للصيانة المستقبلية.
10) كيف يمكنك ضمان التوافق بين المتصفحات في مشاريع CSS الخاصة بك؟
المتوقع من المرشح: يريد القائم بالمقابلة التأكد من مدى وعيك بمعايير الاختبار والتوافق.
مثال للإجابة:
أضمن التوافق بين المتصفحات من خلال الاختبار المبكر والمتكرر على المتصفحات الرئيسية باستخدام أدوات مثل BrowserStack. ألتزم بمعايير CSS وأتجنب الخصائص غير القياسية. كما أستخدم PostCSS مع Autoprefixer للتعامل تلقائيًا مع بادئات البائعين. يمنع التحقق والاختبار المستمران أثناء التطوير حدوث مشاكل كبيرة بعد الإطلاق.
