ミン、マックス、クランプ

私は最近3つのCSS機能について知りました.min , max , and clamp . 彼らはあなたが1行で任意のプロパティについての値の流体範囲を定義することができます.彼らは簡単に聞こえるが、多くの可能性を開きます.
これは私を興奮させました、しかし、私はいくつかの主要なブラウザーがどれくらい支持したかについて確認しました.ほとんどの場合、2019年以降、2018年以降のサファリでサポートされているクロムと、数ヶ月のために行われている.
決まり文句として、決して遅くないより良い.さらに、この全体のパンデミックは私の考えを占領しています.しかし、それはまだ一定の学習と次のアップデートについての分野では恥ずかしいです.それで、私は彼らについてブログのポストを書くと思いました.また、私自身(そして、世界)に立証するために、私はついに捕えました.

これらの関数は何をすることができますか？

あなたが記事を持っていると言うと、それはフルサイズに移動したいが、特定のサイズで停止します.CSSはすでに2行でかなり簡単になります.

article {
 width: 100%;
 max-width: 700px;
}

With min , これを1行で引くことができます.

article {
 width: min(100%, 700px);
}

同じ結果、少ないCSS!これは単純な例ですがwidth 既に幸運な財産です.このようなプロパティを補完しているmax-width and min-width 制限を与える.
しかし、これを持たないすべてのプロパティを考慮するpadding and font-size . Making a fluid CSS font size used to take complex math stuck into in a Sass mixin . しかし、これらの関数は、はるかに単純な形式ですべてのネイティブCSSにもたらします.

どのように正確に動作しますか？

始めましょうmin and max , 以来clamp 二つの組み合わせです.私は、彼らがどのように働くかについて誤解している名前がひっくり返るようであるとわかります.

min つの引数をとります:ベース値と固い最大値は、最初の方が大きいことができません.

max つの引数をとります:基底値と固い最小値は2番目より小さいことができません.

はい.min 可能な最大値を設定し、max 最小の可能な値を設定します.いいえ、これは私には何の意味もありません.それで、私は価値観が思い出させるものとして一緒に働く方法のためにいくつかの落書きを描きました.


ありがたいことにclamp わかりやすい.最小値、ベース値、最大値の3つの引数があります.ベース値は、その範囲内にある限り、何をキックします.

p {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

この例は一見簡単に理解しやすい.段落タグは1rem と画面サイズの増加として成長します.しかし、彼らは2レムを打つとき、彼らは成長を止めるでしょう.ベース値は、その増加がどれくらい速く起こるかを制御します.
私がこれらの機能に言及したとき、流体タイポグラフィをより速くてより簡単にすることができたかどうか思い出してください?これはまさにどのようにすればよいのでしょう.

私はそれらを使用できますか？

任意のきちんとしたCSS機能を持つ大規模な警告は、常にブラウザのサポートです.As of this writing, all major browsers support them except, of course, Internet Explorer . これは、機能ベースライン上の進歩的な拡張として使用することができますので、これは大きなことではありません.

p {
 font-size: 1.2rem;
 font-size: clamp(1rem, 2.5vw, 2rem);
}

ますます多くのデザイナーが学ぶようになると、ブラウザ全体で同じように見える必要はありません.

出て、あなたの限界を見つけてください！

私は、私が事実の後のこれらのヵ月のような役に立つCSS機能を見つけることを恥ずかしいです.しかし、彼らはここにいます、彼らは役に立つです、彼らの名前は混乱しています、しかし、彼らはほとんど行きそうです!移動し、より無限になるためにあなたのCSSプロパティの制限を受け入れる.