עיצוב ממשקים עמידים: איך להשתמש ב-scripting media query ב-CSS

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

מה זה scripting media query ואיך זה עובד?

בשנים האחרונות התרגלנו לבדוק גודל מסך או מצב כהה (Dark Mode) דרך CSS. אבל המפרט המודרני של CSS כולל תכונה חזקה נוספת: הזרמת מידע על יכולת הרצת הסקריפטים של הסביבה.

הגדרה · Scripting Media Feature

מאפיין CSS המאפשר להחיל כללי עיצוב בהתאם ליכולת של הדפדפן להריץ תסריטי JavaScript באותו רגע.

לתכונה זו יש שלושה ערכים אפשריים:

• none: JavaScript אינו נתמך או מנוטרל לחלוטין.
• initial-only: JavaScript פועל רק במהלך הטעינה הראשונית (למשל בדפי HTML מודפסים או סביבות קשיחות).
• enabled: JavaScript מופעל ופועל כסדרו.

הנה דוגמה פשוטה למבנה הקוד:

/* סגנון ברירת מחדל לרכיב שנפתח ב-JS */
.mobile-menu {
  display: none;
}

/* אם הסקריפט אינו זמין — הצג את התפריט פתוח מראש */
@media (scripting: none) {
  .mobile-menu {
    display: block;
    position: static;
  }
}

למה JavaScript נכשל? הנתונים שלא מדברים עליהם

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

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

כשמסתכלים על אלפי גולשים ביום, 3% הם עשרות לקוחות שפשוט נתקלים באתר שבור וממשיכים למתחרים.

דוגמה מעשית: אקורדיון שאינו תלוי ב-JS

בואו נסתכל על רכיב נפוץ: שאלות ותשובות (FAQ). ברוב האתרים, הלחיצה על השאלה מפעילה אירוע Click ב-JavaScript שפותח את התשובה. אם ה-JS לא נטען, התשובות נשארות מוסתרות לנצח.

להלן השוואה בין גישה רגילה לגישה עמידה:

כדי לפתור זאת, נוכל להשתמש באלמנט HTML טבעי כמו <details> ו-<summary>, ולהגדיר ב-CSS שבמידה ואין Scripting, התוכן יישאר פתוח ונגיש לקריאה רציפה.

@media (scripting: none) {
  details[data-accordion] summary {
    pointer-events: none;
    list-style: none;
  }
  
  details[data-accordion] {
    open: true;
  }
}

בצורה זו, המשתמש מקבל את כל התוכן על המסך. אין כפתורים מתים, אין תסכול.

אסטרטגיית Progressive Enhancement נכונה

בנייה נכונה לא מתחילה מ-JavaScript ואז מנסה תיקונים. היא מתחילה מבסיס HTML ו-CSS עובד, ומעליו מוסיפה את תכונות ה-JS כשיפור בלבד (Progressive Enhancement).

עבודה נכונה עם @media (scripting: none) מחזירה את השליטה ל-CSS. היא מאפשרת להגדיר תפריטי ניווט פתוחים, טפסים ללא אופטימיזציות AJAX מורכבות, ותמונות המוצגות בטעינה רגילה במקום הזרמה דינמית שנכשלה.

סיכום

💡

אתר מצוין הוא לא אתר שרץ רק בתנאי מעבדה. אתר מצוין הוא אתר שיודע להתמודד עם תקלות תקשורת וסביבות מגבילות בלי לאבד את המשתמש.

השימוש ב-@media (scripting: none) אינו דורש שעות פיתוח רבות. מדובר במספר שורות CSS קצרות במקומות הקיצון של הממשק. הוספת הבדיקה הזו לשגרת העבודה מבטיחה שהאתר יישאר נגיש, שמיש ומכבד את המשתמש בכל מצב.