レイヴンテクニック：コンテナクエリに一歩近づきます

CSSコンテナクエリ用のカラスのヒント：コンテナクエリに近い

もう一度強調します：CSSではコンテナクエリが必要です！私たちはこの方向に向かっているようです。

Webサイトコンポーネントを構築するとき、コンポーネントがどのように使用されるかを常に知っているとは限りません。ブラウザウィンドウと同じ幅がある場合があります。たぶん、2つのコンポーネントが並んで配置されています。多分それは狭い列にあります。コンポーネントの幅は、ブラウザウィンドウの幅に常に関連するとは限りません。

通常、コンテナベースのCSSコンポーネントを使用してクエリするのが非常に便利です。オンラインでソリューションを検索すると、いくつかのJavaScriptベースのソリューションが見つかる場合があります。しかし、これらのソリューションには、追加の依存関係、JavaScriptが必要とするスタイル、および汚染されたアプリケーションロジックと設計ロジックなどのコストがかかります。

私は懸念の分離を固く信じており、レイアウトはCSSの焦点です。たとえば、IntersectionObserver APIは優れていますが、CSSの:in-viewportようなものが欲しいです！そこで、私はCSSのみのソリューションを探し続け、ヘイドンピカリングの「Flexbox Holy Albatross」を見つけました。これは列に適したソリューションですが、もっと欲しいです。オリジナルのアルバトロスにはいくつかの改善があります（「非acredアルバトロス」など）が、まだ少し不器用であり、起こることはすべて列間スイッチです。

私はまだもっと欲しい！実際のコンテナクエリに近づきたいです！それで、CSSは私が使用できるものを何を提供していますか？私は数学の背景を持っているので、 calc() 、 min() 、 max() 、 clamp()などの関数は私が好きで理解しているものです。

次：それらを使用して、コンテナクエリのようなソリューションを構築します。

目次：

1. なぜ「カラス」なのか？
2. CSSの数学機能
3. ステップ1：構成変数を作成します
4. ステップ2：インジケータ変数を作成します
5. ステップ3：インジケータ変数を使用して、間隔値を選択します
6. ステップ4： min()と巨大な整数を使用して、任意の長さの値を選択します
7. ステップ5：すべてをまとめます
8. 他の？
9. 高さはどこですか？
10. コンテンツを表示して隠すのはどうですか？
11. キーポイント
12. 追加コンテンツ
13. 最後の考え

読み続ける前に何が達成されるかを見たいですか？これは、この記事で議論されているアイデアが達成できることを示すCodepenコレクションです。

なぜ「カラス」なのか？

この作品はヘイドンのアルバトロスに触発されましたが、このテクニックはもっとトリックを行うことができるので、カラスは非常に賢い鳥だからカラスを選びました。

レビュー：CSSの数学機能

calc()関数は、CSSでの数学操作を可能にします。さらに、ユニットを組み合わせることができるため、 calc(100vw - 300px)などの操作が可能です。

min()およびmax()関数は2つ以上のパラメーターを取り、最小または最大パラメーターを（それぞれ）返します。

clamp()関数は非常に便利で、 min()とmax()の組み合わせに似ています。関数clamp(a, x, b)が戻ります。

• xがa未満の場合は、 aを返します
• xがbより大きい場合は、 bを返します
• xがaとbの間にある場合、 xが返されます

したがって、それは一種のclamp(最小值, 相对值, 最大值) 。それはmin(max(a,x),b)の略語と見なすことができます。詳細を知りたい場合は、これについての詳細を以下に示します。

また、この記事であるCSSカスタムプロパティで、別のCSSツールを広範囲に使用します。これらは--color: red;または--distance: 20px;それは本質的に変数です。それらを使用して、自分自身の過度の重複を避けるなど、CSSをより簡潔にします。

このカラスのトリックを使い始めましょう。

ステップ1：構成変数を作成します

設定するCSSカスタムプロパティを作成しましょう。

クエリに基づいてどのような基本的なサイズが必要ですか？コンテナクエリの動作を探しているので、これは100％になります。100VWを使用すると、メディアクエリのように動作するようになります。これは、コンテナではなくブラウザウィンドウの幅であるためです。

 <code>--base_size: 100%;</code>

それでは、ブレークポイントを考えてみましょう。文字通りコンテナの幅を意味します。新しいスタイルを適用するためにここで壊れたいと考えています。

 <code>--breakpoint_wide: 1500px; /* 大于1500px 将被视为宽*/ --breakpoint_medium: 800px; /* 从801px 到1500px 将被视为中等*/ /* 小于或等于800px 将被视为小*/</code>

実行中の例では、3つの間隔を使用しますが、この手法には制限はありません。

次に、ブレークポイントで定義する間隔で返されるいくつかの（CSS長）値を定義しましょう。これらは文字通りの値です：

 <code>--length_4_small: calc((100% / 1) - 10px); /* 根据你的需求更改*/ --length_4_medium: calc((100% / 2) - 10px); /* 根据你的需求更改*/ --length_4_wide: calc((100% / 3) - 10px); /* 根据你的需求更改*/</code>

これが構成です。使ってみましょう！

ステップ2：インジケータ変数を作成します

間隔のインジケータ変数をいくつか作成します。それらはブールンに少し似ていますが、長さの単位（0pxと1px）があります。これらの長さを最小値と最大値として制限する場合、それらは一種の「真」および「偽」インジケーターとして機能します。

したがって、-base_sizeが-breakpoint_wideよりも大きい場合にのみ、値が1pxの変数が必要です。それ以外の場合は、0pxが必要です。これは、 clamp()を使用して実行できます。

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px );</code>

var(--base_size) - var(--breakpoint_wide)が負の場合、 - base_sizeは-breakpoint_wideよりも少ないので、 clamp()場合は0pxを返します。

逆に、-base_sizeが-breakpoint_wideよりも大きい場合、計算は1px以上の正の長さを与えます。これはclamp()が1pxを返すことを意味します。

ビンゴ！ 「幅」インジケータ変数が取得されます。

「中」間隔でこれをしましょう。

 <code>--is_medium: clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px ); /* 不要使用，见下文！ */</code>

これにより、セル間隔で0pxが得られますが、中間および広い間隔では1pxです。ただし、私たちが望んでいるのは、0pxの広い間隔と1pxの中間間隔です。

-is_wide値を差し引くことで、この問題を解決できます。広い間隔では、1px -1pxは0pxです。中間間隔では、1px -0pxは1pxです。わずかな間隔の場合、0px -0pxは0pxを与えます。完璧。

だから私たちは得ます：

 <code>--is_medium: calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

わかりますか？インジケータ変数を計算するには、0pxおよび1pxのclamp()境界として使用し、-base_widthと-breakpoint_hateverの差を制限値として使用します。次に、すべての大きな間隔インジケーターの合計を差し引きます。最小間隔インジケーターの場合、このロジックは次の結果を生成します。

 <code>--is_small: calc( clamp(0px, (var(--base_size) - 0px, 1px) - (var(--is_medium) var(--is_wide)) );</code>

ここでは、 clamp()をスキップできます。セル間のブレークポイントは0pxと-base_sizeが正であるため、-base_size -0pxは常に1pxよりも大きく、 clamp()は常に1pxを返します。したがって、-is_smallの計算は次のことを簡素化できます。

 <code>--is_small: calc(1px - (var(--is_medium) var(--is_wide)));</code>

ステップ3：インジケータ変数を使用して、間隔値を選択します

ここで、これらの「インジケータ変数」から有用なものに移動する必要があります。ピクセルベースのレイアウトを使用していると仮定しましょう。心配しないでください、私たちは後で他のユニットに対処します。

これは問題です。これは何が戻ってきますか？

 <code>calc(var(--is_small) * 100);</code>

-is_smallが1pxの場合、100pxを返します。 -is_smallが0pxの場合、0pxを返します。

これの使用は何ですか？これをチェックしてください：

 <code>calc( (var(--is_small) * 100) (var(--is_medium) * 200) );</code>

これにより、セル間隔で100px 0px = 100pxを返します（-is_smallは1px、-is_mediumは0pxです）。中間間隔（-is_mediumは1px、-is_smallは0px）では、0px 200px = 200pxを返します。

わかりますか？ Roman Komarovの記事については、ここで何が起こっているのかを詳しく見てみましょう。理解するのが難しい場合があります。

ピクセル値（ユニット）に対応するインジケータ変数を掛け、これらすべてのアイテムを一緒に追加します。したがって、ピクセルベースのレイアウトの場合、このようなものは十分です：

 <code>width: calc( (var(--is_small) * 100) (var(--is_medium) * 200) (var(--is_wide) * 500) );</code>

しかし、ほとんどの場合、ピクセルベースの値は必要ありません。 「全幅」や「3番目の幅」などの概念、または2REM、65CHなどの他のユニットさえも望んでいます。これらのためには、継続する必要があります。

ステップ4： min()と巨大な整数を使用して、任意の長さの値を選択します

最初のステップでは、静的ピクセル値の代わりに、このようなものを定義します。

 <code>--length_4_medium: calc((100% / 2) - 10px);</code>

では、どのようにそれらを使用しますか？ min()関数は救助することです！

ヘルパー変数を定義しましょう。

 <code>--very_big_int: 9999; /* 纯粹的无单位数字。必须大于其他地方出现的任何长度。 */</code>

この値にインジケータ変数を掛けると、0pxまたは9999pxが与えられます。この値の大きさは、ブラウザによって異なります。 Chromeは999999を受け入れますが、Firefoxはそれほど多数を受け入れないため、9999は両方で機能する値です。周りに9999pxを超えるビューポートはほとんどないので、大丈夫です。

では、9999pxよりも小さい値で0px min()よりも大きい値で使用するとどうなりますか？

 <code>min( var(--length_4_small), var(--is_small) * var(--very_big_int) );</code>

-is_smallが0pxである場合にのみ0pxを返します。 -is_smallが1pxの場合、乗算は9999px（-length_4_smallよりも大きい）を返し、 minが戻ります。

これは、インジケータ変数に基づいて、任意の長さ（つまり、9999px未満ですが0pxを超える）を選択する方法です。

9999pxを超えるビューポートを扱っている場合は、-very_big_int変数を調整する必要があります。これは少し醜いですが、純粋なCSSが値内のユニットを削除してインジケータ変数のユニットを取り除くことができれば（そして、任意の長さを直接掛ける）、これを修正できます。現在、これは機能しています。

ここで、すべてのピースを組み合わせて、カラスを飛ばします！

ステップ5：すべてをまとめます

このような動的なコンテナ幅に基づいて、ブレークポイントベースの値を計算できるようになりました。

 <code>--dyn_length: calc( min(var(--is_wide) * var(--very_big_int), var(--length_4_wide)) min(var(--is_medium) * var(--very_big_int), var(--length_4_medium)) min(var(--is_small) * var(--very_big_int), var(--length_4_small)) );</code>

ステップ4の各行はmin()です。すべての線はステップ3のように加算されます。インジケータ変数はステップ2から得られます。すべてステップ1で行った構成に基づいています。

試してみませんか？これは使用できるペンです（CSSのコメントを参照）。

このペンは、FlexBox、グリッド、またはフロートを使用しません。いくつかのdiv。これは、このレイアウトで補助プログラムが不要であることを示すためです。ただし、これらのレイアウトでCrowを自由に使用してください。これにより、より複雑なレイアウトを作成するのに役立ちます。

他の？

これまでのところ、固定ピクセル値をブレークポイントとして使用していますが、コンテナがビューポートの半分よりも大きいか小さい場合はレイアウトを変更したいですか？問題ない：

 <code>--breakpoint_wide: calc(50vw - 10px);</code>

これはうまくいきます！他の式も適用されます。奇妙な行動を避けるために、次のようなものを使用したいと思います。

 <code>--breakpoint_medium: min(var(--breakpoint_wide), 500px);</code>

... 2番目のブレークポイントを幅500pxに設定します。ステップ2の計算は、-breakpoint_wideが-breakpoint_medium以上であるという事実に依存します。ブレークポイントを正しい順序で保持するだけです： min()および/またはmax()はここで非常に便利です！

高さはどこですか？

すべての計算評価は遅延されます。つまり、-dyn_lengthが任意の属性に割り当てられている場合、計算はこの位置の-base_sizeの計算結果に基づいています。したがって、-base_sizeが100％の場合、設定の高さは100％に基づいています。

コンテナの幅に基づいて高さを設定する方法は見つかりませんでした。 100％がパディングの幅に相当するため、 padding-top使用できます。

コンテンツを表示して隠すのはどうですか？

Crow Trickを使用してコンテンツを表示および非表示にする最も簡単な方法は、適切なインジケータ変数で幅を100px（またはその他の適切な幅）に設定することです。

 <code>.show_if_small { width: calc(var(--is_small) * 100); } .show_if_medium { width: calc(var(--is_medium) * 100); } .show_if_wide { width: calc(var(--is_wide) * 100); }</code>

あなたは設定する必要があります：

 <code>overflow: hidden; display: inline-block; /* 避免难看的空行*/</code>

...または、0pxの幅のあるボックスに内容を非表示にする他の方法。ボックスを完全に非表示にするには、他のボックスモデルのプロパティ（マージン、充填、境界幅を含む）を0pxに設定する必要があります。 Crowは特定のプロパティでこれを行うことができますが、それを0pxに修正することも同様に効果的です。

別の方法はposition: absolute; left: calc(var(--is_???) * 9999);

キーポイント

コンテナクエリの動作であっても、おそらくJavaScriptはまったく必要ありません！もちろん、CSS構文で実際にコンテナクエリを取得すると、使用して理解しやすくなることを願っていますが、今日のCSSにこれらのことを実装できることも非常にクールです。

これに対処している間、私はCSSが使用できる他のことについていくつかの考えを持っています。

• CONWやCONHなどのコンテナベースのユニットは、幅に基づいて高さを設定するために使用されます。これらのユニットは、現在のスタッキングコンテキストのルート要素に基づいています。
• 遅延評価の問題を克服するために、ある種の「価値としての評価」は機能します。これは、レンダリング時に動作する「ユニットを削除」関数で非常にうまく機能します。

注：以前のバージョンでは、CWとCHをユニットとして使用しましたが、一部の人々は、これらが同じ名前のCSSユニットと簡単に混同されることを指摘しました。コメントのヒントをくれたMikko TapionlinnaとGilson Nunes Filhoに感謝します！ ））

2番目のものがある場合、色（きれいな方法で）、境界線、箱の影、フレックスグロー、背景位置、z-index、スケール（）を設定することができます。

コンポーネントベースのユニットと組み合わせることで、子のサイズを親と同じアスペクト比に設定することさえ可能です。ユニットで値で分割することはできません。それ以外の場合、-indicator / 1pxはカラスの「除去ユニット」として機能します。

追加コンテンツ：ブールロジック

インジケータ変数はブール値のように見えますよね？唯一の違いは、「PX」ユニットがあることです。では、これらの論理的な組み合わせはどうですか？ 「コンテナは画面の幅の半分より大きい」 、 「レイアウトは2列モードにある」などのものを想像してください。 CSS機能が再び救助されます！

またはオペレーターの場合、すべてのインジケーターにmax()を使用できます。

 <code>--a_OR_b: max( var(--indicator_a) , var(--indicator_b) );</code>

非演算子の場合、1pxからインジケーターを差し引くことができます。

 <code>--NOT_a: calc(1px - var(--indicator_a));</code>

論理純粋主義者は、（a、b）= not（（a、b））が完全なブール代数であるため、ここで停止する可能性があります。しかし、ちょっと、ただ楽しみのために、ここにもっとあります：

そして：

 <code>--a_AND_b: min(var(--indicator_a), var(--indicator_b));</code>

これにより、両方のインジケーターが1pxの場合にのみ1pxに評価されます。

min()とmax()は、3つ以上のパラメーターを受け入れることに注意してください。それらはまだ（2つ以上）インジケータ変数として機能します。

xor：

 <code>--a_XOR_b: max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) );</code>

両方のインジケーターが同じ値を持っている場合（および場合にのみ）、両方の差は0pxです、 max()この値を返します。インジケーターの値が異なる場合、1つの用語は-1pxを与え、もう1つは1pxを与えます。この場合、 max() 1pxを返します。

2つの指標が等しい状況に興味がある場合は、次の方法を使用してください。

 <code>--a_EQ_b: calc(1px - max( var(--indicator_a) - var(--indicator_b), var(--indicator_b) - var(--indicator_a) ) );</code>

はい、これはそうではありません（A XOR B） 。これに対する「より良い」ソリューションが見つかりません。

平等は、一般的なCSS長変数の方がインジケータ変数だけでなく、より興味深い場合があります。これはclamp()再度使用することで役立つかもしれません：

 <code>--a_EQUALS_b_general: calc( 1px - clamp(0px, max( var(--var_a) - var(--var_b), var(--var_b) - var(--var_a) ), 1px) );</code>

PXユニットを削除して、ユニットレス変数（積分）の一般的な平等を取得します。

これは、ほとんどのレイアウトにとって十分なブールロジックだと思います！

追加コンテンツ2：グリッドレイアウトに列の数を設定します

カラスはCSSの長さの値のみを返すことに限定されるため、グリッドの列数を直接選択することはできません（これは単位のない値であるため）。しかし、それを機能させる方法があります（上記のようにインジケータ変数を宣言すると仮定します）：

 <code>--number_of_cols_4_wide: 4; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 1; --grid_gap: 0px; --grid_columns_width_4_wide: calc( (100% - (var(--number_of_cols_4_wide) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_wide)); --grid_columns_width_4_medium: calc( (100% - (var(--number_of_cols_4_medium) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_medium)); --grid_columns_width_4_small: calc( (100% - (var(--number_of_cols_4_small) - 1) * var(--grid_gap) ) / var(--number_of_cols_4_small)); --raven_grid_columns_width: calc( /* 使用乌鸦组合值*/ min(var(--is_wide) * var(--very_big_int),var(--grid_columns_width_4_wide)) min(var(--is_medium) * var(--very_big_int),var(--grid_columns_width_4_medium)) min(var(--is_small) * var(--very_big_int),var(--grid_columns_width_4_small)) );</code>

次の方法を使用してグリッドを設定します。

 <code>.grid_container{ display: grid; grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width)); gap: var(--grid_gap) };</code>

これはどのように作動しますか？

1. 各間隔に必要な列の数を定義します（行1、2、3）
2. 各間隔の完全な列幅を計算します（行5、6、7）。ここで何が起こっているのですか？

まず、列で利用可能なスペースを計算します。これは100％で、ギャップが取り上げるスペースを差し引いています。列nには（n-1）ギャップがあります。次に、このスペースを必要な列の数で分けます。 3.カラスを使用して、実際の-base_sizeの正しい列幅を計算します。

グリッドコンテナでは、この線：

 <code>grid-template-columns: repeat(auto-fit, var(--raven_grid_columns_width));</code>

...次に、列の数を選択して、カラスが提供する値に合わせます（これにより、上記の-number_of_cols 4 ???変数が表示されます）。

カラスは列番号を直接与えることができないかもしれませんが、長さを与えることができ、 repeatになり、 autofit私たちに必要な数を計算します。

しかし、 auto-fit minmax()と同じことをしますよね？いいえ！上記のソリューションでは、3つの列（または5列）が提供されることはなく、列の数をコンテナの幅とともに増やす必要はありません。このペンで次の値を設定して、カラスが全速力で飛ぶのを見ることができます。

 <code>--number_of_cols_4_wide: 1; --number_of_cols_4_medium: 2; --number_of_cols_4_small: 4;</code>

追加のコンテンツ3： linear-gradient()を使用して、背景色を変更します

これはもう少し脳が集中しています。カラスはすべて長さの値ですが、これらの値から色をどのように取得しますか？まあ、線形勾配は両方を同時に処理します。長さの値で定義された特定の領域の色を定義します。コードを入力する前に、この概念をより詳細に説明しましょう。

実際の勾配部分を解決するために、よく知られている手法は、カラーストップポイントを2倍にし、勾配部分を0px以内に効果的に発生させることです。このコードをチェックして、これを行う方法を学びます。

 <code>background-image:linear-gradient( to right, red 0%, red 50%, blue 50%, blue 100% );</code>

これにより、背景が左側に半分赤、右は青になります。最初のパラメーター「右」に注意してください。これは、パーセンテージ値が左レベルから右レベルまで評価されることを意味します。

Crow変数を介して50％の値を制御すると、カラーストップポイントを自由に移動できます。さらにカラーストップポイントを追加できます。実行中の例では、3つの色が必要であり、2つの（2つの）内部カラーストップポイントになります。

カラーストップポイントとカラーストップポイントにいくつかの変数を追加すると、これが得られるものです。

 <code>background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

しかし、 - first_lgbreak_valueおよび---second_lgbreak_valueの値をどのように計算しますか？見てみましょう。

最初の値は、color_smallの可視位置を制御します。セル間隔では、100％である必要があり、他の間隔では0pxである必要があります。カラスでこれを行う方法を学びました。 2番目の変数は、Color_Mediumの可視性を制御します。わずかな間隔では、100％でなければなりません。中間間隔では、100％でなければなりません。しかし、広い間隔では、0pxでなければなりません。コンテナの幅がわずかまたは中間の間隔である場合、対応するインジケーターは1pxでなければなりません。

インジケーターでブールロジック操作を行うことができるため、次のとおりです。

 <code>max(--is_small, --is_medium)</code>

…正しいインジケーターを取得するため。これは次のとおりです。

 <code>--first_lgbreak_value: min(var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%);</code>

すべてをまとめると、幅に基づいて背景色を変更する次のCSSコードが生成されます（インターバルインジケーターは上記のように計算されます）：

 <code>--first_lgbreak_value: min( var(--is_small) * var(--very_big_int), 100%); --second_lgbreak_value: min( max(var(--is_small), var(--is_medium)) * var(--very_big_int), 100%); --color_wide: red;/* 根据你的需求更改*/ --color_medium: green;/* 根据你的需求更改*/ --color_small: lightblue;/* 根据你的需求更改*/ background-image: linear-gradient( to right, var(--color_small) 0px, var(--color_small) var(--first_lgbreak_value), var(--color_medium) var(--first_lgbreak_value), var(--color_medium) var(--second_lgbreak_value), var(--color_wide) var(--second_lgbreak_value), var(--color_wide) 100% );</code>

これは、それがどのように機能するかを見ることができるペンです。

追加コンテンツ4：ネストされた変数を取り除きます

Crowを使用するときに奇妙な問題があります。Calc calc()で使用できるネストされた変数は限られています。これは、あまりにも多くのブレークポイントを使用する場合にいくつかの問題を引き起こす可能性があります。私が理解する限り、この制限は、スタイルを計算するときにページのブロックを防ぎ、より速い円形の参照チェックを可能にすることです。

私の意見では、「価値としての評価」のようなものは、この問題を克服する良い方法です。ただし、この制限は、CSSの限界を突破するときに頭痛を引き起こす可能性があります。うまくいけば、この問題は将来解決できることを願っています。

（深さ）ネストされた変数を使用せずに、Crowのインジケータ変数を計算する方法があります。 -is_medium値の元の計算を見てみましょう。

 <code>--is_medium:calc( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px) - var(--is_wide) );</code>

問題は、マイナス-is_wideで発生します。これにより、CSSパーサーは-is_wideの完全な式の定義を貼り付けます。 -is_small計算には、この種の参照もあります。 （-is_wideの定義は、-is_mediumの定義に隠され、直接使用されるため、2回貼り付けられます。）

幸いなことに、より大きなブレークポイントを持つ指標を参照せずにインジケーターを計算する方法があります。

-base_sizeが間隔の下限ブレークポイントよりも大きく、間隔の上限ブレークポイント以下の場合にのみ、インジケータが真です。この定義は、次のコードを提供します。

 <code>--is_medium: min( clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) );</code>

• min()は、論理および演算子として使用されます
• 最初のclamp()は「 - base_sizeが - breakpoint_medium」です
• 2番目のclamp()は、「 - base_sizeは-breakpoint_wide以下ではありません。」
• 1PXを追加すると、「低」から「より低い」から「より低い」に切り替わります。これは、整数（ピクセル）数を処理しているために機能します（

インジケータ変数の完全な計算は、このように行うことができます。

 <code>--is_wide: clamp(0px, var(--base_size) - var(--breakpoint_wide), 1px); --is_medium: min(clamp(0px, var(--base_size) - var(--breakpoint_medium), 1px), clamp(0px, 1px var(--breakpoint_wide) - var(--base_size), 1px) ); --is_small: clamp(0px,1px var(--breakpoint_medium) - var(--base_size), 1px);</code>

-is_wideおよび-is_smallは、それぞれがチェックされるには特定のブレークポイントのみが必要なため、計算がより簡単です。

これは、これまでに見たすべてに当てはまります。これが例を組み合わせたペンです。

最後の考え

カラスは、メディアクエリができることすべてをすることはできません。しかし、CSSにメディアクエリがあるため、それを行うために必要はありません。サイドバーの位置やメニューの再構成など、「大型」のデザインの変更の場合、問題ありません。これらのことは、ビューポート全体（ブラウザウィンドウのサイズ）のコンテキストで発生します。

しかし、コンポーネントの場合、コンポーネントのサイズがわからないため、メディアクエリは少し間違っています。

Heydon Pickeringは、この画像を使用してこの問題を示しています。

Ravenがコンポーネントのレスポンシブレイアウトを作成する問題を克服し、「CSSができること」の限界をさらに高くするのに役立つことを願っています。

今日何が可能かを示すことにより、構文砂糖とCONW、CONH、「除去ユニット」、「ピクセルとしての評価」などの非常に小さな新しい機能を追加することにより、「実際の」コンテナクエリを完了することが可能かもしれません。 「1px」を空間として書き換え、「0px」を「初期」にすることを許可する関数がある場合、Crowはカスタム属性の切り替えトリックと組み合わせて使用​​し、長さの値だけでなく各CSS属性を変更できます。

JavaScriptを避けるためにこれを達成することにより、レイアウトはJavaScriptのダウンロードや実行に依存しないため、より速くレンダリングします。 JavaScriptが無効になっていても、それは問題ではありません。これらの計算はメインスレッドをブロックすることはなく、アプリケーションロジックは設計ロジックにめちゃくちゃになりません。

Chris、AndrésGalante、Cathy Dutton、Marko Ilic、David Atandaの素晴らしいCSS-Tricksの記事に感謝します。彼らは私がカラスが達成できることを探求するのを本当に助けてくれました。

以上がレイヴンテクニック：コンテナクエリに一歩近づきますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。