Grenzen von float sprengen

Deaktiviertes Javascript

Autor: Dr. Florence Maurice • 7.12.2011 • ca. 2:30 Min

Inhalt

Die beiden Klassen weisen Sie nach Bedarf den Elementen zu. Damit jQuery Masonry jetzt die Spalten richtig verteilt, geben Sie bei der Konfiguration des Plug-ins noch die Breite der schmaleren Spalte an, wobei Sie hier wieder von der Gesamtbreite, also zuzüglich padding und border ausgehen (215px +...

$('#galerie').masonry({
itemSelector: 'li',
columnWidth: 247,
isAnimated: true
});

Link-Tipps

css-tricks.com/9048-float-center robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks masonry.desandro.com masonry.desandro.com/docs/animating.html www.modernizr.com msdn.microsoft.com/en-us/ie/hh272902 www.adobe.com/devnet/html5/articles/css3-regions.html

Hier wurde außerdem isAnimated: true ergänzt. Damit wird die Neuanordnung der Elemente, die bei einer Größenänderung des Browserfensters stattfindet, schick animiert. Übrigens können Sie diese Animation bei der Anordnung der Elemente auch über CSS3 Transitions durchführen und nur, falls diese nicht funktionieren, auf die auf Javascript basierende Animation zurückgreifen.Um herauszufinden, ob der Browser CSS3 Transitions unterstützt oder die Fallbacklösung benötigt wird, lässt sich Modernizr einsetzten. Ein Beispiel dazu zeigt die Demoseite von jQuery Masonry.

Deaktiviertes Javascript

Das Layout basiert auf Javascript -aber was tun, falls Javascript deaktiviert ist? Es sollten in diesem Fall zumindest die Inhalte benutzbar bleiben.Um alternative Formatierungen bei deaktiviertem Javascript bereitzustellen, bietet sich Modernizr an. Binden Sie Modernizr in den Kopfbereich des Dokuments ein:

<script src="js/modernizr_custom.
js"></script>

Außerdem ergänzen Sie eine Klasse in Ihrem HTML-Element:

<html class="no-js">

Modernizr ersetzt diese Klasse durch js, sofern Javascript aktiviert ist. Damit lassen sich über .no-js #galeria li eigene Formatierungen für deaktiviertes Javascript definieren - beispielsweise könnte es sinnvoll sein, statt auf float zur Anordnung der Elemente auf display: inline-block zurückzugreifen:

.no-js #galeria li {
float: none;
display: inline-block;
}

Eine Finetuning des Layouts bei deaktiviertem Javascript ist sicher ein zu großer Aufwand, aber eine akzeptable und benutzbare Basisdarstellung sollte sich auf diesem Wege schnell erzielen lassen.Masonry bietet eine Menge weiterer schöner Möglichkeiten - so lässt es sich beispielsweise mit dem Plug-in Infinite Scroll kombinieren, bei dem alle Inhalte innerhalb einer langen Seite dargestellt werden, wobei diese aber dynamisch nachgeladen werden.

Möglichkeiten mit CSS 3

Bei den Layoutoptionen offenbart sich, was CSS3 zu bieten hat. So beschreiben gleich eine Reihe von Working Drafts die unterschiedlichen neuen Gestaltungsmöglichkeiten. Allein der Internet Explorer 10 unterstützt in seiner neuesten Preview fünf:

Über CSS Regions kann man Texte beinahe völlig frei anordnen und fließen lassen. CSS Regions sollen Magazin-ähnliche Layouts ermöglichen. Eine CSS-Regions-Demoseite zeigt Text, der ungewöhnlich fließt, etwa in Herz- oder Kreisform.
Das Grid-Layout-Modul vereinfacht die Anordnung von Elementen im Raster.
Über das Multicolumn-Modul können Sie Text automatisch auf Spalten aufteilen - Sie geben nur die Anzahl oder die Breite der Spalten vor und den Rest erledigt der Browser automatisch.
Mit dem FlexBox-Layout-Modul lassen sich grundlegende Aufteilungen leicht festlegen. Häufige Layoutprobleme wie eine immer unten befindliche Fußzeile oder auch eine vertikale Zentrierung bei unbekannter Höhe des Elements werden damit zum Kinderspiel.
Schließlich ermöglichen die positionierten Floats eine ganz freie Positionierung von Elementen, die dann vom Text umflossen werden.

Diese Möglichkeiten haben außer derletzten gemeinsam, dass sie garantiert floatfrei sind und ein intuitiveres Arbeiten ermöglichen als derzeit. Leider ist ihnen ebenfalls gemeinsam, dass die Browser-unterstützung derzeit noch zu mager ist, um sie für vollständige Seitenlayouts einzusetzen. So werden Sie also eine Weile noch zu Tricks greifen müssen, um die Beschränkungen von float zu umgehen.