Résolution des problèmes liés aux modifications inattendues apportées au « type de conteneur : taille en ligne

Résolution des problèmes liés aux modifications inattendues apportées au « type de conteneur : taille en ligne » dans Chrome

Patricia Arquette

Libérer： 2024-10-03 16:09:02

original

559 Les gens l'ont consulté

Chrome 129 a introduit un changement dans le comportement des requêtes de conteneur affectant les éléments de type conteneur : inline-size. Ce changement, bien que minime, peut potentiellement perturber la présentation de votre application Web. Je vais passer en revue ce qui a changé, comment il se comportait auparavant et comment il se comporte à partir de Chrome 129.

Qu'est-ce qui a changé ?

Avant Chrome 129, conteneur-type : inline-size implicitement :

Création d'un bloc conteneur pour les éléments positionnés de manière absolue
Établissement d'un nouveau contexte d'empilement

Pour illustrer cela, considérons ce qui suit :

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
        container-type: inline-size;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        padding: 1rem;
        margin: 2rem;
        contain: layout;
      }

      .child,
      .sibling {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }

      .child {
        width: 200px;
        height: 200px;
      }

      .child-1 {
        background-color: rgba(255, 0, 0, 0.7);
        top: 100px;
        left: 100px;
        z-index: 2;
      }

      .child-2 {
        background-color: rgba(0, 255, 0, 0.7);
        top: 30px;
        left: 0;
        z-index: 1;
      }

      .sibling {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 0, 255, 0.7);
        top: 165px;
        left: 50px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child child-1">Child 1 (z-index: 2)</div>
      <div class="child child-2">Child 2 (z-index: 1)</div>
    </div>
    <div class="sibling">Sibling (z-index: 1)</div>
  </body>
</html>

Copier après la connexion

Avant Chrome 129, le code ci-dessus était rendu comme suit :

Resolving Issues from Unexpected Changes to `container-type: inline-size` in Chrome

Les enfants de la div .container au contour noir sont absolument positionnés. child-2 (le div vert) est positionné à gauche : 0, mais il s'aligne sur les limites gauches du div .container parent. En effet, dans Chrome 128 et versions antérieures, containers-type: inline-size créait implicitement un bloc conteneur pour les enfants positionnés de manière absolue.

De plus, l'élément conteneur-type: inline-size crée implicitement un nouveau contexte d'empilement, ce qui fait que le vert est en bas, le rouge au milieu et le bleu en haut.

Cependant, depuis Chrome 129, les mêmes HTML et CSS s'affichent ainsi,

Resolving Issues from Unexpected Changes to `container-type: inline-size` in Chrome

Aucun bloc conteneur n'est créé pour les enfants de l'élément .container, et donc les éléments positionnés de manière absolue sont positionnés par rapport à la page Web plutôt que par rapport à leur conteneur. Cela fait que le carré vert s'échappe complètement du conteneur et touche le côté gauche de la page Web.

De plus, comme aucun nouveau contexte d'empilement n'a été créé, l'ordre dans lequel les enfants et les frères et sœurs s'empilent a changé. Le carré vert est toujours en bas, mais maintenant le carré bleu est au milieu et le carré rouge est en haut.

Pourquoi le changement ?

Selon l'équipe Chromium sur le outil de suivi des bogues officiel de Chromium, il s'agissait d'un changement intentionnel visant à corriger ce qui est considéré par l'équipe comme une erreur de conception dans les spécifications d'origine.

La spécification elle-même n'a pas encore été mise à jour, mais l'équipe a modifié le comportement du navigateur avant qu'aucune modification n'ait été apportée à la spécification en raison d'un accord au sein du groupe de travail.

Au moment de la rédaction de cet article (3 octobre 2024), tous les autres principaux navigateurs (Firefox, Safari) suivent toujours le comportement d'avant Chrome 129.

Atténuer les changements

Si vous souhaitez simplement restaurer les choses telles qu'elles étaient avant Chrome 129 (et en attendant maintenir la cohérence entre les navigateurs jusqu'à la mise à jour de Firefox et Safari pour suivre l'implémentation de Chrome), vous pouvez simplement ajouter contain: layout; à l'élément qui a le type de conteneur : inline-size ;.

Si vous souhaitez ajouter le comportement du bloc conteneur mais ne pas créer un nouveau contexte d'empilement, vous pouvez également ajouter position: relative au type de conteneur: inline-size; élément, qui créera un bloc conteneur pour les éléments enfants mais ne créera pas de nouveau contexte d'empilement. Cependant, cela entraînera un comportement différent selon les navigateurs jusqu'au point où d'autres navigateurs seront mis à jour pour suivre l'exemple de Chrome.

Essayez-le vous-même

Vous trouverez ci-dessous un CodePen avec lequel vous pouvez jouer et qui démontre ce dont je parle ci-dessus. Si vous supprimez la mise en page contain: du style .container et si vous utilisez Chrome 129 ou une version ultérieure, la mise en page s'affichera comme dans la deuxième image que j'ai fournie ci-dessus. Cependant, si vous affichez le CodePen dans Firefox 131 (le plus récent au moment de la rédaction), il devrait afficher la même chose, que la disposition contain: soit définie ou non.

Je n'ai pas trouvé de mention de ce changement dans les notes de version de Chrome 129, et comme cela a déjà été mentionné, ce changement a été effectué avant tout changement de spécification, donc cela nous a vraiment pris au dépourvu et a considérablement cassé la mise en page sur une de nos applications Web. J'espère que ces informations pourront aider toute autre personne rencontrant les mêmes problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!