Safari 27.3 Beta מוסיף מצב כהה אדפטיבי לאתרים בהירים

WebKit הכריזה על מצב כהה אדפטיבי ב-Safari 27.3 beta. Safari 12.1 הפך לדפדפן הראשון שתמך במצב כהה ברשת באביב 2019, אך לא לכל אתר יש גרסה כהה. מצב כהה אדפטיבי מתאים אתרים בהירים למשתמשים במצב כהה, בעוד אתרים שמצהירים על תמיכה במצב כהה נשארים ללא שינוי.

איך מצב כהה אדפטיבי עובד

כמעט 40% מטעינות דפי אינטרנט מגיעות ממשתמשים במצב כהה, בעוד שרק 10% מהטעינות תומכות בו. מצב כהה אדפטיבי נועד לסגור את הפער הזה. הוא בודק תחילה אם אתר מסמן תמיכה במצב כהה דרך תג meta color-scheme עם content light dark ב-HTML או color-scheme: light dark ב-CSS. אם כן, התכונה אינה משנה את הדף. באתרים אחרים, Safari מנתחת צבעים ומעריכה אם הדף בהיר או כהה בעיקרו. דף עם רקע כהה בדרך כלל וטקסט בהיר נשאר ללא שינוי, בעוד דף בהיר מותאם לכהה.

התכונה משנה צבע על ידי היפוך בהירות תוך שמירה על גוון. היא שואפת לניגודיות טקסט מספקת כפי שמוגדר ביחס הניגודיות WCAG 4.5:1. גרדיאנטים בהירים ב-CSS מותאמים, ו-Safari מקבלת החלטות כדי שכפתורים, טקסט מעל תמונות ותפריטי ריחוף יישארו שמישים. רוב התמונות נשארות ללא שינוי, אך בתמונות SVG ייתכן שצבעים ישתנו בעת הצורך, ובתמונות bitmap ייתכן שלוגו פשוט בשחור ולבן יהפוך לאחר ניתוח היסטוגרמה. אפקטים כגון masks ו-mix-blend-mode עשויים להיכבות במקרים מסוימים, בעוד תוכן canvas נשאר ללא שינוי.

המלצות לאתרים

WebKit אומרת שדפים בדרך כלל עובדים היטב אם הם פועלים לפי שיטות פיתוח אינטרנט מודרניות. עדכונים מוצעים כוללים החלפת לוגואים ואייקונים מסוג bitmap ב-SVG, שימוש בצבעי CSS מלאים או גרדיאנטים במקום תמונות רקע אריחים, החלפת image sprites ב-CSS מודרני ויצירת תמונות תוכן עם רקעים שקופים. הוספת padding למכולות יכולה למנוע צפיפות. לחוויית מצב כהה ספציפית בחלק מהדף, מפתחים יכולים להחיל color-scheme: light dark על אלמנט ולהוסיף סגנונות כהים משלהם.

לשליטה מלאה, אתרים יכולים להצהיר על תמיכה מלאה במצב כהה באמצעות טכנולוגיות אינטרנט נפוצות, כולל תג meta color-scheme, :root { color-scheme: light dark }, שאילתות מדיה prefers-color-scheme, רכיבי picture source ו-light-dark(). פונקציות CSS חדשות יותר כגון color-mix() ו-contrast-color(), יחד עם טכניקות של משתני CSS, מספקות אפשרויות נוספות. WebKit ממליצה להצהיר על תמיכה ב-HTML או ב-CSS ולא להזריק אותה מאוחר יותר עם JavaScript.

אתרים שצריכים להישאר בהירים בלבד יכולים להשתמש ב-color-scheme: light only, בין באמצעות תג meta ב-HTML ובין ב-CSS. מילת המפתח only אינה נתמכת ב-Safari 27.3 beta 1. WebKit אומרת לבדוק שוב ככל שהתכונה מתפתחת במהלך תהליך הבטא.

פרטיות ומשוב

WebKit אומרת ש-Safari מונעת מאתרים לזהות מתי הוחל מצב כהה אדפטיבי, מכיוון שזיהוי כזה יוסיף מידע שניתן להשתמש בו לטביעת אצבע. JavaScript שמבצע שאילתות על צבעי CSS מקבל את הצבעים המקוריים כפי שנכתבו, ותמונות המצוירות אל canvas מוצגות בצורתן המקורית. מפתחים עם שאלות יכולים לפנות ל[email protected], ומשתמשים שמגלים אתר שלא עובד היטב יכולים להגיש דיווח ב-Feedback Assistant.

מקורות: webkit.org