مساحات ألوان ودوال CSS جديدة في جميع المحركات الرئيسية

تتيح جميع المحرّكات الرئيسية الآن مساحات ودوال CSS الجديدة. اكتشف كيف يمكنها إضفاء الحيوية على تصميماتك.

Rachel Andrew

تتيح CSS الآن مساحات اللون التي تتيح لنا الوصول إلى الألوان خارج سلسلة sRGB. هذا يعني أنّه بإمكانك إتاحة الشاشات العالية الدقة، باستخدام ألوان من مجموعات الصور العالية الدقة. يأتي هذا الدعم مع دوال جديدة للاستفادة بشكل أفضل من الألوان على الويب.

الوصول إلى مساحات الألوان من CSS

لدينا بالفعل عدد من الدوال التي تتيح لنا الوصول إلى الألوان ضمن سلسلة sRGB - rgb() وhsl() وhwb(). أصبحت الدالة color() متاحة الآن في المتصفحات، وهي طريقة عادية للوصول إلى الألوان داخل أي مساحة ألوان تستند إلى نموذج أحمر أخضر أزرق. ويشمل ذلك sRGB وDisplay P3 وRec2020. يمكنك الاطّلاع على بعض الأمثلة في CSS التالية:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 113.
  • Safari: 15-

المصدر

تتوفّر أيضًا عدة وظائف تتيح الوصول إلى مساحات ألوان غير sRGB باستخدام lch() وlab() وoklch() وoklab().

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 113.
  • Safari: 15-

المصدر

يمكنك الاطّلاع على معلومات عن كل هذه المساحات اللونية المختلفة في دليل الألوان العالية الدقة لخدمة مقارنة الأسعار (CSS).

الدالة color-mix()

بالإضافة إلى مساحات الألوان الجديدة هذه، تتيح جميع المحرّكات الآن استخدام الدالة color-mix(). تتيح هذه الدالة مزج لون مع آخر، في أي من مساحات الألوان. في CSS التالي، يتم مزج 25٪ من اللون الأزرق إلى الأبيض، في مساحة اللون srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 113.
  • Safari: الإصدار 16.2.

المصدر

مزيد من المعلومات حول "color-mix()"

تعد هذه الوظائف الجديدة ومساحات اللون الجديدة تقدم ألوانًا عالية الدقة نابضة بالحياة على الويب. للحصول على أفكار جديدة، يمكنك البدء بإنشاء بعض التدرجات الجميلة باستخدام أداة إنشاء التدرجات العالية الدقة على gradient.style.