Chers lecteurs, plongeons ensemble dans le monde des unités de mesure CSS avec une attention particulière portée au SVH. Si vous avez déjà exploré le design web responsive, vous êtes probablement familiarisé avec les unités VH et VW. Mais saviez-vous qu'il existe d'autres unités tout aussi utiles, sinon plus, pour s'adapter aux navigateurs mobiles modernes ?
Qu'est-ce que le SVH ?
Le SVH est lié à la plus petite hauteur du viewport, tandis que le SVW se rapporte à la plus petite largeur. Lorsque nous parlons de "petit viewport", nous faisons référence à la taille du viewport lorsque tous les éléments de l'interface utilisateur qui peuvent être dynamiquement étendus, comme la barre d'adresse, sont visibles. Utiliser 100% SVH garantit que votre contenu ne sera pas obscurci par ces éléments d'interface utilisateur lorsqu'ils sont étendus. Cependant, il peut y avoir un espace blanc lorsque certains éléments de l'interface, comme la barre d'adresse, sont cachés.
SVH vs VH : Quelle est la différence ?
Le principal avantage du SVH par rapport au VH réside dans la manière dont ils traitent les barres d'outils dynamiques sur les navigateurs mobiles. En utilisant le VH, un élément dimensionné à 100 VH pourrait s'étendre hors du viewport sur les navigateurs avec des barres d'outils dynamiques. Le SVH, en revanche, prend en compte cet espace, garantissant que les éléments de votre site restent pleinement visibles.
Notre opinion sur le SVH
À notre avis, le SVH est particulièrement utile pour garantir une expérience utilisateur fluide sur les appareils mobiles. Prenons l'exemple d'un menu burger qui s'ouvre sur toute la page : l'utilisation du SVH permet de s'assurer que le menu s'affiche intégralement, sans être masqué ou obscurci par des éléments tels que la barre de navigation ou la barre d'adresse du navigateur. Cela crée une expérience utilisateur cohérente et sans heurts, en garantissant que le contenu du menu est toujours pleinement visible, quelle que soit la présence ou l'absence d'éléments d'interface utilisateur dynamiques.
En conclusion
Le monde du web design est en constante évolution, et les unités comme le SVH sont des outils précieux pour s'assurer que nos designs sont aussi efficaces et accessibles que possible. Bien que le choix entre SVH, VH et d'autres unités dépende de vos besoins spécifiques, nous pensons que le SVH offre une grande valeur, en particulier pour le design mobile. Alors, la prochaine fois que vous travaillerez sur un design responsive, pensez au SVH !