4 のいくつかの新機能 CSS-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

4 のいくつかの新機能 CSS

DDD

Oct 30, 2024 pm 05:01 PM

この記事では、2024 年のいくつかの新しい CSS 機能について説明します。

私の記事が気に入ったら、コーヒーをおごってください :)
Some new features CSS in 4

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;
    }
  }

ログイン後にコピー

出力 :

Some new features CSS in 4

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;
    }
  }

ログイン後にコピー

出力 :

Some new features CSS in 4

3. :scope疑似クラス

スコープセレクターは、CSS でスタイルのスコープを定義するために使用されます。

使用法 :

:scope が CSS の ルートレベル にある場合、それは :root

例 :

<html></html>

ログイン後にコピー

:scope {
  background-color: orange;
}

ログイン後にコピー

出力 :

Some new features CSS in 4

@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;
    }
  }

ログイン後にコピー

出力 :

Some new features CSS in 4

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;
    }
  }

ログイン後にコピー

出力 :

Some new features CSS in 4