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

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

Adam Argyle

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

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