Längenangaben mit CSS: für (fast) jeden Anwendungsfall gerüstet
Die Möglichkeiten, mit CSS Angaben für Dimensionen zu notieren, sind zahlreich und erlauben es, die Abmessungen für Boxen in nahezu jeder Hinsicht anzupassen. Dabei sind es die feinen Unterschiede, die dazu führen, dass eine Methode fast perfekt ist, aber einen inakzeptablen Nebeneffekt hat, so beispielsweise sich genau wie gewünscht beim wachsen und schrumpfen verhält – allerdings immer etwas über die Nachbarn herausragt.
Oft steht aber eine passende Eigenschaft, ein Schlüsselwort oder eine mittels Werten an eigene Bedürfnisse anpassbare Funktion zur Verfügung. Als letzter Ausweg bietet sich in vielen Fällen die calc()-Funktion an.
Die calc()-Funktion: selber machen als letzter Ausweg
Als letzter Ausweg? – Ja, denn oft fliegt einem gerade die um die Ohren, wenn man an einer anderen Stelle Abstände oder Größen ändert und das nicht überall dort nachzieht, wo man mit diesen Werten rechnet.
Custom Properties (laienhaft CSS-Variablen genannt) können dieses Problem lösen, aber einerseits gibt es noch immer bemitleidenswerte Entwickler wie mich, die den IE11 unterstützen müssen und andererseits ist es einfacher, Methoden zu verwenden, die CSS für einen bestimmten Anwendungsfall vorsieht, statt sich diese nachzubauen.
Allerdings setzt die Entscheidung für die richtige Kombination von Einheiten, Eigenschaften, Schlüsselwörtern und Funktionen für diverse Anwendungsfälle eine genaue Kenntnis der vorhandenen Möglichkeiten voraus. Und die Möglichkeiten werden ständig erweitert.
Mit fit-content erhalten komplexe Anwendungsfälle eine einfache Lösung
Mit der Funktion fit-content() bietet CSS nun eine weitere Möglichkeit, das responsive Verhalten von Elementen zu kontrollieren.
Was dabei zu beachten ist und wieso man das Schlüsselwort fit-content schon wieder vergessen kann, erklärt Maurice Florence in ihrem Blog.
Weitere Links
- fit-content auf MDN Web Docs
- fit-content selber ausprobieren (a fiddle by kseso)
- The Spec: the CSS intrinsic and extrinsic sizing Module level 3