CSS表示：コンテンツの使い方は？

display:contents は比較的馴染みのないプロパティです。display は基本的に最も一般的な CSS プロパティですが、contents の値が使用されることはほとんどありません。ただし、Firefox では 2016 年からサポートされています。

この記事では、この興味深い属性値について詳しく説明します。

基本的な使用法

W3C の表示の定義によると、コンテンツです。

要素自体はボックスを生成しませんが、その子と疑似要素は引き続きボックスを生成し、テキストは通常​​どおり実行されます。ボックスの生成とレイアウトの目的では、要素は次のように扱われる必要があります。要素ツリー内でその内容 (ソースドキュメントの子と、通常のように要素の子の前後に生成される ::before および ::after 擬似要素などの擬似要素の両方を含む) によって置き換えられていました。 .

単純に解釈すると、この属性値が設定された要素自体はボックスを生成しませんが、その子孫要素の通常の表示は維持されることを意味します。

簡単な例を見てみましょう。次のような単純な 3 層構造があります。

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>

単純な CSS は次のとおりです。

.container {
    width: 200px;
    height: 200px;
    background: #bbb;
}
.wrap {
    border: 2px solid red;
    padding: 20px;
    box-sizing: border-box;
}
.inner {
    border: 2px solid green;
    padding: 20px;
    box-sizing: border-box;
}

パフォーマンスは次のとおりです。

##非常にわかりやすいのですが、中間層のコンテナにdisplay:contentsを追加してその効果を見ると、

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>

ということがわかります。中間層の境界線はありません: 2px 赤一色 赤い境界線があるため、.wrap div 全体が存在しないように見えますが、その子要素は正常にレンダリングされます。

重要な点は、display:contents が設定された要素自体は描画されませんが、その子要素は通常どおり描画できるということです。

私は、この属性の非常に適切な使用点は何かについて考えてきました。

要約すると、この属性はラッパーとして機能する一部のレイアウト シナリオに適しています。これらの要素自体は効果がなく、無視できます。

セマンティックのないラッピング ボックスとして機能します

私が最近 React と Vue を書いていたとき、JSX を書くときにこの属性が非常に良い役割を果たすことができることに気付きました。この属性自体の位置付けと一致しており、非常に便利です。

React や RN を書くときは、テンプレートを出力する必要があることがよくあります。

return (
    <div class="wrap">
        <h2 id="Title">Title</h2>
        <div>...</div>
    </div>
)

.wrap div 内のコンテンツを出力したいだけですが、フレームワークの要件により、出力された JSX テンプレートは親要素の下に含める必要があるため、最後の手段として .wrap div を追加する必要があります。ラッピングには「wrap」を使用しますが、この「wrap」自体にはスタイルがありません。

出力要素を他のdisplay:flex、display:gridコンテナの下に配置する場合、意味のない.wrapのレイヤーを追加した後、全体のレイアウトを再調整する必要があり面倒です。

1 つの方法は、フレームワークによって提供されるコンテナ を使用することで、ページに余分なノードを挿入しません。

Vue の同様のものは、