Rechnen in CSS mit calc()

CSS3 hat das Rechnen gelernt! Nicht unbedingt das idealste Beispiel, um zu demonstrieren, dass CSS3 mit calc() rechnen kann, aber dafür ein einfaches und nachzuvollziehendes Beispiel. CSS hat hier zur Darstellung der Säulen echt gerechnet!

Ich habe hier im Beispiel Säulen dargestellt, die den Werten von 10%, 20%, 30%, 40% und 100% entsprechen. Die Höhe der unsortierten Listen habe ich mit 500px festgelegt, welches dann ja auch gleich meine 100% sind.

Um die Höhe der jeweiligen Säulen zu ermitteln, habe ich in der CSS-Datei rechnen lassen:

height: calc(100%/10*1);
Das ergibt rechnerisch 10%, 10% von 500px entsprechen 50px;

height: calc(100%/10*4);
Das ergibt rechnerisch 40%, 40% von 500px entsprechen 200px;

Wichtig war mir hier nur, das Handling zu üben, Anwendungsmöglichkeiten werden sich sicher ergeben, da habe ich keine Sorgen.

  • CSS3
  • 10%
  • HTML
  • 20%
  • php
  • 30%
  • CSS2
  • 40%
  • 100%
  • 30%
  • 40%
  • 20%
  • 10%

Bei den ersten vier Säulen habe ich Beschriftungen hinzugefügt. In Summe würde die Darstellung dann nicht sauber, wenn eine Säule 100% wäre, weil die „Beschriftung“ innerhalb der Liste auch Platz beansprucht.

Sicher hätte man das gleiche vielleicht besser ohne den Rechenweg lösen können, aber das wäre ja zu einfach, oder?
Welche Anwendungsmöglichkeiten benutzt Du heute schon und verwendest calc(), oder welche Anwendung kannst Du Dir vorstellen?

Als Ausgangsbeispiel hatte ich den Artikel auf webstandard.kulando.de gelesen.

Zum Ausprobieren hier die CSS und HTML: