what if Machine：CSSの「iffy」未来を現在にもたらす-CSSチュートリアル-php.cn

The What If Machine: Bringing the

CSSワーキンググループは、インライン条件付きステートメントを作成することを決定しました。一部の開発者はこれに興奮していますが、他の開発者はこれがCSSの未来を不確実にすることを懸念しています。これは、CSSを乱用する開発者で満たされた地獄のような状況に滑り込みます。しない。一部の人々がそうしていても、主流のブログは、自分の目的のためにCSSにクレイジーロジックを追加する仮想の狂人のナンセンスを投稿しません。したがって、CSSの将来は安全であることがわかっています。

世界の終わり？それはずっと前です

この記事の議論は、インラインの条件付きステートメントが文明の終わりの前兆ではない可能性があることをさらに確認します。スタイルクエリを使用して同じ機能を実現できると思います。

Leaの提案は、構文砂糖に似ており、便利な場合があり、よりクリーンなマークアップを可能にします。 CSSを台無しにするインラインの条件付きステートメントに関するパニックの発言は、声明の場合に既にサポートする言語への3成分演算子の追加を誇張することと同等です。

実際には、彼女が提案した構文について次のように述べています。 CSSの条件付きステートメントが禁止されているということではありませんが、CSSが常にそれを扱うのが得意ではないということです。

条件付きoompa loompaが欲しい！

そうです。リーの驚くべき複雑なトリックの慎重に組織されたリストによって証明されるように、他の多くの人がいます。これらのヒントのいくつかは非常に複雑であるため、私がそれらを理解しているかどうかはまだわかりませんが、彼らの名前は本当にクールです。リーは結論付けました：「他のテクニックを知っているなら、私にそれらを追加できるように私に知らせてください。」

うーん...私は間違いなく解決するためのこれらのヒントについてのいくつかの質問を見逃しました。リーが博士号を持っていることに気づき、私はばかだった。だから私はスクロールして再読み返しますが、私は考えるのをやめることはできません：これらの人々は、部品の周りに余分なDIVを追加してスタイルクエリを使用しないようにしようとしていますか？

人々がDOMの不必要な要素を避けたい場合は公平ですが、Leaのヒントリストは、代替案が非常に複雑であることを示しているため、ラッピングDivのスタイルクエリが私たちを連れて行くことができることを試す価値があります。

説得力のある例

Leaの例は、プロンプトボックスに「バリアント」プロパティの設定を中心に展開し、スタイルクエリで彼女が望むものをほとんど実装できることを指摘していますが、この仮定の構文は残念ながら無効です

：

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

ログイン後にコピー

彼女は、-variantに従ってコンテナ自体とその子要素をスタイリングしたいと考えています。この具体的な例では、Z-Indexを使用して::擬似要素の後に変更して、コンテナであるという幻想を作成できます。それから私はその境界と背景を設定することができます。残念ながら、このソリューションは私と同じくらい脆弱です。この他の例では、Leaはバリアントに基づいてコンテナのフレックスフローを設定したいと考えています。この場合、私の擬似要素ソリューションは十分ではありません。

覚えておいてください、リーの提案はCSS規範に組み込まれたことを忘れないでください。宇宙が彼女に与えた誕生日プレゼントのように、彼女の贈り物をTemuで購入した安い偽の容器に置き換えようとするのは不公平です。彼女は本当の容器に値します。

もう一度やり直しましょう。
ラッパーを使用して

Lea Proposalのコメントはタイプの研削に言及していますが、「非常に（もう一度、非常に）複雑であるが効果的な方法」と呼んでいます。これは公平ではありません。タイプの研削には少し時間がかかりましたが、他のヒントよりも理解しやすく、欠点が少ないと思います。それにもかかわらず、この種の制作中のコードは、例を見ると退屈になる可能性があります。それでは、歯を磨き、LeaのFlexboxバリアントの例の代替バージョンを作成してみましょう。私のバージョンでは、タイプの研削やトリックを使用しませんが、「昔ながらの」（それほど古風ではない）スタイルのクエリを使用し、スタイルクエリを使用してコンテナ自体をスタイリングできない問題を解決するためにDivをラッピングします。

パッケージングの比較タイプ粉砕

Leaの例を私のバージョンのコードと比較して、複雑さの違いを理解するのに役立ちます。

以下は、CSSの2つのバージョンです
以下は、タグの2つのバージョンです：
したがって、
よりシンプルなCSSとわずかにマークアップ。たぶん私たちは方向を見つけました。

スタイルクエリが好きな理由は、Leaの提案がStyle（）関数を使用しているため、ブラウザによって提案が採用されている場合、スタイルクエリをインライン条件ステートメントに移行してラッパーを削除することが可能であるように思われます。この種のコードを移行することがAIの実行可能なユースケースである可能性があることに言及しない場合、この投稿は2025年の記事ではありません。たぶん、AIはインライン条件付きステートメントを取得した場合、それほど悪くないでしょう。

しかし、私たちは少し話題から外れていました。 To Doの例でエレガントに見えるクールなJavaScriptフレームワークを採用してみましたか？どちらかといえば、単純な例で説得力があるように見えるソリューションは、実際の例で生き残るためにあなたの意志に挑戦するかもしれないことを知っているでしょう。それでは、より現実的な例で、スタイルクエリでそれがどれほど効果的に機能するかを見てみましょう。

検証を求めています

上記の例を、HTML5検証に関するMDNの例と、純粋なCSSアイコンを変換するSeth Jefferyのクールなデモを組み合わせて、次のデモのためにすべてを「what if」マシンに入力します。

フォームを有効にすると、プロンプトボックスに加えられたすべての変更はカスタムプロパティに基づいています。このプロパティは、プロンプトボックスのCSSプロパティ値で直接使用されることはありませんが、プロンプトボックスのボーダー色、アイコン、背景色、コンテンツを設定するスタイルクエリを制御します。 .callout-wrapperレベルに-variantプロパティを設定します。次のようにCSSを使用してセットアップします：

<code>.callout { @container (style(--variant: success)) { border-color: var(--color-success-30); background-color: var(--color-success-95); &::before { content: var(--icon-success); color: var(--color-success-05); } } }</code>
ログイン後にコピー
ログイン後にコピー
ただし、この変数は、Leaの例と同じように、JavaScriptまたはHTMLのインラインスタイルによって設定できます。フォーム検証は、デモをよりインタラクティブにして、-variantに基づいて動的に変更できるプロンプトボックスを表示する方法です。

要約

私は私の意志に合わせてCSSを曲げるというテクニックに反して記事を書きます。ただし、ラッパーとスタイルクエリを使用することは、インライン条件ステートメントのサポートを得るための最も簡単な方法かもしれません。将来の生活のように感じたい場合は、上記のアプローチをインライン条件ステートメントのポリフィルの基礎として使用できます。リーは、「スタイルクエリで何かをすることができれば、好きなだけスタイルクエリを使用してください。それらはほぼ間違いなくより良い解決策です。」この記事の実験を通して、私はスタイルクエリがまだLeaの場合でも良い選択であると確信していますが、インラインの条件付きステートメントをまだ楽しみにしています。一方、スタイルクエリは、少なくとも他の既知のソリューションと比較して理解しやすいです。皮肉なことに、私は、CSSを台無しにするからではなく、トリックなしで現代のCSSでLEAを実装できると信じているため、インライン条件の声明の要件に疑問を投げかけるコメントに同意します。したがって、インラインの条件ステートメントは必要ないかもしれませんが、より読みやすく、より簡潔なコードを書くことができます。インライン条件付きステートメントの代わりにスタイルクエリを使用して遭遇できる複雑さの障壁の例をいくつか考えることができれば、コメントセクションでお知らせください。

以上がwhat if Machine：CSSの「iffy」未来を現在にもたらすの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。