CSS Playground.

Eine Übung mit CSS

Ohne den HTML-Quellcode zu verändern und ohne den Einsatz von Javascript lässt sich eine Menge erreichen — nur mit CSS.

CSS is mächtiger, als viele denken.

HTML und CSS ermöglichen es, semantisch sinnvollen Code zu erstellen und das Ergebnis in ein beliebiges Design zu verpacken. Das Web scheint das zu vergessen.

CSS is flexibler, als viele denken.

Es muss nicht immer Javascript sein. Mit CSS lässt sich mehr erreichen, als viele Webentwickler denken. Diese Übung soll das demonstrieren, und zwar ohne den Einsatz von Tools wie less oder sass und ohne den exzessiven Einsatz von CSS-Klassen und -IDs.

Aber warum?

Ordentlicher Code macht das Leben für alle Beteiligten leichter. Er ist leichter zu verändern, leichter zu erweitern und weniger anfällig für Bugs.

Das Ergebnis ist eben nicht das gleiche, nur, weil es gleich aussieht. Wenn dasselbe Resultat mit geringerem Ressourceneinsatz erreicht werden kann, dann muss die Frage "Warum nicht?" lauten. Der Einsatz von HTML-Elementen, wie ihn die Spezifikationen vorsehen auf der einen Seite, und wie er in der freien Wildbahn umgesetzt wird, könnte unterschiedlicher kaum sein. Verschachtelte <div>-Elemente, oder Code wie <span style="font-weight: bold;"> sind länger, unübersichtlicher und schlechter lesbar als ein <strong>-Element. Vor allem aber fehlt der ersten Version jegliche semantische Bedeutung und macht so das Parsen von Text schwieriger.

Und wie?

Einfach so. Sauberes HTML wird mit CSS verpackt und mit dem selbern Inhalt entstehen verschiedenen Seiten.

Der Ehrlichkeit wegen sollte erwähnt sein, dass diese Seite ein kleines Script verwendet. Allerdings nur, um das Wechseln zwischen den Stylesheets zu erleichtern.

Diese Seite ist ein Proof of Concept. Darstellungsfehler, vor allem bei älteren Browsern und bei Mobilgeräten sind zu erwarten.

Um zuletzt eine Seite mit mehr Inhalt zu simulieren, kommen hier noch einige Absätze.

Lorem Ipsum

Quisque posuere nulla bibendum blandit varius. Nunc eu ullamcorper sem, id suscipit felis. Curabitur congue et mi a accumsan. Aenean bibendum sodales placerat. Pellentesque interdum dapibus mi sit amet commodo. Aliquam sed arcu faucibus, ultrices libero at, vehicula erat. In suscipit nibh id lectus laoreet ornare.

Lorem Ipsum

Aenean placerat leo ac lorem accumsan bibendum. Aliquam consequat fringilla tortor, ut vehicula mauris eleifend a. In molestie venenatis lectus, ac eleifend tortor. Sed vehicula in orci nec elementum. Duis id sapien non tortor tempus tristique ut a lorem. Nullam porta at velit quis eleifend. Fusce non convallis magna. Maecenas mattis mollis nisl, in placerat diam tristique eu. Etiam ornare accumsan sagittis. Donec arcu risus, blandit quis placerat ac, ullamcorper posuere nisl.

Integer mi ante, efficitur nec nibh ut, dignissim iaculis diam. Nullam dapibus est libero, eu congue leo pretium sed. Nullam sit amet nibh velit. Donec nec euismod lectus, vitae posuere mauris.