Chrome の「container-type: inline-size」への予期しない変更による問題の解決-CSSチュートリアル-php.cn

Chrome の「container-type: inline-size」への予期しない変更による問題の解決

Patricia Arquette

リリース： 2024-10-03 16:09:02

オリジナル

494 人が閲覧しました

Chrome 129 では、container-type: inline-size の要素に影響を与えるコンテナクエリの動作に変更が導入されました。この変更は小さいものですが、Web アプリのレイアウトを壊す可能性があります。何が変更されたのか、以前はどのように動作していたのか、そして Chrome 129 以降ではどのように動作するのかを説明します。

何が変わったのでしょうか？

Chrome 129 より前では、container-type: inline-size は暗黙的に:

絶対に配置された要素の包含ブロックを作成しました
新しいスタッキングコンテキストを確立しました

これを説明するには、次の点を考慮してください。

<!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>

ログイン後にコピー

Chrome 129 より前では、上記のコードは次のようにレンダリングされていました:

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

黒枠の .container div の子は絶対配置されます。 child-2 (緑色の div) は left: 0 に位置しますが、親の .container div の左側の境界と位置合わせされます。これは、Chrome 128 以前では、container-type: inline-size が絶対位置の子を含むブロックを暗黙的に作成したためです。

さらに、container-type: inline-size 要素は暗黙的に新しいスタッキングコンテキストを作成し、その結果、緑色が下部、赤色が中央、青色が上部になります。

ただし、Chrome 129 では、同じ HTML と CSS は次のようにレンダリングされます。

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

.container 要素の子に対して包含ブロックは作成されないため、絶対配置された要素は、コンテナーを基準とするのではなく、Web ページを基準にして配置されます。これにより、緑色の四角形がコンテナから完全に脱出し、Web ページの左側に触れることになります。

さらに、新しいスタッキングコンテキストが作成されなかったため、子と兄弟のスタック順序が変更されました。緑色の四角形はまだ下部にありますが、青色の四角形が中央に、赤色の四角形が上部にあります。

変更の理由

Chromium チームの公式 Chromium バグトラッカーによると、これはチームが元の仕様の設計ミスとみなしたものを修正するための意図的な変更でした。

仕様自体はまだ更新されていませんが、チームはワーキンググループ内の合意により、仕様に変更が加えられる前にブラウザの動作を変更しました。

この記事の執筆時点 (2024 年 10 月 3 日) では、他のすべての主要なブラウザ (Firefox、Safari) は依然として Chrome 129 より前の動作に従っています。

変更を緩和する

Chrome 129 以前の状態に復元したいだけの場合 (そしてその間、Chrome の実装に従って Firefox と Safari が更新されるまでブラウザ間の一貫性を維持したい場合)、単に contains:layout; を追加するだけです。コンテナタイプ: inline-size; を持つ要素に。

包含ブロックの動作を追加したいが、新しいスタッキングコンテキストを作成したくない場合は、代わりに、container-type: inline-size; を基準とした location: を追加することもできます。要素。子要素を含むブロックは作成されますが、新しいスタッキングコンテキストは作成されません。ただし、他のブラウザが Chrome に追随するように更新されるまでは、ブラウザごとに動作が異なることになります。

自分で試してみる

以下は、私が上で話していることを実証する、遊べる CodePen です。 .container スタイルから contains: レイアウトを削除し、Chrome 129 以降を使用している場合、レイアウトは上で提供した 2 番目の画像のように表示されます。ただし、Firefox 131 (執筆時点で最新) で CodePen を表示すると、contain: レイアウトが設定されているかどうかに関係なく、同じように表示されるはずです。

Chrome 129 のリリースノートにはこの変更に関する言及が見つかりませんでした。すでに述べたように、この変更は仕様変更に先立って行われたため、私たちは本当に不意を突かれ、レイアウトを大幅に壊してしまいました。弊社の Web アプリの 1 つです。この情報が同じ問題を抱えている他の人の助けになれば幸いです。

以上がChrome の「container-type: inline-size」への予期しない変更による問題の解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。