interview questions

السلام عليكم ورحمة الله تعالى وبركاته في المقال الجديد سنتعرف على بعض الأسئلة الشائعة في مقابلات العمل والتي يجب عليك معرفتها المطلوب منك قراءة السؤال والإحابة بمفردك لكي تختبر نفسك أسفل كل سؤال ستجد الجواب الخاص فل نبدا على بركة الله بأول سؤال وهو:

1) ما هي margin collapse وكيف يمكن التعامل معها؟

المارجن كولابس هي حالة يحدث فيها اختفاء الفراغات الزائدة بين العناصر المتجاورة في الصفحة، ويحدث ذلك عندما يكون الهامش العلوي أو السفلي لعنصر ما يساوي الهامش العلوي أو السفلي لعنصر آخر. بمعنى آخر، إذا كان لدينا عنصرين متجاورين، وكان الهامش العلوي للعنصر الأول يساوي الهامش العلوي للعنصر الثاني، فإن الفراغ الذي يظهر بينهما سيختفي.

مثال: إذا كان لدينا عنصر div يحتوي على عنصر p ، وكلا العنصرين لديهما margin-top و margin-bottom ، فإن المارجن العلوي للعنصر p سيتم دمجه مع المارجن العلوي للعنصر div. وبالتالي، قد يتسبب ذلك في زيادة المساحة الفارغة بين العناصر.

بشكل أبسط، المارجن كولابس يعني اختفاء الفراغات الزائدة بين العناصر المتجاورة في الصفحة، وهذا يحدث عندما يكون للعناصر نفس الهامش العلوي أو السفلي.

2) ما هي الفئات والعناصر الأساسية في CSS؟

يمكن تقسيم الفئات والعناصر في CSS إلى فئات أساسية وفئات فرعية. فئات CSS الأساسية تشمل:

المحددات العنصر Element Selectors
المحددات الفئة Class Selectors
المحددات الهوية ID Selector
المحددات الجماعية Grouping Selectors

فئات CSS الفرعية تشمل:

المحددات الذكية (Pseudo-Selectors)
المحددات المتغيرة (Attribute Selectors)
الخصائص الرسومية (Visual Properties)
الخصائص العامة (General Properties)

3) ما هي الخاصية display:flex وكيف يمكن استخدامها في CSS؟

خاصية display:flex هي خاصية CSS تستخدم لتحويل عنصر ما إلى عنصر عرض مرن (flex container)، وتمكن المطورين من تنظيم العناصر داخل العنصر الأساسي بشكل أكثر مرونة وسهولة. يمكن استخدام display:flex لتحديد ترتيب العناصر، وتحديد مساحات التباعد بينها، وتحديد مواقع العناصر داخل العنصر الأساسي، والمزيد.

4) ما هي الخاصية z-index وكيف يمكن استخدامها في CSS؟

خاصية z-index هي خاصية CSS تستخدم لتحديد ترتيب الطبقات layers في صفحة الويب، حيث يتم استخدام القيم الإيجابية والسلبية لتحديد أي طبقة تظهر فوق الأخرى. يمكن استخدام z-index لتحديد ترتيب الطبقات للعناصر المتداخلة، مثل الصور والنصوص والعناصر الأخرى.

ما هي الفئات النمطية Pseudo-classes في CSS؟

الفئات النمطية هي فئات CSS تسمح للمطورين بتحديد حالة العنصر المحددة، وتشمل بعض الفئات النمطية الشائعة:
:hover: يتم استخدامها لتحديد حالة العنصر عندما يتم تمرير المؤشر فوقه.
:active: يتم استخدامها لتحديد حالة العنصر عندما يتم الضغط عليه.
:visited: يتم استخدامها لتحديد حالة الروابط التي تم زيارتها.
:focus: يتم استخدامها لتحديد حالة العنصر عندما يتم التركيز عليه.

5) ما هي الخاصية transform وكيف يمكن استخدامها في CSS؟

خاصية transform هي خاصية CSS تسمح للمطورين بتحويل العناصر، وتشمل بعض الخصائص الشائعة:
translate(): يتم استخدامها لتحريك العنصر بشكل محدد.
scale() يتم استخدامها لتغيير حجم العنصر.
rotate() يتم استخدامها لتدوير العنصر حول محور محدد.
يمكن استخدام خاصية transform لإضافة تأثيرات بصرية إلى العناصر، مثل التحريك والتدوير والتكبير والتصغير.

6) ما هي الـ Media Queries وكيف يمكن استخدامها في CSS؟

Media Queries هي تقنية في CSS تستخدم لتحديد أنماط العرض المختلفة للأجهزة المختلفة، وتسمح للمطورين بتحديد أنماط CSS مختلفة للشاشات المختلفة. يمكن استخدام Media Queries لتحديد أنماط CSS تلائم الشاشات المختلفة، مثل الشاشات الصغيرة للهواتف الذكية والشاشات الكبيرة للحواسيب. يمكن تعريف Media Queries باستخدام الكلمة الرئيسية @media، وتحديد الشروط اللازمة لتنفيذ الأنماط المحددة.

7) ما هو الاختلاف بين الخاصيتين position: absolute و position: relative في CSS؟

الخاصية position: absolute تستخدم لتحديد موقع العنصر بالنسبة إلى العنصر الأقرب الذي لديه position محدد، بينما الخاصية position: relative تستخدم لتحديد موقع العنصر بالنسبة إلى موقعه الأصلي. عند استخدام position: absolute، يتم إزالة العنصر من التدفق العام للصفحة، بينما يتم الاحتفاظ بالعنصر في موضعه الأصلي عند استخدام position: relative.

8) ما هو استخدام الخاصية transition في CSS وكيف يمكن استخدامها؟

الخاصية transition في CSS تستخدم لإضافة تأثيرات انتقالية إلى العناصر عند تغيير حالتها. يمكن استخدام هذه الخاصية لإضافة تأثيرات انتقالية إلى الخلفية أو الصور أو النص أو أي عنصر آخر. يمكن تحديد مدة التحول ونوع النمط المستخدم لتحقيق التحول.

9) ما هي أساليب تحسين أداء CSS في صفحات الويب؟

هناك عدة طرق لتحسين أداء CSS في صفحات الويب، بما في ذلك:
- تقليل عدد الاستايلات المستخدمة وتجميعها في استايل واحد.
- تجنب استخدام الصور الكبيرة والتحويلات الثقيلة في CSS. استخدام الخاصية minified لتقليل حجم ملفات CSS.

تجنب استخدام الخاصية !important إلا عند الضرورة القصوى.

تجنب تحديد الخصائص بقيم ثابتة إلا عند الضرورة القصوى.

استخدام الخصائص المدعومة بشكل جيد في المتصفحات وتجنب الخصائص التي لا تدعمها المتصفحات بشكل جيد.

استخدام خدمات الاستضافة المخصصة للمحتوى الديناميكي مثل CDN لتحسين سرعة تحميل CSS.

تجنب استخدام الخاصية inline-style إلا عند الضرورة القصوى.

تجنب استخدام CSS frameworks ذات الحجم الكبير إذا لم تكن هناك حاجة لها.

استخدام CSS preprocessors لتقليل حجم ملفات CSS وتسهيل الصيانة.

أتمنى أن تعجبكم سأعمل تحديث على المقالة إن شاء الله و وفقكم الله.