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

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

Rachel Andrew

خبر سار: تتوفّر ميزة الويب هذه الآن في جميع محرّكات المتصفّحات الرئيسية الثلاثة.

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

الوصول إلى مساحات الألوان من 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);
}

توافق المتصفّح

• 111
• 111
• 113
• 15

المصدر

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

توافق المتصفّح

• 111
• 111
• 113
• 15

المصدر

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

دالة color-mix()

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

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

توافق المتصفّح

• 111
• 111
• 113
• 16.2

المصدر

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

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