CSS @property を使うことで、ネストしたコンテナーでの相対値利用を柔軟に
公開:
更新:
CSS コンテナーコンテキストをネストしていると、下位要素に直近のコンテナーより上位のコンテナーを基準とした値（例えば、コンテナーの幅に対する相対値 cqw など）を設定したいときに、素直にはできません。
以下の例だと、div#HAM に cqw 単位によって body コンテナー基準の幅を設定しようとすると、div#SPAM に捕まってしまい、上手くいきません。
<body style="container-type:inline-size">
<div id="SPAM " style="container-type:inline-size; margin: 30px;">
SPAM
<div id="HAM" style="width: ?? 100cqw ??">HAM</div>
</div>
</body>
そこで、CSS @property を使って独自プロパティに値を待避させてやると、別のコンテナーコンテキストをジャンプして、値を伝播させることができます。
<body style="container-type: inline-size">
<div id="SPAM" style="container-type: inline-size; margin: 30px; --props-width: 100cqw;">
SPAM
<div id="HAM" style="width: var(--props-width);">HAM</div>
</div>
</body>
@property --props-width {
syntax: "<length>";
initial-value: 0px;
inherits: true;
}
2024 年現在だと、CSS @property のブラウザ対応は限定的であることにはご注意ください。