اجعل العنصر يستجيب لحجم حاويته وليس الشاشة:

1. عرف الحاوية (.card-container) كحاوية استعلام (container-type: inline-size).
2. استخدم `@container` لتغيير لون خلفية الابن (.card) إلى الأحمر إذا كان عرض الحاوية أقل من 300px.

.card-container {
    container-type: inline-size;
}

@container (max-width: 300px) {
    .card {
        background-color: red;
    }
}

نظم أولويات CSS باستخدام الطبقات:

1. عرف طبقات بالترتيب: base, components, utilities.
2. ضع قاعدة في طبقة `base` تجعل لون النص أزرق.
3. ضع قاعدة في طبقة `utilities` تجعل لون النص أحمر (يجب أن تفوز لأنها معرفة لاحقاً).

@layer base, components, utilities;

@layer base {
    p { color: blue; }
}

@layer utilities {
    p { color: red; } /* هذا اللون سيفوز */
}

استخدم الخصائص المنطقية لدعم تعدد اللغات (LTR/RTL):

1. بدلاً من `margin-left`، استخدم الخاصية المنطقية لبداية السطر (inline-start).
2. بدلاً من `padding-top`، استخدم الخاصية المنطقية لبداية الكتلة (block-start).

.box {
    margin-inline-start: 20px; /* يسار في LTR، يمين في RTL */
    padding-block-start: 10px; /* أعلى */
}

استخدم ميزة Nesting الحديثة في CSS (بدون Preprocessor):

1. داخل قاعدة `.card`، قم بتنسيق العنوان `.title` الموجود بداخلها.
2. داخل نفس القاعدة، استخدم `&` لتنسيق حالة `hover` للبطاقة نفسها.

.card {
    background: white;
    
    .title {
        font-weight: bold;
    }
    
    &:hover {
        background: gray;
    }
}

اجعل حجم الخط متجاوباً بذكاء:

1. استخدم دالة `clamp()` لتعيين حجم الخط.
2. الحد الأدنى: 1rem.
3. القيمة المفضلة: 2.5vw (تتغير مع عرض الشاشة).
4. الحد الأقصى: 2rem.

h1 {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

اجعل الابن يرث شبكة الأب:

1. لديك أب `.grid` معرف كشبكة.
2. لديك ابن `.item` يمتد على 3 أعمدة.
3. اجعل الابن نفسه شبكة، ولكن اجعل أعمدته تتبع أعمدة الأب باستخدام `subgrid`.

.item {
    display: grid;
    grid-template-columns: subgrid;
}

تحكم في أبعاد الصندوق:

1. اجعل العنصر يحافظ دائماً على نسبة عرض إلى ارتفاع 16:9.
2. بغض النظر عن عرضه المتغير.

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

خصص مظهر شريط التمرير (للمتصفحات الحديثة):

1. اجعل عرض شريط التمرير رفيعاً (thin).
2. اجعل لون الشريط (thumb) أزرق ولون المسار (track) شفافاً.

/* Standard Property */
html {
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}

قم بإجراء عمليات حسابية للقيم:

1. اجعل عرض العنصر يساوي 100% ناقص 50px.
2. هذا مفيد جداً عند دمج وحدات مختلفة.

.sidebar {
    width: calc(100% - 50px);
}

حدد الأب بناءً على حالة ابنه:

1. حدد العنصر (.card) فقط إذا كان يحتوي على صورة (img) بداخله.
2. اجعل حدود هذه البطاقة حمراء.

.card:has(img) {
    border: 2px solid red;
}