لغة CSS هي الأفضل لخفض الشفافية

تحسين واجهة المستخدم وتعديلها للمستخدمين الذين يفضّلون واجهة مستخدم غير شفافة

Adam Argyle

اعتبارًا من الإصدار 118 من Chrome، أصبحت ميزة الاستعلام عن الوسائط الجديدة prefers-reduced-transparency متوفّرة من الإصدار 5 من طلبات CSS للاستعلام عن الوسائط. يمكن أن تتسبّب الواجهات غير الشفافة في الصداع أو تصعِّب الرؤية لدى الأشخاص الذين يعانون من أنواع مختلفة من عيوب البصر. لهذا السبب، تتضمّن أنظمة التشغيل Windows وmacOS وiOS إعدادات مفضّلة للنظام يمكنها تقليل شفافية واجهة المستخدم أو إزالتها.

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

  • Chrome: 118
  • Edge: 118
  • Firefox: خلف علامة
  • Safari: غير متوافق

المصدر

باستخدام طلب الوسائط الجديد هذا في المتصفّح، يمكن لخدمة CSS تكييف الواجهة للمستخدمين عند تحديد الرغبة في تقليل الشفافية:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

في مثال الرمز البرمجي السابق، يحتفظ متغيّر CSS بقيمة شفافية 50% يتم استخدامها بعد ذلك مع HSL لإنشاء خلفية زرقاء شبه شفافة. تتحقّق طلب البحث عن الوسائط المُدمَجة من إعدادات المستخدم المفضّلة بشأن الشفافية المنخفضة، وإذا كانت القيمة صحيحة، يتم ضبط متغيّر الشفافية على 95%، وهي قيمة شفافية شبه عاتمة.

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

حالات استخدام تقليل الشفافية

سنخصص الأقسام القليلة التالية لعرض لحظات وفرص لتقليل الشفافية بطرق هادفة.

ترجمة شفافة جزئيًا على الصور

من الشائع إلى حدٍ ما وضع محتوى مرئي على صورة أو صورة مصغّرة للفيديو، مثل شرح أو ملخّص يمتازان بشفافية جزئية. يوضّح المثال التالي إحدى الطرق لمعالجة الإعداد المفضّل للحدّ من الشفافية. تتم إزالة التراكب بالكامل، ويتم عرض محتوى الترجمة والشرح نفسه أسفل الصورة بدلاً من التراكب عليه.

النوافذ المنبثقة والشفافة والإشعارات المنبثقة

هناك طريقة أخرى تُظهر فيها عناصر واجهة المستخدم المحتوى، وهي من خلال النوافذ المنبثقة والإشعارات والنوافذ المنبثقة الصغيرة، ما يعني غالبًا أنّ عناصر الشفافية متوفّرة. في هذه الحالات، يمكن أن يؤدي تعزيز مستوى الشفافية إلى مراعاة الإعدادات المفضّلة للمستخدم مع السماح أيضًا بظهور مقدار بسيط من اللون من خلف الصورة المتراكبة.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

زجاج بلوري قابل للتكيّف

هناك نمط شائع آخر لتراكبات الصور وهو الزجاج المموّه. في المثال التالي، تظهر صورة المنتج في الخلفية بشكل معكوس. ينطوي ذلك على ميزتَين: لا يتم اقتصاص الصورة ويمكن أن يظهر خيار الإضاءة الساطعة أو الداكنة بشكل أكبر في النتيجة النهائية.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

العنوان الرئيسي

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

يمكن حلّ هذه المشكلة باستخدام طلبَي بحث عن الوسائط في CSS: prefers-reduced-motion وprefers-reduced-transparency. ضمن طلب البحث عن الوسائط ذات الحركة المنخفضة، لا يمكنك تطبيق الصورة المتحركة اللانهائية إلا إذا كان لدى المستخدم "ما مِن تفضيل" للحركة المنخفضة، ما يشير إلى الرمز البرمجي بأنّه لا بأس بعرض الصور المتحركة لهذا المستخدم.

بالإضافة إلى ذلك، باستخدام طلب البحث عن الوسائط ذات الشفافية المنخفضة، يمكنك خفض مستوى الشفافية حتى يصبح لون التراكب 100% تقريبًا. يمكن الآن قراءة الرسالة بسهولة بدون أي تشتيت للانتباه بسبب الحركة أو التباين غير المرغوب فيه.

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

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

النظرة الإضافية مقابل النظرة المُنقصة على الإعدادات المفضّلة للمستخدم

لم يتحقق المثال السابق من إعدادات المستخدم المفضّلة هذه للإعداد المفضّل المنخفض، بل تحقّق من عدم توفّر إعداد مفضّل.

@media (prefers-reduced-transparency: no-preference) {
  …
}

غالبًا ما يلجأ المطوّرون والمصمّمون إلى "الرجوع" إلى تجربة المستخدم استنادًا إلى هذه الإعدادات المفضّلة، وذلك بعقلية نقصية. ويظهر ذلك في طلبات البحث عن الوسائط على هيئة علامة اختيار "تقليل"، وعندها تتم إزالة عنصر من واجهة المستخدم. يعرض المثال طريقة تفكير إضافية، حيث تتم إضافة الحركة والشفافية إذا كان العميل موافقًا على ذلك.

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

أدوات مطوّري البرامج

يمكن لمحاكي Chrome DevTools محاكاة هذا الإعداد المفضّل لتقليل الشفافية (و غير ذلك) في علامة التبويب "العرض". في الفيديو التالي، اطّلِع على كيفية تبديل طلبات البحث عن الوسائط التي تتضمّن prefers-color-scheme وprefers-reduced-transparency لعرض الصيغ الخفيفة والداكنة والشفافة والشفافة المنخفضة لوحة الزجاج المموّه.

https://codepen.io/web-dot-dev/pen/dyaojxr