התאימו את ממשק המשתמש ליכולות של קצב הרענון של המסך.
שאילתות מדיה ב-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 הבא תוכלו לראות אנימציית ריחוף משופרת בהדרגה באמצעות שאילתת המדיה החדשה של העדכון: