ميزات CSS الجديدة التي يجب أن تعرفها في 2024

التعشيش

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

.parent {
  color: black;
  &:hover {
    color: blue;
  }
}

رمز & يسمى محدد التعشيش؛ في هذه الحالة، يعمل كعنصر نائب لـ .parent.

الفئة :has()

محدد :has() يتيح لك تحديد عنصر إذا كان أحد المحددات النسبية في القائمة قد تم مطابقته، مما يجعل من الأسهل تحديد العناصر وتنسيقها ديناميكيًا بناءً على عناصر أخرى.

h2:has(+ p) {
  /* هذا سيحدد كل h2 الذي يحتوي على فقرة شقيقة */
}

قاعدة @starting-style

قاعدة @starting-style تتيح لك تحديد الأنماط الأولية للرسوم المتحركة والانتقالات على العناصر، مما يجعل من الممكن تحريكها من الظهور الأول.

.todo {
  @starting-style {
    opacity: 0;
    scale: 0;
  }
}

قاعدة @scope

مع قاعدة @scope، لن تحتاج للقلق بشأن تعارض فئات CSS الخاصة بك. يمكنك تحديد عناصر معينة داخل شجرة فرعية دون الحاجة إلى كتابة محددات معقدة.

هناك طريقتان لكتابة الأنماط المحددة، سواء باستخدام @scope داخل CSS مع جذر النطاق والمحددات الاختيارية للنطاق:

@scope (.card) to (aside) {
  rulesets
}

أو كأنماط مدمجة داخل عنصر HTML:

<article>
  <style>
    @scope {
      rulesets
    }
  </style>
</article>

دالة color-mix()

يمكنك مزج لونين في أي فضاء لوني باستخدام دالة color-mix. باستخدام هذه الدالة، يمكنك بسهولة إنشاء لوحات ألوان من اللون الأساسي لديك.

color-mix(in oklab, var(--primary), black);
color-mix(in srgb, #f00 20%, white);

الدوال المثلثية

تم تقديم الدوال المثلثية sin()، cos()، tan()، asin()، acos()، atan()، وatan2() إلى مجموعة دوال الرياضيات في CSS. مع هذه الدوال، يمكنك إنشاء رسوم متحركة واجهات مستخدم جميلة بسهولة ودقة دون الحاجة إلى JavaScript.

div {
  translate: calc(cos(var(--angle)) * var(--radius))
             calc(sin(var(--angle)) * var(--radius))
}

استعلامات الحاوية (Container Queries)

استخدام نافذة العرض (viewport) لجعل العناصر متجاوبة له بعض القيود. الآن، باستخدام استعلامات الحاوية، يمكنك جعل تتغير العناصر ديناميكيًا بناءً على حجم العنصر الأب وليس كل الشاشة.

@container (min-width: 700px) {
  .card {
    flex-direction: column;
  }
}

Scroll Driven Animations

الآن، يمكنك إنشاء الرسوم المتحركة المعتمدة على التمرير دون الحاجة إلى JavaScript باستخدام خاصية animation-timeline مع دالتي scroll() و view() لتعريف الجداول الزمنية المخصصة لمفاتيح الإطارات.

• scroll() يعتمد على موقع نطاق التمرير في عنصر قابل للتمرير.
• view() يعتمد على ما إن كان العنصر مرئيا.

div {
  animation-timeline: view();
  animation: appear alternate;
}
@keyframes appear {
  from {scale: 0}
  to {scale: 1}
}

يمكنك أيضًا التحكم في نطاق الجدول الزمني باستخدام خاصية animation-range.

الخلاصة

هذه بعض ما أتت به CSS لتبسيط عملية التنسيق، و يجب عليك البدء في استخدام بعضها إن لم تكن قد بدأت بالفعل.