CSSの進化を目撃して、私たちはCSSの歴史の中で最もエキサイティングなイノベーション期間の1つにあるようです。すべてのブラウザーがFlexBoxをサポートし、すぐに再びグリッドをサポートしていたとき、それは本当にエキサイティングでした。彼らはCSSを完全に変換し、もはや不器用なトリックのコレクションではなく、より合理的で、より合理的であり、時代の傾向に沿っています。
この感覚はより強く、強くなっています。つい最近、次のことが起こりました。
最終的にリリースされた構文は、次のコードスニペットとわずかに異なる場合があります。 ？
ネイティブネスティングは最初の公開ドラフトになりました。つまり、現実になることはこれまで以上に近いことを意味します。多くの人々は、営巣の利便性のためだけに前処理者を使用しています。これは、これを回避するために構築ツールを簡素化したい人に役立つはずです。
私は特に条件付きルールをネストする方法が好きです。
<code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>この実行可能なソリューションについての噂を聞いたことがあります。これは、単純なセレクターの必要性を回避し、@nestを完全に回避します。
<code>.card {{ .title { } .body { } body.dark & { } }}</code>コンテナクエリは現在、編集者ドラフト（CSS封じ込めモジュールレベル3）にすぎませんが、既にChromeに実装されています（フラグを有効にする必要があります）。コンテナ自体のサイズに基づいてスタイルの決定を下すことができるため、彼らは非常に理にかなっています。これは、今日のコンポーネント主導の世界で非常に良いアイデアです。
簡単なサンプルサイトのコードをご覧ください（Chromeに有効なフラグがない場合、奇妙に見えるかもしれません）。
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>コンテナユニットには、私にとってコンテナクエリの実用性をほぼ2倍にするというドラフト仕様もあります。アイデアは、コンテナサイズ（幅、高さ、または「インラインサイズ」/「ブロックサイズ」）に基づいたユニットがあるということです。 QIユニットが最も便利だと思います。
うまくいけば、すぐに、私たち自身のサイズに基づいてスタイルを整え、他の内部プロパティで使用するためにそのサイズを渡すことができるコンテナ全体のCSSを書きます。フォントサイズのプロパティは、単純な実用的な例（コンテナスケーリングされたサイズに基づくフォント）ですが、コンテナユニットは、ギャップ、パディング、その他の多くの目的などのさまざまな目的に使用されると思います。
<code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>カスケード層（作業ドラフト仕様）は、カスケードでCSSセレクターの勝者を決定するためのまったく新しいパラダイムを紹介します。現在、それは主に特定の競争です。最高の特異性を持つセレクターが勝ち、重要な条項を持つインラインスタイルと特定のルールのみがそれを上回ることができます。しかし、レイヤーを使用すると、高レイヤーの一致するセレクターが勝ちます。
<code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>Tab Atkinsによって提案された/Elseルールが受け入れられたCSSは、@mediaと@supportsのクエリを表現する方法であり、他の状態をより簡単に表現できます。メディアクエリにはすでにいくつかの論理機能がありますが、相互に排他的なクエリを表現することは長い間困難であるため、非常に簡単です。
<code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>スコープスタイル（ドラフトエディター）のアイデアは、セレクターブロックと内部にのみ適用されるスタイルを作成するための構文を提供しますが、スコープを停止する能力を持ち、スコープループを作成することです。
私の好きなのは、「近接」の強度のものです。ミリアムはこのように説明します：
<code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code><code><div>
<a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">梅</a>
<div>
<a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">多分それは梅ですか？ ？ ？</a>
</div>
</div></code>右？ ！ .light-Themeでリンクを勝ち取ることをどれだけ近づけるかを表現する良い方法はありません。現在、両方のトピックの特異性は同じですが、.dark -themeは背後にあります - それは勝ちます。スコープスタイルもこの問題を解決できることを願っています。
<code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code> <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>現在、このリストからは本番ウェブサイトで何も使用できません。この種のことを何年も追いかけようとした後、私はまだこれがどうやって行くのかわかりません。仕様を最初に完了して合意する必要があると思います。その後、ブラウザはそれらを選択して、複数のものを期待しています。彼らがそれらを持っていると、仕様を確定できると思いますか？
わからない。たぶんそれらのいくつかは消えます。たぶんそれらのいくつかは非常に速く起こるでしょうが、他のものは非常に遅くなるでしょう。おそらく、それらのいくつかはいくつかのブラウザに表示され、他のブラウザーではありません。ねえ、少なくとも私たちは今やEvergreenブラウザを持っているので、物事が起こったとき、それは非常に迅速に起こります。私たちは現在、最大かつ最高のCSS機能のほとんどがすべてのブラウザーによってサポートされている段階にいると感じていますが、このすべてが来ると、最新のテクノロジーのより断片化された段階になります。
以上がCSSはゴーシュダルドホッグワイルドに行きます、私はyaに何を言いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
