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

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

Adam Argyle

من Chrome 118: ميزة الاستعلام عن الوسائط الجديدة prefers-reduced-transparency من استعلامات وسائط CSS 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 لإنشاء خلفية زرقاء شبه شفافة. تشير رسالة الأشكال البيانية يتحقق الاستعلام عن الوسائط المدمجة من الإعدادات المفضّلة لدى المستخدم انخفاض الشفافية، وعندما تكون true، يتم تعديل متغير التعتيم إلى 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: يفضّل تقليل الحركة ويفضل تقليل الشفافية. من خلال الاستعلام عن الوسائط ذات الحركة المنخفضة، يمكنك تطبيق الرسوم المتحركة اللانهائية فقط إذا كان المستخدم لديه "بدون تفضيل" بسعر مخفّض الحركة، في إشارة إلى الرمز أنه من المقبول أن يكون لدى هذا المستخدم حركة.

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