שאילתת מדיה של עדכון CSS

התאמת ממשק המשתמש ליכולות של קצב הרענון של המסך.

Adam Argyle

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

שאילתה ה-media‏ update מאפשרת להתאים את ממשק המשתמש לקצב הרענון של המכשיר. התכונה יכולה לדווח על הערך fast, ‏ slow או none, שקשור ליכולות של מכשירים שונים.

מכשירים וקצב רענון

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

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

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

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

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

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

@media (update: none) {
  /* one time render like printed paper */
}

ב-CodePen הבא אפשר לראות אנימציה של מעוף שמשתפרת בהדרגה באמצעות שאילתה מעודכנת חדשה של מדיה:

מקורות מידע נוספים

• CSS Media Queries ברמה 4
• עדכון של Media Query ב-MDN