私があなたを怖がらせようとしていないのを聞いてください、しかし、このCSSのものは複雑になる可能性があります。そうではありません 持っている あること。 CSSは、最終的にキー値のペアを持つ単なるセレクターです。私が書いているCSSの大部分は、特に一般的なシステムを手に入れると、かなり簡単です（どこにファイルが行きますか？一般的にどのように名前を付けますか？変数はどのように行うのですか？）。しかし、公正は公平です、CSSは非常に複雑になる可能性があります。新しい追加されたものがその複雑さを増加させることは、複雑さの状況を助けません。 CSSのすべてが他のすべてに影響します。セレクターは混乱を招く可能性があり、ネストはそれを悪化させる可能性があります。変数はいつでも変更される可能性があり、どこから明確ではありません。ページ上の状況（サイジング、イベント、設定）は、ますます大きな方法でCSSで起こっていること（コンテナのクエリ、ユーザー設定のクエリ）に影響を与える可能性があります。 CSSができることのエッジを押したい場合は、今がその時です。
私はしばしば、CSSのこれらのエッジの他の人の探索のリンクを保存します。彼らは当然、フロントエンドコーディングツールの所有者の1人であり、CSS-Tricksの元所有者として魅力的です。しかし、時々、私はそれらを共有し、複雑さのためにそれらを文脈化する方法を見つけるのに苦労します。実際、私はそれが公平だと思います ない 複雑さだけに基づいたテクニックを使用してください。結局のところ、あなたはそれを維持することを書きます。
しかし、リミッターを取り外して、それがどれほど複雑であるかに関係なく、CSSのものを見てみましょう。
数年前から脳を壊したものから始めます。 @james0x57 この手法を「スペーストグル」と呼んでいます（アナチューダーが発見を称賛しています）。 Lea Verouはそれを呼びます --var: ; ハック。私自身の理解を閉じ込めるために、私はそれを呼びました CSSカスタムプロパティトグルトリック。
アイデアは、CSSカスタムプロパティは有効で無効である可能性があるということです。 " " （単一のスペース）。そのカスタムプロパティを他の人と連結して、いずれかのバリッドまたはインバリッドを生成できます 他の カスタムプロパティ。有効な場合は、1つのことを行うことができます。無効な場合は、カスタムプロパティにフォールバックを使用して別のことを行うことができます。したがって、それは基本的に、カスタムプロパティのロジックの場合です。
私がこれを単純化することに今まで来た最も近いのはこれです。 そして、私はそれがまさに簡単ではないことを認めています。
良いニュースは、CSSがそれを決定したことです if() 何かでしょう、そのため、ブラウザの実装を待ちます。使いやすさがよりエキゾチックな使用につながるが、それはかなり簡単であるはずだ。
就職のインタビューでソートアルゴリズムを行う必要があるために準備したことがありますか？バブルソートとは何かを説明できますか？それは、隣の2つのことを比較するリストをループでループし、それらを交換する必要がある場合にそれらを交換するものです。これ以上スワップを行わないまで、リストを駆け巡り続けます。とにかく、私はここでコンピューターの天才ではないと思います。 Grahamthedevはそうです！彼らの記事 バブルソート…純粋なCSSで？ ボンカーです。
これは、変数を比較する能力を通じて生じる複雑さです（たとえば min() そして max() 今すぐCSS）および他の変数に基づいて新しい変数を設定します。遅延とアニメーションでそれを十分に書くと、あなたは自分自身にバブルの種類を手に入れました。頑張ってください。
そして、CSSのエッジについて言えば：
警告： モバイルでは、最後のいくつかのアニメーション 遊んでいないかもしれませんし、ただ空白になります。 PCでは、ファンがスピンアップする場合があります！
これは、以前の計算に依存する非常に多くの計算を使用することの制限です。それがメモリがなくなるのか、それとも何がなくなるのかはわかりませんが、ここではCSSの限界を押しました！
の価値は何ですか cos(25deg) CSSで？ タイラー・ゴーはそれを理解したかった その通り。
私はそれが-1から1の間の数を返すことを知っています。しかし、何の数字は？
プロパティを設定することさえできません その通り それは、それが生成する数だけがほとんどのプロパティで無効であるためです。
あなたはようなことをすることができます
width: calc(1px * cos(25deg))次に、確認しますwidthDevTools Computed Stylesパネルの値と近づきますが、正確ではありません。また、width: cos(25deg)CSSが無効で、カスタムプロップのようなものを使用しています--v: cos(25deg)カスタムプロップ値が次のように保存されているため、実際にも機能しませんcos(25deg)。
しかし、明らかに cos(25deg) 数を生成しますか？！ タイラーは道を見つけました JavaScriptでCSS生成数を抽出します。私もそれを突くように感じましたが、私はそれほど多くのことをしませんでした。出力がaにあることを発見しました ユニットレス番号、したがって、それは単位の数字を取るCSSプロパティにとって有効です line-height。 したがって、ラインハイトを直接設定できます それを使用して、計算された値を読み取ります。問題は、計算された値がcos（）関数の直接出力ではないことですそれは最終です px 大切なのは…ブレック、ハード。
関与するCSSの策略がいくつかあります @keyframe アニメーション。たとえば、アニメーション中に適用されるスタイルは非常に強く適用されるため、たとえば1年のために実行されるアニメーションで適用されるスタイルは、スタイルオーバーライドを行う方法です。お勧めしません。アニメーションを特定の場所に設定し、それらを一時停止することは、CSSの状態を管理するためのもう1つの奇妙なトリックです。
少なくとも、私は自分の脳をすぐに回避できるように感じます。アニメーションには、最近、スクロール駆動型のアニメーションを介して追加のパワー（および複雑さ）があります。ローマンコマロフは最近、非常にエキゾチックで複雑なCSSトリックのマスターであり、彼の スクロール駆動型の状態転送 抵抗ピースです。
…その状態を届けるために使用できる一般的またはユニークな祖先要素のない、ページ上の別の場所の要素に、いくつかの要素の特定の状態をミラーリングする能力 – ホバリングまたは焦点を合わせている。
あなたは考えるかもしれません :has() CSSのどこからでも他のどこからでも状態にアクセスできるための新しい暑さは、あなたは正しいでしょうが、明らかにこのトリックはもう少し適応性があり、後でCSSをより多く書く必要はありません。
…これを実装できます
:has()セレクターですが、新しい値については、その後スタイルシートを変更する必要があります
トリックにはこれらのスペースの切り替えも含まれているように見えます。つまり、これは私が今まで見た中で最も複雑なCSSトリックの1つだと思います。とは別に スーパー数学のもの それはいつも私の心を吹き飛ばします。
アニメーションはCSSの複雑さの車両の1つになる可能性があることを確立しました。 アニメーション、それらをいくつかの野生の状態の機械に強く腕にしていません。
アニメーションが複雑になる1つの方法はそうです 結合 彼ら。先日、私は要素をネストしてから基本的にアニメーション化することを思い出しました 速度を2倍にします 内部アニメーションの。それは飛行機から大砲を撃つだけですが、そこには派手な技術はありません。 CSSは、実際にアニメーションを手動で組み合わせることができます。 animation-composition。しかし、それは混乱を招く可能性があります！ブラマスは書き上げた CSSを使用する神秘的なケース animation-composition: accumulate に scale 変身 比較的単純な状況でも、それがどれほど奇妙に得られるかを概説します。たぶんあなたはあなたの頭を掻きます：
蓄積a
scale(0.5)とscale(2)与えませんscale(2.5)しかしscale(1.5)
これについて十分に長い間自分の頭をかき直した後、それは理にかなっているようなスタートをしました。それでも blur(2) そして blur(3) 確かに作ってください blur(5) 蓄積されると、それらは両方とも「もっと何かを曖昧にします」。規模の場合、0.5は何かを作ります 小さい。 したがって、2.0 + 0.5を追加すると、2.5は2.5ではありません。なぜなら、それらは「もっと多くのことをする」ものではなく、「より小さくする」ものであり、1つは「大きくする」ため、仕様は介入して説明する必要があります。
Be the first to comment
