ResizeObserver JS : Adapter les éléments suivant leur taille

L’API ResizeObserver en Javascript offre une solution élégante et efficace pour surveiller et réagir aux changements de taille des éléments d’une page web. Ce tutoriel vous explique en détail à travers un exemple de code JavaScript comment utiliser ResizeObserver pour ajuster dynamiquement la taille de plusieurs éléments.

Nous allons ajuster la taille des polices d’un titre <h1> et d’un paragraphe <p> en fonction de la largeur d’un élément <div>.

Bouger le curseur dans le cadre ci-dessous.

ResizeObserver est une nouvelle API Javascript introduite dans la norme HTML5. Elle permet aux développeurs de surveiller les changements de taille d’un élément et de réagir en conséquence. Cette API est particulièrement utile pour créer des mises en page réactives et pour adapter le contenu à différentes tailles d’écran.

Pour utiliser ResizeObserver, il faut d’abord créer une instance de l’objet ResizeObserver. Ensuite, on peut appeler la méthode observe() sur cette instance pour spécifier les éléments que l’on souhaite observer. L’objet ResizeObserver déclenchera un événement resize chaque fois que la taille d’un élément observé change.

La structure de base en HTML

<div>
    <h1>L'API ResizeObserver</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <form>
        <div>
            <label>Ajuster la largeur :</label>
            <input type="range" value="600" min="300" max="1300">
        </div>
    </form>
</div>

Observer les changements de taille avec ResizeObserver en JavaScript

Le code JavaScript fourni utilise l’API pour surveiller les changements de taille d’un élément <div> et ajuster dynamiquement la taille des polices de texte de deux éléments <h1> et <p>.

Détection de la compatibilité

Tout d’abord, le code vérifie si le navigateur prend en charge l’API ResizeObserver :

if (window.ResizeObserver) {

Si cette API est disponible, le code continue son exécution. Sinon, un message est affiché dans la console :

console.log('Resize observer n\'est pas supporté !');

Initialisation des éléments

Le code sélectionne plusieurs éléments du DOM :

const h1Elem = document.querySelector('h1');
const pElem = document.querySelector('p');
const divElem = document.querySelector('body > div');
const slider = document.querySelector('input[type="range"]');

Écouteur d’événements pour le slider

Un écouteur d’événements est ajouté au curseur pour ajuster la largeur du <div> lorsque la valeur du curseur change :

slider.addEventListener('input', () => {
    divElem.style.width = slider.value + 'px';
})

Utilisation de ResizeObserver

L’instance resizeObserver est créée pour observer les changements de taille du <div> :

const resizeObserver = new ResizeObserver(entries => {
          for (let entry of entries) {
            if(entry.contentBoxSize) {
              // La norme standard fait de contentBoxSize un tableau...
              if (entry.contentBoxSize[0]) {
                h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
                pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
              } else {
                // ...mais les anciennes versions de Firefox le traitent comme un élément seul
                h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
                pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
              }

            } else {
              h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
              pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
            }
          }
          console.log('La taille a changé');
        });

Code final javascript

if(window.ResizeObserver) {
    const h1Elem = document.getElementById('h1Demo');
    const pElem = document.getElementById('pDemo');
    const divElem = document.getElementById('divDemo');
    const slider = document.querySelector('input[type="range"]');
    const cadreDemo = document.getElementById('exempleDemo');

    divElem.style.width = '600px';

    slider.addEventListener('input', () => {
      divElem.style.width = slider.value + 'px';
    })

    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        if(entry.contentBoxSize) {
          // La norme standard fait de contentBoxSize un tableau...
          if (entry.contentBoxSize[0]) {
            h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
            pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
          } else {
            // ...mais les anciennes versions de Firefox le traitent comme un élément seul
            h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
            pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
          }

        } else {
          h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
          pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
        }
      }
      console.log('La taille a changé');
    });

    resizeObserver.observe(divElem);

    
} else {
    console.log('Resize observer n\'est pas supporté !');
}

Ce code utilise l’API ResizeObserver pour surveiller les changements de taille d’un élément <div> et ajuster dynamiquement la taille des polices de texte de deux éléments. Il permet également à l’utilisateur de contrôler la largeur du <div> via un curseur, offrant une démonstration interactive.