Quelle: Bild: Shutterstock / Andrey Suslov
Vergeichsfunktionen in CSS 09.07.2020, 08:46 Uhr

Cooles Trio

Die CSS-Funktionen min(), max() und clamp() ermöglichen flexible Angaben mit Unter- und Obergrenzen.
Webseiten müssen sich an alle erdenklichen Situationen, Kontexte, Geräte und Viewports anpassen. Längst vorbei sind die Zeiten, in denen man als Basis für einen Layoutcontainer eine Angabe wie width: 960px schreiben konnte. Häufig arbeitet man mit Prozent oder Viewport-Einheiten, wobei man immer darauf achten muss, dass die Ergebnisse nicht zu extrem sind; das heißt, man muss die Flexibilität mit Mindest- und Maximalwerten begrenzen. Bei width oder height stehen dafür eigene Eigenschaften zur Verfügung: min-/max-width bzw. min-/max-height. Aber existieren keine Entsprechungen bei den anderen CSS-Eigenschaften, es ist kein min-font-size vorgesehen, max-margin, min-line-height oder max-padding sucht man ebenfalls vergebens. Ein Ersatz dafür sind die drei Funktionen min(), max() und clamp(), die von allen aktuellen Browsern unterstützt werden.
Zuerst erfahren Sie an einem Beispiel, warum wir diese Funktionen brauchen. Dann lernen Sie alle wichtigen Facts zu den neuen Funktionen kennen und schließlich sehen Sie Einsatzmöglichkeiten sowie Fallbacklösungen.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar