La media query CSS che ha cambiato il mio approccio al design
Un tempo progettavo siti web controllando la dimensione dello schermo.
Pensavo di dover rilevare se un utente stesse usando un telefono o un tablet. Ho provato a controllare se l'altezza dello schermo fosse maggiore della larghezza. Questo controllava solo l'orientamento. Non controllava il tipo di dispositivo.
Ho trovato un modo migliore. Usa le media query per controllare come le persone interagiscono con il tuo sito.
La query (hover) controlla se un dispositivo può passare il cursore sopra gli elementi.
Usa @media (hover: hover) per i dispositivi con mouse o trackpad. Usa @media (hover: none) per i dispositivi solo touch, come i telefoni.
Questo ti aiuta a risolvere i problemi di hover su mobile. Su un telefono, le regole di hover spesso falliscono o si comportano in modo strano. Puoi scrivere codice per mostrare i pulsanti su mobile ma nasconderli su desktop finché l'utente non passa il cursore sopra.
Tailwind rende tutto questo semplice con le varianti arbitrarie:
Puoi anche controllare la precisione del puntatore con (pointer).
• Mouse: hover e puntatore fine • Trackpad: hover e puntatore fine • Touch con le dita: nessun hover e puntatore grossolano • Stylus: solitamente hover e puntatore fine
Se vuoi controllare ogni dispositivo di input invece di quello principale, usa questi:
• @media (any-hover: hover) • @media (any-pointer: fine)
Un tablet con un mouse collegato potrebbe riportare hover: none per il suo input primario. Ma riporterà any-hover: hover perché è presente un mouse.
Smetti di progettare solo in base alle dimensioni dello schermo. Inizia a progettare in base a come gli utenti toccano o cliccano la tua interfaccia.