新しい CSS で作業が楽になります

このガイドの目的は、CSS に最近導入された革新的で強力な機能のコレクションを紹介することです。この記事では、その構文と実際の使用例の概要を説明しますが、各機能についてさらに詳しく調べる必要があります。これを出発点として使用して、これらの最先端の進歩をさらに深く掘り下げてください。

1.コンテナクエリ (サイズ)

サイズベースのコンテナクエリとは何ですか?

サイズベースのコンテナ クエリを使用すると、従来のメディア クエリのようにビューポート全体のサイズに依存するのではなく、親コンテナの寸法に基づいて子要素にスタイルを適用できます。

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

なぜこれが重要なのでしょうか?

これにより、「CSS ミックスイン」の概念が実現します。 Sass ミックスインが保守性を向上させるのと同じように、スタイルベースのコンテナ クエリは CSS のネイティブ機能を拡張し、カスケードを考慮して柔軟性を高めます。

ブラウザのサポート:

• サポート対象: Chrome および派生製品。

• 近日公開予定: Safari。

• サポートされていない: Firefox。

• 機能強化: 限定的です。

• ポリフィル: 利用できません。

3.コンテナユニット

コンテナユニットとは何ですか?

コンテナ ユニットは、ビューポートではなくコンテナのサイズに基づいて寸法を計算する、応答性の高い測定単位 (cqw、cqh、cqmin、cqmax など) です。これらは vw (ビューポート幅の 1%) と同様に機能しますが、スコープはコンテナーに限定されます。

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

なぜこれが重要なのでしょうか?

内部要素を親コンテナに比例して拡大縮小する必要がある場合、コンテナ ユニットはクリーンな CSS のみのソリューションを提供します。一般的な使用例は、カードまたはモジュラー コンポーネント内のタイポグラフィーやスペースを拡大縮小することです。

ブラウザのサポート:

• フルサポート: 最新のブラウザ。

• 機能拡張: はい、フォールバックあり。

• ポリフィル: 利用可能。

4. :has() 擬似セレクター

:has() セレクターとは何ですか?

:has() 疑似クラスを使用すると、親要素内の特定の子要素の存在に基づいて親要素のスタイルを設定できます。

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

なぜこれが重要なのでしょうか?

:has() セレクターは CSS の「親セレクター」として効果的に機能し、子に基づいて親のスタイルを設定できるようにします。たとえば、:has() を使用すると、エラー メッセージが存在する場合にのみ親フォーム フィールドを強調表示できます。

ブラウザのサポート:

• サポート対象: すべての主要なブラウザ。

• ポリフィル: JavaScript のみ。

*5.遷移を表示
*
ビュー遷移とは何ですか?

この機能では 2 種類のアニメーションが導入されています:

1. 単一ページの遷移 (JavaScript が必要)。

2. 複数ページの遷移 (CSS のみ)。
   

<div>



<p><strong>Why Does This Matter?</strong></p>

<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>

<p>Browser Support:</p>

<p>• Full Support: Modern browsers.</p>

<p>• Enhancements: Yes, if non-critical styles depend on it.</p>

<p><strong>2. Container Queries (Style)</strong></p>

<p>What Are Style-Based Container Queries?</p>

<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>

<pre class="brush:php;toolbar:false">.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* Apply styles when --variant is 1 */ }
}

@container style(--variant: 2) {
  .button { /* Apply styles when --variant is 2 */ }
}

*なぜこれが重要なのでしょうか?
*
トランジションは、状態の変化中に要素をアニメーション化することでユーザー エクスペリエンスを向上させ、インタラクションをよりスムーズに感じさせます。これらは、各ステップを手動で定義することなく、アニメーションが開始状態と終了状態の間を補間する「トゥイーン」を使用します。

ブラウザのサポート:

• サポート対象: Chrome および派生製品。

• サポート対象外: Safari、Firefox。

• 機能強化: はい、フォールバック アニメーションを使用できます。

6.ネスティング

ネストとは何ですか?

CSS のネストにより、親ルール内に子セレクターを記述できるため、コードがよりクリーンになり、保守しやすくなります。

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

なぜこれが重要なのでしょうか?

ネストすると CSS の冗長性が減り、関連するスタイルがグループ化されます。ただし、これを使いすぎると、セレクターが過度に限定され、再利用性が低下する可能性があります。

ブラウザのサポート:

• フルサポート: 最新のブラウザ。

7.スクロール駆動のアニメーション

スクロール駆動のアニメーションとは何ですか?

これらのアニメーションはスクロールに関連付けられており、JavaScript に依存せずに CSS を使用して実装できます。

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

なぜこれが重要なのでしょうか?

進行状況インジケーターから視差効果に至るまで、スクロール駆動のアニメーションにより対話性が向上し、パフォーマンスが重要なタスクでの JavaScript への依存が軽減されます。

ブラウザのサポート:

• サポート: Chrome。

• 近日公開予定: Firefox。

8.サブグリッド

サブグリッドとは何ですか?

サブグリッド値を使用すると、グリッド定義を複製することなく、子グリッド項目を親グリッドの行または列に揃えることができます。

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

なぜこれが重要なのでしょうか?

サブグリッドは、ネストされたグリッド構造全体で一貫した位置合わせを保証し、複雑なレイアウトの保守を容易にします。

ブラウザのサポート:

• フルサポート: すべての最新ブラウザ

最終的な考え

CSS はエキサイティングなペースで進化し続けています。コンテナー クエリ、ビュー遷移、サブグリッドなどの機能により、この言語は最新の Web 開発にとってより堅牢かつ直感的になります。相対色の構文、スコープ指定された CSS、さらに大きなデザインの可能性を約束する のような新しい HTML 要素など、今後の開発に注目してください。

以上が新しい CSS で作業が楽になりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。