يمكنك التحسين والتعديل للمستخدمين الذين يفضلون واجهة مستخدم معتمة.
بدايةً من 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: prefers-reduced-motion وتفضيل-reduced-transparencyd. ضمن استعلام الوسائط ذات الحركة المخفّضة، لا يمكنك تطبيق الرسوم المتحركة اللانهائية إلا إذا كان المستخدم لديه "لا تفضيل" للحركة المنخفضة، مشيرًا إلى الرمز بموافقته على أن يحصل هذا المستخدم على حركة.
علاوةً على ذلك، باستخدام الاستعلام عن الوسائط ذات الشفافية المخفّضة، يمكنك تقليل التعتيم حتى يصل لون التراكب إلى 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 محاكاة هذا الخيار المفضّل لتقليل الشفافية (والمزيد) في علامة التبويب "العرض". في الفيديو التالي، يمكنك الاطّلاع على كيفية تبديل نظام Preferred-color-schemeجميَن مع استعلامات وسائط تبدو مفضَّلة-والشفافية المنخفضة لعرض صِيغ ألوان فاتحة وداكنة وشفافة ومنخفضة الشفافية في البطاقة الزجاجية المصنفة.