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

التحسين والتعديل للمستخدمين الذين يفضلون واجهة مستخدم مبهمة.

Adam Argyle

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

باستخدام هذا الاستعلام الجديد عن الوسائط في المتصفح، يمكن لـ 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 محاكاة هذا الإعداد المفضّل لتقليل الشفافية (و غير ذلك) في علامة التبويب "العرض". في الفيديو التالي، تعرف على كيفية التبديل بين استعلامات الوسائط المفضلة وتقليل الشفافية لعرض تباينات الشفافية الفاتحة والداكنة والشفافة والخفيفة في بطاقة الزجاج البلوري.