שאילתת מדיה של עדכון 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 ברמה 4
• עדכון של Media Query ב-MDN