תכונות מדיה של העדפות משתמש מאפשרות לעצב את חוויות השימוש באינטרנט בהתאם להעדפות ולצרכים הספציפיים של המשתמש. במילים אחרות, תכונות מועדפות של מדיה מאפשרות לך להתאים את חוויות המשתמש לציפיות של המשתמשים.
כדי לשפר את חוויית המשתמש באתר, אפשר לבצע את שלושת השלבים הבאים:
- גלה את האפשרויות. למדו את כל תכונות המדיה של העדפות המשתמש.
- מעצבים את חוויית השימוש באינטרנט. מטמיעים, לדוגמה, שינויים בצבע, בפריסה ובגודל הרכיב על סמך ההעדפות.
- בודקים את ממשק המשתמש. בDevTools, אפשר לבצע אמולציה של ההעדפות ולבדוק את התנהגות האתר.
בכלי הפיתוח יש תמיכה במגוון אפשרויות אמולציה. כדי לא לחפש ולשנות את הגדרות המערכת והדפדפן, כל אפשרויות האמולציה נמצאות במקום אחד – בכרטיסייה רינדור בכלי הפיתוח.
אפשרויות האמולציה של העדפות המשתמש כוללות, בין היתר:
prefers-color scheme– ערכת צבעים בהירה או כההprefers-contrast– ניגודיות נמוכה או גבוהה יותרprefers-reduced-motion– אפשר לצמצם את התנועה או לאprefers-reduced-data– צרוך פחות תנועה או לא
רשימה מקיפה של כל אפשרויות האמולציה זמינה במאמר אמולציה של תכונות מדיה של CSS.
כדי לגלות אפקטים נוספים שאפשר להשתמש בהם בכרטיסייה רינדור, עיינו בסקירה הכללית של כרטיסיית הרינדור.
בנוסף, עם כלי הפיתוח, יכולות הבדיקה לא מוגבלות למכשיר היחיד שעליו עובדים. אתם יכולים לדמות מכשירים ניידים ב'מצב מכשיר'.