CSS ترجیح می دهد شفافیت کاهش یافته است

برای کاربرانی که رابط کاربری غیر شفاف را ترجیح می دهند، بهینه سازی و تنظیم کنید.

Adam Argyle

از Chrome 118، ویژگی جدید درخواست رسانه prefers-reduced-transparency از CSS Media Queries 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) {
  …
}

توسعه دهندگان و طراحان اغلب بر اساس این ترجیحات، در یک ذهنیت کاهنده، تجربه کاربر را "بازگشت" می کنند. این در جستجوهای رسانه ای به عنوان یک بررسی برای "کاهش" ظاهر می شود، در این مرحله چیزی از رابط کاربری حذف می شود. مثال یک ذهنیت افزایشی را نشان می دهد، که در آن حرکت و شفافیت در صورتی که کاربر با آن موافق باشد اضافه می شود.

این رویکرد به شما کمک می‌کند تا به یک تجربه پایه سالم فکر کنید که به تنهایی قوی است. سپس، اگر با کاربر مشکلی ندارد، به تجربه اضافه کنید.

Devtools

Chrome DevTools می‌تواند این اولویت را برای کاهش شفافیت (و بیشتر) در برگه Rendering تقلید کند. در ویدیوی زیر نحوه تغییر حالت ترجیحات-رنگ-طرح و ترجیحات-شفافیت کمتر برای نمایش انواع روشن، تیره، شفاف و شفافیت کمتر کارت شیشه مات را ببینید.