4.6 Minimale & Maximale Breiten

Bei flexiblen Layouts kommt immer wieder der Ruf nach einer Begrenzung der Minimalbreite des Layouts bzw. einzelner Spalten auf. Ebenso interessant ist jedoch auch die Festlegung einer maximalen Breite, um breit gezogene Texte bei hohen Auflösungen und großem Browserfenster zu vermeiden.

Beide Wünsche lassen sich in modernen Browsern sehr einfach umsetzen. Hierzu werden die beiden Grenzwerte für die Breiten in der Datei basemod.css an den DIV-Container #page_margins übergeben:

#page_margins {
  min-width: 756px;
  max-width: 80em;
  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 ohne horizontale Scrollbalken auskommt.

Für die maximale Breite empfiehlt es sich, den Wert auf die Schriftgröße zu beziehen. Für dieses Tutorial wurde ein Wert von 100 em festgelegt. Abzüglich der Abstände zwischen den Spalten ergeben sich in etwa die üblichen 80 Zeichen pro Textzeile und damit bei passender Aufteilung der Spalten ein sehr harmonisches Schriftbild mit guter Lesbarkeit. Textzeilen werden so auch in großen Browserfenstern nicht endlos in die Breite gezogen.

Gleichzeitig bleibt die Skalierbarkeit erhalten, denn bei Vergrößerung der Schriftgröße im Browser wächst die maximale Breite proportional mit. Der Wert margin:auto; sorgt ab Erreichen der Maximalbreite für eine Zentrierung des Layouts im Browserfenster.

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

Generell haben die beiden CSS-Eigenschaften min-width und max-width keinen wirklichen Einfluss auf die Zugänglichkeit der Inhalte. Daher ist es auch kein Beinbruch, diese Funktionalität per CSS für moderne Browser zur Verfügung zu stellen und den IE außen vor zu lassen, statt zwanghaft zu patchen.

Meine Empfehlung: Abwarten, der Internet Explorer 7 ist auf dem Weg wird min-width, max-width sowie min-height und max-height unterstützen.

Dennoch möchte ich zumindest zwei Methoden vorstellen, die per Javascript dem Internet Explorer auf die Beine helfen. Beide funktionieren naturgemäß nur bei eingeschaltetem Javascript und haben unterschiedliche Vor- und Nachteile.

Variante 1: IE Expressions

Im Internet Explorer ist es über die proprietäre expression-Eigenschaft möglich, CSS-Eigenschaften zur Laufzeit per Javascript anzupassen. 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 Quirk-Modus versetzt werden, da es sonst definitiv zu Browserabstürzen kommt. Dafür lässt er sich auf unproblematische Weise in den Quirk-Modus versetzen, indem man dem XHTML-DocType (welcher eigentlich den Strict-Modus einschaltet) einen XML-Prolog voranstellt: <?xml version="1.0" encoding="iso-8859-1"?>. Und wieder einmal haben wir eine kleine Design-Schwäche schamlos ausgenutzt. Der IE5 befindet sich übrigens von Natur aus in diesem Modus.

    Der XML-Prolog hat nur Auswirkungen auf den Internet Explorer. Somit bleiben alle anderen Browser im Strict-Modus (so der gewählte DocType dies vorgibt). Zwar wird durch den Quirk-Modus gleichzeitig der Box-Model-Bug des Internet Explorers aktiv, doch dieser wird in YAML durch die Kapselung der DIV-Spalten auf einfache Weise umgangen.

  2. Der erforderliche CSS-Code ist nicht valide. Er lässt sich jedoch durch den Einbau der erforderlichen CSS-Anweisungen als Inline-CSS innerhalb eines Conditional Comments vor jedem Validator verstecken. Ein solcher Kommentar ist im Header eines YAML-Layouts immer vorhanden, um die Datei iehacks.css an den Internet Explorer zu übergeben.

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

    <style type="text/css">

    body { text-align: center; font-size: 0.83em;}

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

    Über den eingebauten Javascript-Befehl wird die aktuelle Größe des Browserfensters abgefragt. Die CSS-Eigenschaft width des DIV-Containers #page_margins wird in Abhängigkeit dieses Wertes festgelegt. Diese recht einfache Variante hat den Nachteil, dass sie nur mit Pixelgrößen funktioniert.

    Alternativ können die CSS-Anweisungen in ein gesondertes Stylesheet gepackt werden, z.B. iehacks.css, die sowieso nur der IE zu lesen bekommt.

Zur Verdeutlichung der Wirkungsweise ist diese Variante in der Testseite expressions_ie.html eingebunden.

artikel/modifikation/minmax_for_ie/expressions_ie.html

Der CSS-Code zeigt bereits den gravierendsten Nachteil auf - den Quirk-Modus. Im Quirk-Modus stellt der Internet Explorer die Schriftgrößen zu groß dar. Daher muss gleichzeitig mit dem Einbau dieses Javascript-Hacks gleich auch noch eine Korrektur der Schriftgröße vorgenommen werden.

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 wird im Header der Webseite eingebunden und stellt die volle Funktionalität von min-width und max-width bereit, indem es die CSS-Befehle selbst auswertet und die Rendering-Ausgabe des Internet Explorers entsprechend anpasst.

Der Einbau erfolgt innerhalb des Conditional Comments, über den bereits das alternative Stylesheet iehacks.css (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer) exklusiv an den Internet Explorer ausgeliefert wird. Im Gegensatz zu Variante 1 braucht hierbei der Internet Explorer nicht in den Quirk-Modus versetzt werden.

<!--[if lte IE 6]>
<link href="css/iehacks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->

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

artikel/modifikation/minmax_for_ie/minmax_js.html

Diese Methode hat ebenfalls einen entscheidenden 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 anschließend auf die korrekte Breite springt. Dieses Springen ist sichtbar und kann beim Surfen innerhalb einer Website schnell störend wirken.

»»» Abschnitt 4.7: Layoutentwurf "2col_left_vlines"