4.6 Minimale & Maximale Breiten flexibler Layouts

Bei flexiblen Layouts kommt immer wieder der Ruf nach einer Begrenzung der Minimalbreite des Layouts bzw. einzelner Spalten auf. In erster Linie wird damit verhindert, dass sich das Layout unkontrolliert zusammenschieben lässt. Hierfür wird die Auflösung von 800x600 Pixeln als praktische Untergrenze heutiger Desktopauflösungen gesehen.

Ebenso interessant ist jedoch auch die Festlegung einer maximalen Ausdehnung einer Webseite in der Breite. Laufen Textzeilen von Fließtexten zu weit, werden die Wege für das Auge zu lang und die Texte sind schwerer lesbar. Im schlimmsten Fall schrumpfen mehrzeilige Absätze bei großen Bildschirmbreiten auf einzelne Zeilen zusammen. Auch solche typrographischen Probleme sind Barrieren und sollten vermieden werden denn sie erschweren Nutzern unnötig den Zugang zu den Informationen der Seite.

Beide Wünsche lassen sich in modernen Browsern mit CSS sehr einfach umsetzen. Hierzu werden über die Eigenschaften min-width und max-width Grenzwerte für die minimalen und maximalen Layoutbreitenbreiten definiert. Im Layout der YAML-Dokumentation geschieht dies in der Datei basemod.css. Die Grenzwerte werden an den DIV-Container #page_margins übergeben, da er alle weiteren Elemente des Layouts umschließt:

#page_margins {
  min-width: 756px;
  max-width: 100em;
  margin:auto;
}

Für die minimale Breite wird ein Wert von 760 Pixeln festgelegt. Damit ist sichergestellt, dass die Webseite bei einer Bildschirmauflösung von 800x600 Pixeln in allen Browsern ohne horizontale Scrollbalken auskommt. Da sich dieser Grenzwert an einer Desktop-Auflösung orientiert, ist die Einheit Pixel (PX) hier eine vernünftige Wahl.

Für die maximale Breite empfiehlt es sich hingegen, den Grenzwert auf die Schriftgröße zu beziehen. Ein fester Wert in der Einheit Pixel würde bei der Vergrößerung der Schriften Probleme bereiten, da sich das Layout dem Textzoom in der Breite nicht anpasst. Ungewollte Umbrüche von Texten und Bildern im Layout wären die Folge. Durch den Bezug zur Schriftgröße über die Einheit EM kann dieses Problem vermieden werden. Die Maximalbreite richtet sich nach der verwendeten Schriftgröße.

Im Layout der YAML-Dokumentation habe ich mich für einen Grenzwert von 100 em entschieden. Abzüglich der Randabstände und Zwischenräume zwischen den einzelnen Spalten verbleiben damit in etwa 80 Zeichen pro Textzeile - ein Wert, der auch im Druck Anwendung findet. Bei passender Aufteilung der Spalten ergibt sich damit ein harmonisches Schriftbild mit guter Lesbarkeit. Dank dem Bezug zur Schriftgröße wird das Layout auch in großen Browserfenstern nicht endlos in die Breite gezogen. Die Maximalgröße ergibt sich in Relation zum Textzoom.

Umsetzungsprobleme im Internet Explorer 5.x und 6.0

IE 6Wieder einmal ist es der Internet Explorer, der dem Seitenersteller das Leben schwer macht. Er unterstützt bis zur Version 6.0 weder min-width noch max-width.

Generell haben die beiden CSS-Eigenschaften min-width und max-width keinen sehr großen Einfluss auf die Zugänglichkeit der Inhalte, denn viele Nutzer passen die Breite des Browserfensters bei flexiblen Layouts selbstständig an. Daher ist es kein Beinbruch, diese Funktionalität per CSS für moderne Browser zur Verfügung zu stellen und den IE 5.x und IE 6 außen vor zu lassen, statt ihm diese Funktionalität durch komplizierte CSS-Konstrukte aufzuzwingen.

Mit dem Internet Explorer 7.0 bietet nun endlich auch Mircosofts Browser die Unterstützung der CSS-Eigenschaften min-width, max-width sowie min-height und max-height. Neben den zahlreichen beseitigten CSS-Bugs und der Erhöhung der Sicherheit beim Surfen ist diese Neuerung für Webdesigner ein Segen. Man kann daher nur wünschen, dass sich der IE7 schnell verbreitet.

Dennoch ist derzeit der Internet Explorer 6 der Platzhirsch. Er beherrscht nach wie vor alle Browserstatistiken und wird sicherlich nicht so schnell von der Bühne verschwinden, auch wenn sein Marktanteil durch den IE7 schrumpfen wird. Ich möchte daher zumindest zwei Methoden vorstellen, die per Javascript dem Internet Explorer 6 auf die Beine helfen. Beide Varianten funktionieren naturgemäß nur bei eingeschaltetem Javascript und haben unterschiedliche Vor- und Nachteile.

Variante 1: IE Expressions

Im Internet Explorer ist es über proprietäre Javascript-Expressions möglich, Werte von CSS-Eigenschaften zur Laufzeit abzufragen und zu modifizieren. Ein Beispiel zur Anwendung von Expressions finden Sie in dem Artikel "Min- und Max-Width auch für den IE". Damit lassen sich verschiedene CSS-Eigenschaften, wie min-height oder min-width im Internet Explorer nachbilden.

Der Einbau folgt in 2 Schritten, beinhaltet jedoch auch 2 Nachteile, über die man sich vor der Verwendung im Klaren sein sollte:

  1. Der Internet Explorer 6 muss zwingend in den Quirks Modus versetzt werden, da es sonst definitiv zu Browserabstürzen kommt. Dafür lässt er sich auf unproblematische Weise in den Quirks Modus versetzen, indem man einem beliebigen Doctype (z.B. XHTML 1.0 Transitional, der eigentlich den Standard Modus aktiviert) einen XML-Prolog voranstellt:

    <?xml version="1.0" encoding="iso-8859-1"?> <!-- Erzwingt Quirk-Modus im IE 6 -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ...

    Und wieder wird eine kleine Design-Schwäche des Internet Explorers schamlos ausgenutzt. Der IE 5.x befindet sich übrigens von Natur aus im Quirks Modus.

    Der XML-Prolog hat nur Auswirkungen auf den Internet Explorer. Somit bleiben alle anderen modernen Browser in dem durch den verwendeten Doctype vorgegebenen Modus. Zwar wird durch den Quirks Modus im IE 6.0 gleichzeitig der Box-Modell-Bug aktiv, doch dieser wird in YAML durch die Verschachtelung der Spaltencontainer (#colx und #colx_content) auf einfache Weise umgangen.

  2. Der erforderliche CSS-Code ist nicht valide. Er lässt sich jedoch durch den Einbau der CSS-Anweisungen als Inline-CSS innerhalb eines Conditional Comments vor jedem Validator verstecken.

    <!--[if lte IE 6]>
    ...

    <style type="text/css">

    body { text-align: center;}

    #page_margins {
        text-align: left;
        width: expression(((document.body.clientWidth)) < 760? "760px":
               ((document.body.clientWidth)) > 1050? "1050px": "auto" );
    }
    </style>
    <![endif]-->

    Alternativ können Sie die CSS-Anweisungen auch als layoutabhängige Anpassung für den IE in einer Anpassungdatei iehacks_[layout].css übergeben.

    Über die Javascript-Expression wird die aktuelle Größe des Browserfensters abgefragt. Die CSS-Eigenschaft width des DIV-Containers #page_margins wird in Abhängigkeit des aktuellen Wertes manipuliert. Diese recht einfache Variante hat den Nachteil, dass sie nur mit Pixelwerten sinnvoll einsetzbar ist, da sie Wertabfrage immer Pixelwerte als Vergleichsbasis liefert.

Zur Verdeutlichung der Wirkungsweise ist diese Variante in der Testseite expressions_ie.html innerhalb des Conditional Comment eingebunden. Gleichzeitig wird in diesem Beispiel eine Layoutzentrierung verwendet, die auch im Internet Explorer 5.x funktioniert.

artikel/modifikation/minmax_for_ie/expressions_ie.html

Variante 2: Externes Javascript »minmax.js«

Dem YAML-Downloadpaket liegt im Verzeichnis Hilfsmittel/Javascript die Javascript-Datei minmax.js von doxdesk.com bei. Diese Datei kann im Header der Webseite eingebunden werden und stellt die volle Funktionalität der Eigenschaften min-width, max-width sowie min-height und max-height bereit, indem es die CSS-Anweisungen selbstständig auswertet und die Rendering-Ausgaben des Internet Explorers entsprechend anpasst.

Der Einbau des Scripts sollte praktischerweise innerhalb des Conditional Comments erfolgen, um es ausschließlich den Versionen 5.x und 6.0 des Internet Explorers zugänglich zu machen (<!--[if lte IE 6]>). Im Internet Explorer 7 wird dieses Script nicht mehr benötigt, da dieser Browser die CSS-Eigenschaften vollständig interpretiert.

Im Gegensatz zu den Javascript-Expressions hat dieser Weg den Vorteil, dass der Internet Explorer hierbei nicht in den Quirks Modus versetzt werden muss.

<head>
...
<!--[if lte IE 7]>
<link href="../css/iehacks_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lte IE 6]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
</head>

Das war's bereits - mehr Arbeit ist nicht nötigt. Die Wirkungsweise des Javascripts können Sie sich am besten auf der Testseite minmax_js.html ansehen.

artikel/modifikation/minmax_for_ie/minmax_js.html

Dieses Javascript hat jedoch ebenfalls einen Nachteil. Das Javascript wird erst abgearbeitet, nachdem die Seite vollständig gerendert wurde. Das bedeutet, dass bei einem zu großen oder zu kleinen Browserfenster die Seite zunächst ohne die Einwirkung von min-width oder max-width gerendert wird und das Layout erst nach einigen zehntel Sekunden auf die vorgegebene Mindest- oder Maximalbreite springt. Dieses Springen ist für den Nutzer sichtbar und kann beim Surfen innerhalb einer Website durchaus störend wirken. Sie sollten die Arbeitsweise daher vor dem Einbau testen.

»»» Abschnitt 4.7: Layoutentwurf "2col_left_vlines"