min()

width: min(50vw, 200px);

width: min(100vw, 4000px);

width: min(150vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 min() の値はプロパティが取りうる最大の値を提供するものとして考えてください。

min() 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

式は (<length> などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 attr() などのその他の式にすることができます。

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

• 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
• max() や他の min() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
• 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
• min() と max() の値を組み合わせたり、 min() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
• 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。

<min()> = 
  min( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

min() を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

• MDN WCAG を理解する、ガイドライン 1.4 の解説
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

いくらか CSS を見てください。

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

<form>
  <label>Type something:</label>
  <input type="text" />
</form>

• calc()
• clamp()
• max()
• CSS 値