שירות ה-CSS מעדיפים שקיפות נמוכה יותר

לבצע אופטימיזציה ולהתאים את האפליקציה למשתמשים שמעדיפים ממשק משתמש אטום.

Adam Argyle

מגרסה 118 של Chrome ואילך, התכונה החדשה של שאילתות מדיה 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%;
  }
}

כותרת ראשית (Hero)

רכיב נפוץ בדף הבית כולל הודעה בכתב מודגש שמופיעה על גבי סרטון או תמונה מונפשת בלופ. בדוגמה הבאה מוצג שכבת-על של פס צבעוני חצי שקוף ותמונת רקע עם אנימציה מתמשכת. אמנם הדבר עשוי למשוך תשומת לב רבה, אבל הוא גם יגרום לבעיות אצל רבים, בגלל ניגודיות נמוכה עם שקיפות ותנועה שלא ניתן לשלוט בה.

אפשר לפתור את הבעיה באמצעות שתי שאילתות מדיה של CSS: prefers-reduced-motion ו-prefers-reduced-transparency. בתוך שאילתה של מדיה עם תנועה מופחתת, אפשר להחיל את האנימציה האינסופית רק אם למשתמש יש 'no-preference' לתנועה מופחתת, שמאותתת לקוד שאפשר להציג תנועה למשתמש הזה.

בנוסף, בעזרת שאילתה של מדיה עם שקיפות מופחתת, אפשר להקטין את האטימות כך שצבע שכבת-העל יהיה כמעט 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 יכולים לדמות את ההעדפה הזו לשקיפות מופחתת (ועוד) בכרטיסייה 'עיבוד'. בסרטון הבא מוסבר איך להפעיל או להשבית את שאילתות המדיה prefers-color-scheme ו-prefers-reduced-transparency כדי להציג את הגרסאות הבהירות, הכהות, השקופות והשקופות חלקית של הכרטיס עם זכוכית מט.