CSS: Die calc() Funktion

Ich bin vermutlich extrem spät dran damit, aber ich habe erst im letzten Jahr von dieser tollen CSS-Funktion erfahren, die mir seither das Leben viel einfacher macht: Die calc() Funktion.

calc() kann überall da eingesetzt werden, wo man Zahlenwerte definieren kann. Ein einfaches Beispiel mit einem div:

div {
    width: calc( 100% - 250px );
}

Das div wird dann eben so breit, wie der verfügbare Platz, minus 250px. Das schöne an calc() ist, dass sämtliche Angaben untereinander gemischt werden können, also z. B. %, px, em, rem, vh, vw, oder auch einfach eine Ganzzahl:

div {
    width: calc( 100% / 4 );
}

Als Operatoren gibt es +, –, * und /. Es gilt „Punkt vor Strich“ und es können auch mehrere Berechnungen hintereinander gesetzt werden:

div {
    width: calc( (50% + 25px) + (10% * 3em) );
}

Das letzte Beispiel ist natürlich etwas unsinnig, aber technisch möglich. 😉  So kann man beispielsweise Bereiche/Elemente mit einer festen Breite in ein flexibles Layout integrieren, ohne irgendwelche Krücken bauen zu müssen.  Und auch andere tolle Dinge lassen sich einfach damit lösen. Wer die Funktion weiter kennen lernen möchte, kann gerne hier vorbei schauen:

• Can I use: calc() wird schon von fast allen aktuellen Browsern unterstützt. Ein paar Sonderfälle gibt es noch.
• CSS Tricks: A Couple of Use Cases for calc(): Verschiedene Beispiele zum Einsatz von calc()
• Codrops CSS Reference: calc(): Erklärung und Beispiele
• Smashing Magazine: Getting started with CSS calc(): Viele Beispiele, auch komplizierterer Natur

Wie sieht es bei dir aus? Hast du calc() schon einmal eingesetzt? Kennst du noch andere Möglichkeiten, mit der Funktion zu arbeiten? Hinterlasse gerne einen Kommentar. 🙂