Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Funktionsweise von CSS calc()

Die CSS-Eigenschaft calc() erlaubt die klassischen Grundrechenarten. Bitte beachtet, dass vor und nach dem Operator ein Leerzeichen stehen sollte. Divisionen durch 0 erzeugen einen Fehler.

Operatoren

  • Addition ( + )
  • Subtraktion ( – )
  • Multiplikation ( * )
  • Division ( / )

Der Syntax sieht dabei wie folgt aus:


calc([wert] [operator] [wert])

Beispiel 1: Werbung im Responsive Design

Das erste Beispiel verwendet eine simple Subtraktion für die Breite des Hauptinhalts. Das article-Element soll grundsätzlich über eine flexible Breite auf Basis von Prozentwerten verfügen. Da rechts neben dem Inhalt allerdings Werbebanner mit fester Größe untergebracht werden müssen, ziehen wir mit Hilfe von calc() die starre Breite der Sidebar von 100% ab.

Pixelwerte werden von Prozentwerten abgezogen
Pixelwerte werden von Prozentwerten abgezogen

Beispiel anzeigen


<div class="site">
  <article>Textinhalte</article>
  <aside>
    <div class="ad">Werbung</div>
    <div class="ad">Werbung</div>
    <div class="ad">Werbung</div>
  </aside>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.site {
  max-width: 900px;
  margin: 0 auto;
}

article {
  float: left;
  width: calc(100% - 135px);
  background: SlateGray;
  padding: 30px;
}

aside {
  float: left;
  width: 135px;
}

.ad {
  height: 125px;
  width: 125px;
  background: tomato;
  margin: 0 5px 5px 5px;
  line-height: 125px;
  text-align: center;
}

Beispiel 2: Gestaltungsraster berechnen

Das zweite Beispiel zeigt die Berechnung eines Gestaltungsrasters mit einer unterschiedlichen Anzahl an Spalten in den verschiedenen Breakpoints. Die Spalten werden dabei immer nur mit einer CSS-Klasse .col ausgezeichnet.

Responsives Gestaltungsraster mit CSS berechnen
Responsives Gestaltungsraster mit CSS berechnen

Beispiel anzeigen


<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>

 …

<div class="col">22</div>
<div class="col">23</div>
<div class="col">24</div>

Den CSS-Code habe ich auf die relevanten Bereiche gekürzt.


.col {
  width: calc(100%/3);
  height: 200px;
  background: silver;
  border: 1px solid white;
  float: left;
}

@media screen and (min-width:600px) {
  .col { width: calc(100%/6); }
}

@media screen and (min-width:800px) {
  .col { width: calc(100%/8); }
}

@media screen and (min-width:1000px) {
  .col { width: calc(100%/12); }
}

Browsersupport für die CSS calc()-Funktion

Die Browserkompatibilität sieht gar nicht so schlecht aus. Abgesehen vom Internet Explorer <= 8, unterstützen alle modernen Browser die Funktion. Eine detaillierte Auflistung entnehmt ihr bitte der Website caniuse.com.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. MedienTec
    schrieb am 12.08.2016 um 18:44 Uhr:

    Schön beschrieben aber es ist ein kleiner fehler in deinem calc.
    deiner ist der;
    .col {
    width: calc(100%/3);
    height: 200px;
    background: silver;
    border: 1px solid white;
    float: left;
    }
    wenn du das so machst ist der dritte col nicht rechts da du 6px durch den border zuviel hast. also sollte es so aussehen
    .col {
    width: calc(100%/3 – 6px);
    height: 200px;
    background: silver;
    border: 1px solid white;
    float: left;
    }
    ich hoffe ich habs nicht übertrieben :)
    gruß MedienTec

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 13.08.2016 um 15:27 Uhr:

      Hallo und vielen dank für deinen Kommentar. Ich habe im Beispiel das Box-Modell umgedreht, daher muss border nicht abgezogen werden. Siehe auch: Mit »box-sizing: border-box;« das CSS Box Model verändern
      Da es in diesem Beitrag allerdings um die calc()-Funktion geht, sind die abgebildeten Code-Beispiele entsprechend gekürzt. Wenn du das normale Box-Modell verwenden möchtest, hast du vollkommen recht.

      Antworten
  2. hans
    schrieb am 06.12.2013 um 09:22 Uhr:

    mal ne frage – was mache ich bei einem responsive layout wenn ich das div dann auf 100% breite bringen will und das andere darunter? dachte mir ich mache aus „width: calc(100% – 135px);“ dann einfach „width: calc(100% – 0px);“ aber funktioniert nicht.

    Antworten
    • hans
      schrieb am 06.12.2013 um 09:24 Uhr:

      sorry hatte nen fehler drin, klappt doch. aber das mit dem IE8 ist doch etwas schade, mache das dann lieber mit jquery.

      Antworten
  3. Erich
    schrieb am 15.11.2013 um 10:03 Uhr:

    Hey,
    über Responsive Webdesign lese ich immer gerne. Wird auch in Zukunft immer wichtiger und mit calc() wird das Ganze, wie schon im Text erwähnt, schlanker und optimierter.

    Sorgenkind ist mal wieder der Internet Explorer. Finde ich immer schade, dass so viele diesen Browser noch benutzen und man sich zwangsweise daran orientieren MUSS.

    Und wie schon Sumit vor mir sagte: Workarounds verwenden.

    Antworten
  4. Sumit
    schrieb am 13.11.2013 um 15:48 Uhr:

    Also ich benutze in vielen Projekten schon länger calc() aber IE8 ist NICHT unterstützt. Der Satz müsste also heißen:

    falsch:
    Abgesehen vom Internet Explorer < 8…

    richtig:
    Abgesehen vom Internet Explorer <= 8…

    Leider haben viele Großkunden immernoch IE8 weshalb ich oft workarounds verwende. Aber calc() an sich ist super. Ich wünschte wir hätten noch variablen wir "element-breite" und "parent-width" und so.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 13.11.2013 um 16:01 Uhr:

      Korrekt. Danke :)

      Antworten
  5. Daniel
    schrieb am 13.11.2013 um 11:43 Uhr:

    Der Ansatz von calc() hat mir schon damals gefallen, als es mir das erste Mal über den Weg gelaufen ist. Ich muss mir unbedingt mal die Zeit nehmen eine Fallback-Variante dafür zu suchen. Die bereits weite (rein native) Unterstützung war mir bis dato noch gar nicht bekannt. Danke für’s erinnern. :)

    Antworten

Schreibe einen Kommentar zu Sumit Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →