12 月に Abet で、CSS ネスティングの 3 つの異なる選択肢 について詳しく説明した記事 を書きました。 その中で、オプション 3、オプション 4、およびオプション 5 のバリエーションの概要を説明し、一連の例を通じてそれぞれがどのように機能するかを示しました。 次に、簡単な質問をしました。「CSS の将来にとって最も効率的な選択肢はどれですか?」
Web 開発者は、非常に明確に投票に答えました。 オプション 3 が地滑り的に得られました。
そして今、Safari と Chrome の両方 がオプション 3 を実行しました。数週間前の 1 月 25 日、CSS Nesting が Safari Expertise Preview 162 で出荷されました。 、デフォルトでオン。 それに加えて、Mac を負担する必要があります。単に 取得して Safari Expertise Preview を配信し、ネストされた CSS をいくつか記述し、それが実現する仕組みを体験してください。 CSS ネスティングのしくみ
想像してみてください。さらにコンパクトな方法で書き留めるために盗むいくつかの CSS を追加します。
.foo { 色： 緑; } .foo .bar { フォント寸法: 1.4 )レム; } CSS ネスティングでは、
のようなコードを追加で書く必要があります。 .foo { 色: 緑 ; 。バー { フォント寸法: 1.4レム; } } あなたに持っている' Sass
でスタイルをネストしてきました。 ) 一方、Sass とは異なり、この種の入れ子は常に機能するわけではありません。 ブラウザーの解析エンジンの障害のおかげで、ネストされたセレクター (
.bar を確認するためにさらに負担する必要があります。 上記の例では) 常に画像で始まります。 クラス、ID、疑似クラス、疑似パーツ、属性セレクター、または開始時に画像を使用するセレクターであれば、成功です。 たとえば、それらはすべて正直である可能性があります。 以下のネストされたセレクターの合計は、画像で始まります — . # : { ... } { ... } + 記事 { .. . }> p { ... } ~ 選考科目 { ... } } 文字で始まるセレクターが 1 種類ある可能性があります。ネストされたパーツ セレクター。 この状況は現在うまくいきません:
選考科目 { 記事 { ... } } そのコードは失敗します。なぜなら article は文字で始まり、決してイメージではありません。 どのように失敗しますか？
article を atirlce。 その人物セレクターに依存するネストされた CSS は単純に渡されます
おそらく、この制限について何を合計するかについて、いくつかの代替選択肢を負担することになるでしょう。 ほとんどの場合、おそらく最も頻繁に使用することを確認することから始めましょう。 次のように、パーツセレクターの前に & を配置するだけです。これ：
メジャー { & 記事 { ... } }
& ブラウザへのインジケータ「ここに、セレクターを配信エアからこの巣を後退させたい」と表示します。 パーツ セレクターの前に & を使用すると、文字ではなく、画像を含むネストされたセレクター。 したがって、これはうまくいく可能性があります. 離れて { & p { ... } } は と同じようにネストされています。 離れて p { ... }
の & は、さまざまなユースケースで使用するのにも最適です.
想像してみてください。このネストされていないコードを追加する必要があります:
ul { )左パディング: 1em; } 。材料 ul { 左パディング: 0 ; } あなたはそれを垣間見るでしょう想定されるセレクターは .ingredient ul — を入れますul は 2d. と書く追加で記述する必要がある結果の種類を生成するネストされたソリューション:
ウル { 左パディング: 1em; 。材料 ＆ { 左パディング: 0; } }
もう一度、
& は、「これが私が望むプットです」と断言する選択肢を提示します。 また、セレクター間のスキームを望まない場合にも使用します。 例えば：
a { 色： 青; &: 木材 { 色: 水色 ; } } このようなコードは、
a:材木 { と同じ結果になります。 & がなければ a :lumber { — の間のスキームを垣間見るa と :木材 — これでは材木のハイパーリンクのスタイルを設定できません。 それにもかかわらず、このネストされていないコードを追加で保持する必要がある場合はどうすればよいでしょうか?
ul { 左パディング: 1em ; } 記事 ul { 左パディング : 0; } 終了しました ネストされたものを書き留める必要はありませんこのようなバージョン: ul { 左パディング: 1em ; ＆ 記事 ＆ { 左パディング: 0; } } どうして今じゃないの？ これは、これらのネストされていないソリューションと同じように動作するためです:
ul { 左パディング: 1em; } ウル 記事 ul { 左パディング : 0; } ( 内の 2 つの順不同リストul記事ul? いいえ、それは今私たちが望むものではありません. article & with a image?
コードは次のように記述できます:
ul { 左パディング: 1em ; ： は(記事) & { 左パディング: 0 ; } } どのセレクターでもかまいません:is() 疑似クラスと同じ特異性とそのアプローチを保持します (必要な簡単なセレクターの 1 つである場合は括弧内)。 成分セレクターの内部に
:is() を入れて、起動する
抽象的に言えば、CSS ネスティングは Sass のように正確に動作しますが、新しいルールが 1 つあります。ネストされたセレクターが常に画像で始まることを確認してください。 制限はさらに完全に削除される可能性があります — ある時点で非常に急速に、または数年かかる. 誰もが同じ意見です。ネスティングは、そのような制限がなければ非常に優れている可能性があります。 それにもかかわらず、オンラインページ は にする必要があることにも同意します。 は、現在のブラウザ ウィンドウに表示されます。 レンダリングを開始する前に、わずかな仕上げを含めることはもはや選択肢ではありません.
選択肢は何ですか? 一方、ネストされたコードを構築する準備が整いました。 必要な数の段階で、1 レイヤーよりも大きなネスト (既にネストされた CSS の内側の CSS) をネストする必要があること。 一方、ネスティングをコンテナ クエリ、機能クエリ、メディア クエリ、および/またはカスケード レイヤーと組み合わせる必要があること。
CSS Nesting を現時点で試してみて、あなたの仮定を尊重してください。 (「Experimental Web Platform facets」フラグを反転した後) Safari Expertise Preview と Chrome Dev の両方でコードをテストして、同じ結果が得られることを確認します。 これは、バグを取得するのに必要な簡単な時間の 1 つです — この新しい特性がどのブラウザーでも出荷される前です。 bugs.webkit.org または でポイントをファイルする必要があることbugs.chromium.org. また、テイク イン ナラティブ アウトを次のいくつかのバリエーションのローンチ ノートに追加してくださいSafari Expertise Preview の の取り組み と組み合わせて、CSS ネスティングの実装をさらに洗練させることができます。 CSSOM の機能強化や、CSS ワーキング コミュニティによって行われた可能性のある仕様変更を調べるためのさまざまな更新を追加します。フェア約5年。 構文は熱く議論されており、多くの代替選択肢の長所と短所についての長い会話があります。 プライスレスな仕上がりをぜひご覧ください
