min()

Im ersten oben genannten Beispiel wird die Breite maximal 200px betragen, aber kleiner sein, wenn der Ansichtsbereich weniger als 400px breit ist (in diesem Fall wäre 1vw 4px, sodass 50vw 200px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Maximalwert für die Eigenschaft anzugeben, und eine relative Einheit, um den Wert an kleinere Ansichtsbereiche anzupassen.

Die min()-Funktion nimmt ein oder mehrere durch Kommas getrennte Ausdrücke als Parameter, wobei das kleinste (negativste) Ausdrucksergebnis als Wert verwendet wird.

Die Ausdrücke können mathematische Ausdrücke (mit arithmetischen Operatoren), Literalwerte oder andere Ausdrücke, wie z.B. attr(), sein, die sich zu einem gültigen Argumenttyp (wie <length>) auswerten.

Sie können für jeden Wert in Ihrem Ausdruck unterschiedliche Einheiten verwenden, wenn Sie möchten. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen bei Bedarf festzulegen.

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen in Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl Auto- als auch Festlayouts enthalten, könnten behandelt werden, als ob auto angegeben worden wäre.
• Es ist erlaubt, max() und andere min()-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind vollständige mathematische Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division verwenden können, ohne die calc()-Funktion selbst zu verwenden.
• Der Ausdruck kann Werte kombinieren, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) verwenden, unter Anwendung der Standardregeln zur Operatorpräzedenz. Stellen Sie sicher, dass auf beiden Seiten der + und - Operanden ein Leerzeichen steht. Die Operanden im Ausdruck können alle <length>-Syntaxwerte sein.
• Sie können (und müssen oft) min() und max()-Werte kombinieren oder min() innerhalb einer clamp()- oder calc()-Funktion verwenden.
• Sie können mehr als zwei Argumente angeben, wenn Sie mehrere Einschränkungen anwenden möchten.

<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        

Wenn Sie min() verwenden, um eine maximale Schriftgröße festzulegen, stellen Sie sicher, dass die Schriftgröße sich um mindestens 200% vergrößern lässt, um die Lesbarkeit zu gewährleisten (ohne unterstützende Technologien wie eine Zoomfunktion).

• MDN Understanding WCAG, Leitlinie 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.4 | W3C Understanding WCAG 2.0

Ein weiterer Anwendungsfall für min() ist die Festlegung einer maximalen Größe bei responsiven Formulareingabefeldern: Dadurch können die Breite von Labels und Eingabefeldern verkleinert werden, wenn die Breite des Formulars abnimmt.

Schauen wir uns ein Beispiel-CSS an:

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;
}

Hier werden das Formular selbst sowie der Rand, der Rahmen und die Polsterung 100% der Breite des übergeordneten Elements betragen. Wir erklären das Eingabefeld und das Label als den kleineren Wert von 40% der Formularbreite bis zur Polsterung oder 400px Breite, je nachdem, welcher Wert kleiner ist. Mit anderen Worten: Die maximale Breite, die das Label und das Eingabefeld erreichen können, beträgt 400px. Die minimale Breite beträgt 40% der Formularbreite, was auf einem Smartwatch-Bildschirm sehr klein ist.

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

• calc()
• clamp()
• max()
• CSS-Werte