Décalages de mise en page causés par les transitions CSS

Comprendre les transitions CSS :

Les transitions CSS sont un outil puissant pour animer le changement d'une propriété au fil du temps. Elles sont couramment utilisées pour des effets tels que le fondu, le glissement et la mise à l'échelle d'éléments sur une page web. Les développeurs peuvent définir des effets de transition en spécifiant la propriété à transitionner, la durée de la transition et la fonction de temporisation régissant l'accélération de la transition.

Une transition peut avoir une propriété, une durée, une fonction de temporisation et un délai. Une transition raccourcie ressemble à ceci :

/* property | duration | timing-function | delay */
transition: margin-right 4s ease-in-out 1s;

Décalages de mise en page : La conséquence involontaire :

Les décalages de mise en page se produisent lorsque des éléments sur une page web changent de position ou de taille, provoquant le reflux d'autres éléments et le décalage de la mise en page globale. Bien que les transitions CSS soient conçues pour fournir des animations fluides, elles peuvent déclencher par inadvertance des décalages de mise en page, conduisant à une expérience utilisateur désagréable et perturbatrice. Les causes les plus courantes de décalages de mise en page pendant les transitions CSS incluent les changements de dimensions, position, ou visibilité des éléments.

Les Cumulative Layout Shifts causés par les transitions CSS se produisent généralement lorsqu'un élément au-dessus de la ligne de flottaison, comme un menu de navigation, passe de son premier état (non stylisé) à son état final (stylisé ou même caché). C'est généralement une conséquence involontaire de propriétés de transition trop larges. Par exemple, une entrée de menu ne devrait transitionner que la couleur d'arrière-plan, et au lieu de la propriété de transition 'background-color', 'all' a été choisi. Cela conduira non seulement à une transition d'arrière-plan mais dans certains cas aussi à une transition de largeur, de hauteur ou même de visibilité pendant le chargement de la page.

Regardez l'exemple ci-dessous. Cela démontre un décalage de mise en page causé par des transitions CSS qui se produisent pendant la phase de chargement d'une page. Malheureusement, je vois ce modèle tout le temps et trouver et corriger ces types de problèmes peut être difficile.

Trouver et corriger les transitions CSS :

Pour trouver et corriger tous les décalages de mise en page causés par les transitions CSS, nous devons faire un test rapide. D'abord, nous devons trouver toutes les transitions CSS. Une fois cela fait, nous devons nous assurer que la transition ne change pas la position (width, height, margin, padding, visibility) d'un élément. Nous pouvons le faire en modifiant ou en désactivant ces transitions. Enfin, nous pouvons tester l'impact de ces changements et décider une fois pour toutes si les transitions CSS causent des problèmes de CLS. 

Conseil Core Web Vitals : Les Cumulative Layout Shifts causés par les transitions CSS se produisent souvent tôt durant la phase de chargement de la page. Ces décalages de mise en page ne se produisent pas de manière cohérente, ce qui les rend difficiles à déboguer. Ralentir votre réseau en émulant un appareil mobile et en désactivant votre cache rendra leur détection plus facile ! 

Étape 1 : Trouver les transitions CSS

Trouver les transitions CSS peut se faire manuellement : inspectez toutes les feuilles de style et cherchez le mot 'transition'. Cela ne devrait pas prendre plus de 10 minutes, mais il existe un meilleur moyen ! Collez simplement cet extrait dans la console et appuyez sur entrée

(() => {
 
  let nodeTable = [];
  let nodeArray = [];

  // Get the name of the node
  function getName(node) {
    const name = node.nodeName;
    return node.nodeType === 1
      ? name.toLowerCase()
      : name.toUpperCase().replace(/^#/, '');
  }

  // Get the selector
  const getSelector = (node) => {
    let sel = '';

    try {
      while (node && node.nodeType !== 9) {
        const el = node;
        const part = el.id
          ? '#' + el.id
          : getName(el) +
          (el.classList &&
            el.classList.value &&
            el.classList.value.trim() &&
            el.classList.value.trim().length
            ? '.' + el.classList.value.trim().replace(/\s+/g, '.')
            : '');
        if (sel.length + part.length > (100) - 1) return sel || part;
        sel = sel ? part + '>' + sel : part;
        if (el.id) break;
        node = el.parentNode;
      }
    } catch (err) {
      // Do nothing...
    }
    return sel;
  };

  const getNodesWithTransition = (node) => {

    // Get the computed style
    let cs = window.getComputedStyle(node);
    let tp = cs['transition-property'];
    let td = cs['transition-duration'];

    // If there is a transition, add it to the table
    if (tp !== '' && tp !== 'none' && td != '0s') {
      nodeTable.push({ selector: getSelector(node), transition: cs['transition'] });
      nodeArray.push(node);
    }

    // Recursively call this function for each child node
    for (let i = 0; i < node.children.length; i++) {
      getNodesWithTransition(node.children[i]);
    }
  }

  // find all transitions
  getNodesWithTransition(document.body);

  // Display the results in the console
  console.log('%cReadable table of selectors and their transitions', 'color: red; font-weight: bold;');
  console.table(nodeTable);

  console.log('%cNodeList for you to inspect (harder to read but more info)', 'color: red; font-weight: bold;');
  console.log(nodeArray);


  // styles to temporarity override the transitions
  let selectors = nodeTable.map((item) => item.selector).join(', ');

  console.log('%cSpecific CSS to disable all transitions on this page', 'color: red; font-weight: bold;');
  console.log(`<style>${selectors}{transition-property: none !important;}</style>`);
  
  console.log('%cGlobal CSS to disable all transitions on this page (not suggested on production)', 'color: red; font-weight: bold;');
  console.log(`<style>*{transition-property: none !important;}</style>`);

})()

Cela vous montrera un tableau de toutes les transitions, les éléments sur lesquels elles agissent et plus de détails sur les transitions.

Pour trouver le décalage de mise en page, nous devons chercher des propriétés de transition comme width,height, margin,padding, transform, display et surtout all (puisque all inclut toutes les propriétés de transition valides)

Étape 2 : Modifier les transitions CSS

L'extrait JavaScript ci-dessus affichera toutes les transitions ainsi que le code exemple pour désactiver ces transitions. Pour des tests rapides, je suggère de prendre la voie facile et de désactiver toutes les transitions avec une simple ligne de code CSS

<style>*{transition-property: none !important;}</style>

Bien sûr, pour les environnements en direct, un peu plus de finesse est requise. Ne supprimez soigneusement que les propriétés de transition inutiles sur une base par sélecteur. Par exemple changez #button{transition: all .2s} en  #button{transition: background-color .2s}

Étape 3 : Mesurer le changement de décalage de mise en page

Autres bonnes pratiques de transition :

1. Préférer l'accélération GPU : Utiliser l'accélération GPU pour les transitions CSS peut décharger la charge de travail de rendu du CPU vers le GPU. Cela peut être réalisé en s'assurant que les propriétés transitionnées sont propices à l'accélération GPU, comme opacity et transform.
2. Utiliser la propriété "will-change" : La propriété CSS will-change informe le navigateur qu'un élément spécifique est susceptible d'être changé, lui permettant d'optimiser le rendu en conséquence. 
3. Assurer des dimensions cohérentes : Pour prévenir les décalages de mise en page causés par des changements de dimensions, assurez-vous que les éléments ont des dimensions cohérentes avant et après la transition. Cela peut impliquer de définir des dimensions explicites, d'utiliser des valeurs en pourcentage, ou d'employer des techniques comme les boîtes de rapport d'aspect.
4. Optimiser les fonctions de temporisation : Le choix de la fonction de temporisation peut impacter significativement la perception de fluidité durant une transition. Soyez attentif aux modèles d'accélération et de décélération, et envisagez d'utiliser ease-in-out ou des fonctions cubic bezier personnalisées pour un ressenti plus naturel.