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

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

Adam Argyle

החל מגרסה 118 של Chrome, התכונה החדשה 'שאילתות על מדיה' prefers-reduced-transparency משאילתות מדיה 5 של CSS היא זמינים. ממשקים לא אטומים עלולים לגרום לכאבי ראש או לקשיים ויזואליים סוגים שונים של ליקויי ראייה. זו הסיבה לכך ש-ב-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%;
  }
}

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

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

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