דף זה תורגם על ידי Cloud Translation API.

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

https://codepen.io/web-dot-dev/pen/dyaojxr