שאילתת ה-CSS Media Query ששינתה את גישת העיצוב שלי
פעם עיצבתי אתרים על ידי בדיקת גודל המסך.
חשבתי שאני צריך לזהות אם המשתמש משתמש בטלפון או בטאבלט. ניסיתי לבדוק אם גובה המסך גדול יותר מהרוחב. זה בדק רק את הכיווניות (orientation). זה לא בדק את סוג המכשיר.
מצאתי דרך טובה יותר. השתמשו ב-media queries כדי לבדוק איך אנשים מתקשרים עם האתר שלכם.
שאילתת ה-(hover) בודקת אם מכשיר מסוגל לבצע hover מעל אלמנטים.
השתמשו ב-@media (hover: hover) למכשירים עם עכבר או trackpad.
השתמשו ב-@media (hover: none) למכשירים מבוססי מגע בלבד כמו טלפונים.
זה עוזר לכם לפתור בעיות hover בנייד. בטלפון, חוקי hover נוטים לעיתים קרובות להיכשל או לפעול בצורה מוזרה. אתם יכולים לכתוב קוד שיציג כפתורים בנייד אך יסתיר אותם בדסקטופ עד שהמשתמש יבצע hover.
Tailwind הופכת את זה לקל באמצעות arbitrary variants:
ניתן גם לבדוק את דיוק הסמן (pointer precision) באמצעות (pointer).
• עכבר: hover ו-fine pointer • trackpad: hover ו-fine pointer • מגע אצבע: ללא hover ו-coarse pointer • stylus: בדרך כלל hover ו-fine pointer
אם אתם רוצים לבדוק כל מכשיר קלט במקום רק את המכשיר הראשי, השתמשו באלה:
• @media (any-hover: hover) • @media (any-pointer: fine)
טאבלט עם עכבר מחובר עשוי לדווח על hover: none עבור קלט הקלט הראשי שלו. אך הוא ידווח על any-hover: hover מכיוון שקיים עכבר.
הפסיקו לעצב רק לפי גדלי מסך. התחילו לעצב לפי האופן שבו משתמשים נוגעים או לוחצים על הממשק שלכם.