Amélioration de la réactivité avec les unités de fenêtre d'affichage : approches JavaScript multi-navigateurs

L'introduction d'unités de longueur de pourcentage de fenêtre d'affichage (vh et vw) dans CSS3 a permis aux développeurs d'avoir un contrôle précis sur des mises en page réactives. Cependant, les navigateurs n'interprètent pas ces unités de manière native, ce qui pose un problème de compatibilité multiplateforme.

Alternatives JavaScript/jQuery

Pour surmonter cette limitation, les développeurs ont adopté les plugins JavaScript et jQuery qui traduisent vh et vw en valeurs de pixels, prenant en charge leur utilisation dans tous les navigateurs.

Vh est-il sûr pour le dimensionnement des éléments ?

En plus du dimensionnement des polices, les unités vh et vw peuvent être utilisées en toute sécurité pour dimensionner les éléments. L'exemple ci-dessous montre l'application des unités vh à la fois pour la hauteur et la largeur :

div {
   height: 6vh;
   width: 20vh;  /* Using vh for both width and height */
}

Plugin jQuery pour le redimensionnement dynamique

L'exemple de plug-in jQuery utilise l'événement window.resize pour mettre à jour automatiquement la conversion des pixels, garantissant que la mise en page reste réactive aux modifications des dimensions de la fenêtre d'affichage. La version mise à jour de ce plugin par elclanrs, jquery.columns, étend cette fonctionnalité pour faciliter les mises en page réactives.

Fonction ParseProps

La fonction parseProps est responsable de la conversion des unités de fenêtre en valeurs de pixels. En parcourant les propriétés CSS, il identifie toutes les valeurs avec des unités vh ou vw et effectue la conversion. L'objet résultant avec les valeurs de pixels est ensuite appliqué au style CSS via $.fn.css.

Extend Native CSS Method

Le plugin s'intègre de manière transparente à la méthode CSS native, permettant aux développeurs d'utiliser vh et vw directement dans leurs déclarations de style CSS. Le plugin gère la conversion en arrière-plan, fournissant une solution pratique et multi-navigateurs pour le dimensionnement basé sur la fenêtre d'affichage.

Exemple d'utilisation

L'exemple suivant montre l'utilisation du plugin :

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

En tirant parti des plugins JavaScript et jQuery, les développeurs peuvent exploiter la puissance des unités de fenêtre pour des mises en page réactives, garantissant des performances cohérentes sur différents navigateurs.