alps hypertexte

Zur Technik des Frontends

Die Anwendung von einigen wenigen neuen HTML5-Schreibweisen und -Elementen und kosmetischen CSS3-Styles waren dabei nur eine Nebensache. Mein Augenmerk lag auf dem Experiment, das Layout hauptsächlich ohne Floats auszurichten. Floats waren ursprünglich dazu geschaffen, einen Text um ein anderes Objekt (meist ein Image) fließen zu lassen. Aber schon bald wurde erkannt, dass Floats auch eine gute Basis für komplexe Site-Layouts waren.

Aber float-basierte Layouts haben auch kleine Nachteile. Zum Beispiel ist die Code-Reihenfolge für das Float-Verhalten relevant, was bei faux absolut positionierten (FAP) Layouts ausgehebelt wurde (obwohl die Basis von FAP auch Floats sind). Ein gewichtigeres Argument ist aber die Renderingzeit im Browser. Floats reißen Elemente aus dem normalen Textfluss und müssen daher wieder aufgelöst werden. Bei komplexeren Layouts mit vielen Floats + Clearfixes und Scripten, die über die Struktur huschen, kann sich das durchaus auf die Performance einer Web-Applikation auswirken. Ich hatte bei einem komplexen Projekt in einer Agentur mal die Erfahrung gemacht, dass die Beseitigung einiger Floats und zugehöriger Clearfixe spürbare Verbesserungen bringen kann. Also warum nicht gleich völlig auf Floats verzichten?

Eine gute Alternative scheint das Layout auf Basis von display: inline-block zu sein (mehr dazu bei robertnyman.com oder onderhond.com). Also habe ich es kurzerhand mal am Frontend von monitorThis umgesetzt. Das Ergebnis kann sich in allen Browsern ab IE6 sehen lassen.

Eine Ausnahme jedoch gibt es. Einige Quellen liefern im Suchergebnis auch Bilder mit aus und auf den Markup dieser Quellen habe ich keinen Einfluss. In diesem einen Fall habe ich mir ein float: left; am Image erlaubt.