ホームページ > 記事 > ウェブフロントエンド > 4 のいくつかの新機能 CSS
4 のいくつかの新機能 CSS
- DDDオリジナル
- 2024-10-30 17:01:02834ブラウズ
この記事では、2024 年のいくつかの新しい CSS 機能について説明します。
私の記事が気に入ったら、コーヒーをおごってください :)
1. CSSコンテナクエリ
コンテナ クエリを使用すると、アイテムのコンテナのサイズに応じてアイテムにスタイルを適用できます。コンテナ クエリはメディア クエリと同様に機能します。
コンテナクエリの使用
コンテナ クエリを使用すると、サイズに応じて親要素内の子要素のスタイルを動的に調整できます。
これを行うには、まず、親要素のコンテナ コンテキストを定義する必要があります。これは、container-type プロパティで指定します。
コンテナタイプ: サイズ;に設定すると、幅と高さの両方の値でクエリを実行できます。
コンテナタイプ: インラインサイズ;に設定すると、幅 (水平方向の寸法) のみに対してクエリが実行されます。
この機能のおかげで、子要素のスタイル プロパティを親要素のサイズに応じて変更できます。
例 :
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
.post {
container-type: size;
}
.card h2 {
font-size: 1em;
color: blue;
}
@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}
出力 :
2. CSSのネスト
CSS ネスト を使用すると、あるルールを別のルールの中に配置できます。これは、コンテキスト依存のスタイルを管理する場合に特に便利です。たとえば、.container クラスがあり、その .item 要素のスタイルを設定したい場合、.container ルール内に直接 .item ルールを記述することができます。 CSS ネストはブラウザによって直接解析されます。 これは、ネストされたルールをコンパイルするためにプリプロセッサが必要ないことを意味します。これらはブラウザでネイティブに動作します。
例 :
<form>
<label for="name">Name:
<input type="text" id="name" />
</label>
<label for="surname">Surname:</label>
<input type="text" id="surname" />
</form>
input {
border: red 2px solid;
}
label {
font-family: system-ui;
font-size: 1.25rem;
& input {
border: purple 2px solid;
}
}
出力 :
3. :scope疑似クラス
スコープ セレクターは、CSS でスタイルのスコープを定義するために使用されます。
使用法 :
- :scope が CSS の ルート レベル にある場合、それは :root と同等です。
例 :
<html></html>
:scope {
background-color: orange;
}
出力 :
- @scope ブロック内で :scope を使用すると、クラス名で定義されたコンテキストに基づいて、明確で的を絞ったスタイルを設定できます。
例 :
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
.post {
container-type: size;
}
.card h2 {
font-size: 1em;
color: blue;
}
@container (min-width: 700px) {
.card h2 {
font-size: 5em;
color: purple;
}
}
出力 :
4. :has() 擬似クラス
CSS の :has() セレクターを使用すると、特定の 子要素が含まれる場合に、親要素のスタイルを設定できます。
例 :
<form>
<label for="name">Name:
<input type="text" id="name" />
</label>
<label for="surname">Surname:</label>
<input type="text" id="surname" />
</form>
input {
border: red 2px solid;
}
label {
font-family: system-ui;
font-size: 1.25rem;
& input {
border: purple 2px solid;
}
}
出力 :
5. 色の関数
color-mix() や color-contrast() などの新しいカラー関数を使用して、色
のトーンとコントラストをより詳細に制御できます。例 :
<html></html>
6. アンカーの位置決め
CSS アンカー配置モジュールは、要素を結合できる機能を定義します。特定の要素はアンカー要素として定義されます。アンカー位置に配置された要素は、バインド先のアンカー要素のサイズと位置に基づいてサイズと位置を設定できます。
結論
この記事では、2024 年の新機能 CSS についていくつか説明しました。この機能はアプリで使用できます。
以上が4 のいくつかの新機能 CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。