DanLevy.net

اختبار: هل تعرف CSS الحديثة؟ (لعام 2025)

هل أنت متمكن كفاية من الواجهة الأمامية؟

اختبار: هل تعرف CSS؟

1. 

إحماء

ما هي الطريقة الصحيحة لاستخدام متغير CSS يُسمى --main-color لتعيين لون خلفية عنصر؟

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

تُستخدم متغيرات CSS مع دالة var، لذا الإجابة الصحيحة هي background-color: var(--main-color);. هذا التركيب يسترجع قيمة --main-color ويطبقها.

الخيارات الأخرى قد تكون مألوفة من لغات أخرى أو صيغ المعالجات المسبقة، مثل Sass أو Less.

2. 

دوال CSS

إذا كان عرض العنصر الأب/الحاوية هو 400px، فما هو العرض المحسوب للعنصر التالي؟

div {
  width: min(250px, 50%);
}

ستختار الدالة min() أصغر قيمة بين 250px و 50% من عرض العنصر الأب.

لفهم القيمة المحسوبة، نحتاج إلى تحويل الوحدات النسبية إلى بكسل:

  • 50% من 400px يساوي 200px
  • 250px هي بالفعل بالبكسل
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

الدالة min() مفيدة بشكل خاص للتصميم المتجاوب، حيث يمكنك ضمان ألا يتجاوز المكون (أو حجم الخط) حدًا معينًا.

3. 

دوال CSS

بافتراض وجود حاوية بعرض 200px، ما هو العرض المحسوب للعنصر <div>؟

div {
  width: max(50px, 10%, 6rem);
}

تقبل الدالة max() مدخلين أو أكثر، وتستخدم تلقائيًا أكبر قيمة. بافتراض أن حجم الخط الجذر هو الإعداد الافتراضي للمتصفح 16px، فإن العرض يصبح 96px.

لفهم القيمة المحسوبة، نحتاج إلى تحويل الوحدات النسبية إلى بكسل:

  • 50px هو بالفعل بالبكسل
  • 10% من 200px يساوي 20px
  • 6rem يساوي 6 * 16px (حجم الخط الافتراضي) وهو 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

دوال شبكة CSS

ما هو تأثير استخدام minmax(100px, 200px) لمسار شبكة CSS؟

grid-template-columns: minmax(100px, 200px);

استخدام minmax(100px, 200px) يسمح لمسار الشبكة بتغيير حجمه بين 100px و 200px، متكيفًا مع المساحة المتاحة ولكن لا ينخفض أبدًا عن 100px ولا يتجاوز 200px.

يمكنك إنشاء تخطيطات ذاتية التعديل حيث يلعب كل من الحاوية والعناصر الفرعية دورًا في حساب التخطيطات. هذا قوي عند دمجه مع repeat() و auto-fill أو auto-fit، والتي ستنشئ أكبر عدد ممكن من المسارات ضمن القيود.

5. 

متغيرات CSS

ما لون الخلفية في CSS التالي؟

div {
  background: var(--primary, olivedrab);
}

تتيح لك دالة var() تعيين قيمة احتياطية إذا لم يتم تعريف المتغير. في هذه الحالة، ستكون الخلفية olivedrab (#6b8e23) لأن --primary غير معرف.

هذه طريقة رائعة لضمان عدم تعطل أنماطك إذا كان المتغير مفقودًا أو غير مدعوم.

6. 

دوال CSS

ماذا تفعل الدالة clamp()؟

.card {
  width: clamp(200px, 50vw, 500px);
}

تسمح الدالة clamp() للعرض بالتدرج بناءً على 50vw، لكنها تبقيه ضمن نطاق بين 200px و 500px.

هذا يعني أن العرض سيكون 200px عندما يكون 50vw أقل من 200px، و 500px عندما يكون 50vw أكبر من 500px، وخطيًا بين هذين الحدين.

إنها تتيح لك أن تكون متجاوبًا بشكل تلقائي! الشيء الذي يجب معرفته عن clamp هو أنها تجمع بين الوحدات الثابتة و الوحدات المتجاوبة أو المحسوبة.

عادةً لا ترغب في استخدام وحدات viewport لأحجام الخطوط، لكن باستخدام clamp() يمكننا ضمان ألا يصبح حجم الخط صغيرًا جدًا أو كبيرًا جدًا.

7. 

التداخل في CSS

هل يدعم CSS التداخل بشكل أصلي؟

نعم! أخيرًا لدينا تداخل أصلي في CSS! قدمت CSS بناء جملة التداخل الأصلي في السنوات الأخيرة (2023)، مما يسمح بالتصميم الهرمي مباشرة في CSS.

8. 

تداخل CSS

هل هذا استخدام صحيح للتداخل الأصلي في CSS؟

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

فئة .title متداخلة داخل فئة .container، ويتم تطبيق الخصائص كما هو متوقع.

هذه طريقة رائعة للحفاظ على الأنماط المرتبطة معًا وتجنب المحددات الطويلة.

9. 

تداخل CSS

ما لون الخلفية الذي سيتم تطبيقه على عناصر div المباشرة التابعة لـ .container؟

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

يُطبق المحدد > في القاعدة المتداخلة background-color: white فقط على عناصر div المباشرة داخل .container.

القاعدة الأخيرة، background-color: blue !important;، هي مجرد إلهاء. إنها خارج القاعدة المتداخلة وسيتم تطبيقها على جميع عناصر .container.

10. 

متغيرات CSS

كيف يمكنك تغيير قيمة متغير CSS في وقت التشغيل؟

يمكن تعيين متغيرات CSS باستخدام الفئات وJavaScript. بل يمكن تعريفها ‘بعد’ استخدامها تقنيًا.

document.documentElement.style.setProperty('--main-color', 'blue');

سيؤدي هذا إلى تغيير قيمة --main-color إلى blue للمستند بأكمله.

متغيرات CSS قابلة للتغيير، ويمكن تغييرها في وقت التشغيل باستخدام JavaScript.

كما يمكن تغييرها بإضافة أو إزالة الفئات، وهو نمط شائع لتخصيص السمات.

11. 

متغيرات CSS

ما هو العرض المحسوب للعنصر؟

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

تقوم دالة calc() بدمج قيمة --base-width (100px) مع 10px إضافية، مما ينتج عنه عرض 110px.

Loading comments...