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:

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. 🙂

Kategorie:
CSS
Schlagwörter:

Beteilige Dich an der Diskussion! 2 Kommentare

  1. So was gibts? Verdammt 🙂

    Antworten
  2. Sehr gut beschrieben, hat mir geholfen, danke.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.