カスケード層-CSSチュートリアル-php.cn

カスケード層

Joseph Gordon-Levitt

リリース： 2025-03-19 10:22:16

オリジナル

823 人が閲覧しました

CSSの新しいメンバー：@layer

CSSフィールド@layerに新しい機能が登場しました。これは、CSSの開発に影響を与える上で重要な役割を果たしたミリアム・スザンヌのおかげです。以前にこの機能を聞いたことがありますが、実験的なブラウザでポップアップします。

Bramusは、この機能を詳細に調査する素晴らしい記事を書きました。

@layerの出現により、米国の開発者は、カスケードスタイルのシートを制御するためのより多くのツールを提供します。 @layerの本当に強力なのは、セレクターの特異性と発生順序の前に、カスケードスタイルのシートにおける独自の位置です。このため、他のレイヤーで使用されるCSSのセレクターの特異性や、CSSがこれらのレイヤーにロードされる順序について心配する必要はありません。これは、大規模なチームやサードパーティのCSSをロードする場合に非常に役立ちます。

Bramus van Damme 、「CSSの未来：レイヤー（CSS@レイヤー）*」

（大胆な部分は元のテキストで強調されています）

重要なのは、これがセレクターの優先度に影響する新機能です。 @layer 、実際のアプリケーションのスタイルを決定するまったく新しい（そして強力な）メカニズムであるため、CSSの理解を再調整する必要があります。

「高層」スタイルは、その層のセレクターが自分自身が弱い場合でも、「高層」スタイルが伝統的に強力なセレクターを打ち負かすことができるため、強力だと言います。

 /* 1階*/
@layer base-layer {
  ボディ＃foo {
    背景：Tan;
  }
}
/*セレクターが弱い場合でも、より高いレベル、したがって勝ちます*/
@layer theme-layer {
  body.foo {
    背景：#eee;
  }
}

/* 知らせ！解雇されたスタイルは、セレクターが弱い場合でも、階層化されたスタイルよりも強力です*/
体 {
  背景：赤;
}

ログイン後にコピー

CSSの下部セグメントは層にまったく配置されていないため、セレクターが弱い場合でも勝ちます。

そして、あなたは1つのレベルに限定されません。必要に応じて定義して使用できます。

 @layer reset;*「リセット」と呼ばれる最初のレイヤーを作成します
@layer base;*「ベース」という名前の2番目のレイヤーを作成します
@layerテーマ;*「テーマ」という名前の3番目のレイヤーを作成します
@layerユーティリティ;*「ユーティリティ」と呼ばれる第4層を作成します
/ *または、@layerリセット、ベース、テーマ、ユーティリティ。


@layer reset { /*「リセット」という名前のレイヤーに追加されます* /
  / * ... */
}

@layerテーマ{ /*「テーマ」という名前のレイヤーに追加されます* /
  / * ... */
}

@layer base { /*「base」という名前のレイヤーに追加されます* /
  / * ... */
}

@layerテーマ{ /*「テーマ」という名前のレイヤーに追加されます* /
  / * ... */
}

ログイン後にコピー

これは本当に衝撃的です。

どのように使用しますか？

共通のパターンがなるのだろうか...

優先度が非常に明確になるように、すべてを重ねます。おそらく、非常に強力なカバレッジのために、Unlayed CSSのみが許可されていますが、理想的には、そうすることでさえ高レベルの層であるはずです。
最低レベルとしてリセット。
サードパーティのコンテンツを中間層として使用します。
チームがトップレベルとして書くものは何でも取り上げます。

z-indexを使用する場合のように、レイヤー間にスペースを残すことを心配する必要はありません。これは、数字を接続せずにいつでも調整できるためです。

時間がわかります。