ביצוע אופטימיזציה והתאמה למשתמשים שמעדיפים ממשק משתמש אטום.
החל מגרסה 118 של Chrome, התכונה החדשה 'שאילתות מדיה' prefers-reduced-transparency
מ-CSS Media שאילתות 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: prefers-reduced-motion ו-העדפה לצמצום בשקיפות. בשאילתת המדיה בהילוך מופחת אפשר להחיל את האנימציה האינסופית רק אם למשתמש יש 'ללא העדפה' לתנועה מופחתת, כדי לסמן לקוד שמותר לו תנועה.
בנוסף, בעזרת שאילתת המדיה בשקיפות מופחתת תוכלו להפחית את השקיפות כך שצבע שכבת-העל יהיה כמעט 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) {
…
}
לעיתים קרובות מפתחים ומעצבים "מחליפים" את חוויית המשתמש על סמך ההעדפות האלה, במנטליות החסרה. הדבר מתבטא בשאילתות המדיה כבדיקה של "Decrease" (הקטנה), ובשלב זה משהו מממשק המשתמש מוסר. בדוגמה מוצגת מנטליות של הוספה, שבה תנועה ושקיפות מתווספות אם המשתמש מסכים לכך.
הגישה הזו עוזרת לחשוב על חוויית בסיס בריאה שעומדת בפני עצמה. ואז, אם זה בסדר מבחינת המשתמש, אפשר להוסיף אותו לחוויה.
כלי פיתוח
בכרטיסיית הרינדור, אפשר לחקות את ההעדפה הזו לכלי פיתוח ל-Chrome כדי לצמצם את השקיפות (ועוד). בסרטון הבא תלמדו איך להחליף את המצב של סכמת הצבעים המועדפת ושאילתות המדיה עם שקיפות מופחתת כדי להציג את הווריאציות בהירות, כהות, שקופות ושקיפות מופחתת של כרטיס הזכוכית החלבית.