Funktionen für ein adaptives Layout

Internet Explorer 10 bietet Funktionen für das Zuweisen von verschiedenen Stilen, Layouts und Skalierungsfaktoren basierend auf dem Typ der verwendeten Anzeigeoptionen. Zudem bietet Internet Explorer 10 neue Typen von adaptiven CSS (Cascading Style Sheets)-Layoutmethoden, die das effektive Nutzen des verfügbaren Bildschirmplatzes auf einer Vielzahl von Geräten mit unterschiedlichen Auflösungen erheblich erleichtern.

Dieses Thema enthält die folgenden Abschnitte:

• Medienabfragen
• CSS-Geräteanpassung
• CSS-Rasterlayout
• Flexibles CSS-Verschachtelungslayout
• CSS-Mehrspaltenlayout
• Verwandte Themen

Medienabfragen

Medienabfragen ermöglichen es Ihnen, Ihre Seite basierend auf einer Reihe von Kriterien auf Ihre Benutzer anzupassen. Sie können eine Reihe von Stilen festlegen, die nur auf eine Webseite angewendet werden, wenn für das Seitenverhältnis des Browsers z. B. der Hochformatmodus (Höhe größer als Breite) oder Querformatmodus (Breite größer als Höhe) aktiviert ist. Weitere von Internet Explorer 10 unterstützten Medienfeatures umfassen Auflösung, Möglichkeiten der Farbdarstellung und das Seitenverhältnis des Anzeigegeräts (d. h. des Bildschirms statt des Browsers). Ab Windows Internet Explorer 9 unterstützte Medienfeatures sind weiter unten unter Medienabfragen aufgeführt.

Seit 19. Juni 2012 hat die Medienabfragen-Spezifikation den vollständigen Empfehlungsstatus des World Wide Web Consortium (W3C). Medienabfragen werden in den meisten aktuellen Browsern unterstützt, so auch in Internet Explorer 9. In Internet Explorer 10 werden Medienabfragelistener gemäß dem CSSOM-Ansichtsmodul unterstützt.

Das Folgende ist eines der gängigsten Formate einer Medienabfrage:

@media all and ( media_feature ) [and ( media_feature ) ] { styles }

In diesem Fall kann media_feature eine beliebige unterstützte (ggf.) auf einen gültigen Wert festgelegte Medienfunktion sein. Sie haben die Möglichkeit, mehrere Medienfunktionen hinzuzufügen, um weitere Kriterien einzuführen. Wenn die Seite in einem Browser aufgerufen wird, der dem von den Medienfunktionen beschriebenen Profil entspricht, werden die styles auf den Inhalt angewendet.

Medienabfragen können auch in Kombination mit neuen Layoutfeatures in Internet Explorer 10 verwendet werden, z. B. CSS-Geräteanpassung, CSS-Rasterlayout, CSS-Flexbox-Layout und CSS-Mehrspaltenlayout.

CSS-Geräteanpassung

Die Spezifikation W3C CSS-Geräteanpassung bietet eine Möglichkeit, die vom Benutzer-Agent (User Agent, UA) festgelegte Viewport-Größe außer Kraft zu setzen: die @viewport-Regel. Die @viewport-Regel (oder vielmehr die @-ms-viewport-Regel in Internet Explorer 10) ermöglicht Ihnen das Festlegen der Bedingungen, unter denen die Skalierung Ihre Seite auf die Bildschirmgröße des Benutzers angepasst wird, und welche Auflösung dabei verwendet wird. Die @-ms-viewport-Regel wurde entwickelt, um eine ähnliche Funktionalität wie die des HTML-Metatags "viewport" zu bieten, das zuerst von Apple für den Browser "Safari" in iOS implementiert wurde, jedoch mit einem interoperablen, standardisierten Verfahren. Wenn das Fenster schmaler als 1024 Pixel ist, wird Inhalt von Internet Explorer 10 standardmäßig automatisch skaliert, z. B. im angedockten Zustand oder Hochformat. Im folgenden Beispiel ist eine gängige Verwendung der @-ms-viewport-Regel dargestellt. Diese Auswahl kann verwendet werden, um eine kleine Version der Webseite für die Anzeige im angedockten Zustand zu optimieren.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

Jeder Viewport, der schmaler ist als 400 Pixel, (z. B. der angedockte Zustand) wird auf eine Breite von 320 Pixeln ausgelegt und passend skaliert. Das darunter aufgeführte CSS (das wahrscheinlich für einen kleinen Bildschirm optimiert wurde) wird angewendet.

Wenn diese automatische Skalierung nicht erforderlich oder gewünscht ist, z. B. bei reaktionsfähigen Mustern für Webdesign, kann das device-width-Schlüsselwort bedeuten, dass die Seite so optimiert ist, dass sie unabhängig von der Breite des Geräts funktioniert.

@-ms-viewport { width: device-width; }

Die Spezifikation zur CSS-Geräteanpassung von W3C befindet sich derzeit in der Arbeitsentwurfsphase und wird in Internet Explorer 10 im Format mit Herstellerpräfix (@-ms-viewport) unterstützt.

CSS-Rasterlayout

Das CSS3-Rasterlayout (Cascading Stylesheets, Stufe 3) ist neu in Internet Explorer 10 und ermöglicht eine höhere Layoutflexibilität als mit Anzeigeelementen oder Skripts. Es ermöglicht das Teilen des Raums für die Hauptbereiche einer Webseite entweder basierend auf eine festgelegten Menge, dem verfügbaren Platz im Browserfenster oder einer Kombination aus beidem. Mit dem Rasterlayout können Sie Elemente als Spalten und Zeilen ausrichten, ohne eine explizite Inhaltsstruktur zu definieren. Daher bietet das Rasterlayout mehr Flexibilität als HTML- oder CSS-Tabellen. Durch die Verwendung des Rasterlayouts mit Medienabfragen kann Ihr Layout Änderungen am Geräteformularfaktor, der Ausrichtung, der Auflösung usw. nahtlos übernehmen.

Die Spezifikation zum CSS-Rasterlayout befindet sich derzeit in der Arbeitsentwurfsphase und wird in Internet Explorer 10 im Format mit Herstellerpräfix unterstützt. Eine vollständige Liste der unterstützten Eigenschaften finden Sie auf der MSDN-Website unter Rasterlayout. Da sich die Spezifikation für das Rasterlayout zurzeit noch in der Entwicklungsphase befindet, entspricht die Unterstützung in Internet Explorer 10 u. U. nicht genau den Angaben in der Spezifikation.

Im Folgenden sehen Sie ein einfaches Beispiel für eine Verwendung des Rasterlayouts. Mithilfe von Medienabfragen und des Rasterlayouts können Sie das Layout einer Webseite so konfigurieren, dass es entweder für das Hoch- oder Querformat optimiert ist. Im Hochformat ist die Höhe des Browsers größer als die Breite. Im Querformat ist die Breite des Browsers größer als die Höhe.

Das folgende Seitenlayout ist so konfiguriert, dass es sich basierend auf der Ausrichtung ändert. Im Querformat sind Seitenelemente so angeordnet, dass der verfügbare horizontale Bereich genutzt wird. Im Hochformat werden die Seitenelemente, die im Querformat horizontal angeordnet waren, in den oberen Seitenbereich verschoben, um den verfügbaren vertikalen Bereich zu nutzen. Dieses Verhalten eignet sich besonders für Internet Explorer in der neuen Windows-Benutzeroberfläche, da sich das Seitenlayout basierend auf der Ausrichtung des Geräts automatisch ändert.

Dieser Screenshot zeigt eine Seite im Querformatmodus in Internet Explorer für den Desktop:

Das Ändern der Ausrichtung der Seite zum Hochformat ändert auch das Layout wie folgt:

Weitere Informationen sowie ein ähnliches Rasterlayout für Ihre Verwendung finden Sie unter So erstellen Sie mit dem CSS-Raster ein adaptives Layout.

Flexibles CSS-Verschachtelungslayout

Ähnlich wie das CSS-Rasterlayout ermöglicht Ihnen auch das flexible CSS-Verschachtelungslayout ("Flexbox") das dynamische Umbrechen sowie das Ändern der Größe und der Ausrichtung von Seitenelementen wie z. B. Menüs Symbolleisten gemäß dem Seitenlayout. Flexbox ist ein leistungsfähiges Tool zum einfachen Ausrichten von Inhalt auf komplexen Webseiten.

Das CSS-Modul für flexibles Verschachtelungslayout befindet sich derzeit in der Arbeitsentwurfsphase und wird in Internet Explorer 10 im Format mit Herstellerpräfix unterstützt. Eine vollständige Liste mit unterstützten Eigenschaften finden Sie in MSDN unter "Flexbox"-Layout.

Im Folgenden sehen Sie ein einfaches Beispiel für die Verwendung des "Flexbox"-Layouts. Dieses Beispiel ist in der Internet Explorer-Beispielgalerie verfügbar und zeigt die Erstellung einer Symbolleiste, deren Größe gemäß dem Layout der Webseite verändert wird. Dieses Bild zeigt die Symbolleiste, wenn sich die Seite im Querformat befindet:

Hier werden mehrere Vorgänge ausgeführt:

• Die Symbolleiste wird gemäß dem "Flexbox"-Layoutmodus (display: -ms-flexbox;) ausgerichtet
• Die Schaltflächen der Symbolleiste werden auf "justify"—überschüssiger Platz zwischen den Schaltflächen wird gleichmäßig verteilt (-ms-flex-pack: justify;)
• Die Schaltfläche Play wird so konfiguriert, dass sie mehr Platz einnimmt als die anderen (-ms-flex: 3 1 100px;)
• Die Schaltflächen Vol + und Vol - befinden sich einer eigenen Flexbox und werden übereinander angezeigt (-ms-flex-direction: column;)

Wenn die Webseite sich im Hochformat befindet (die Höhe ist größer als dir Breite) ändert sich das Layout der Symbolleiste, sodass die neuen Abmessungen genutzt werden:

Dies wird mithilfe einer Medienabfrage (@media (orientation:portrait)) erzielt, die folgende Verhaltensweisen auslöst:

• Die Symbolleiste wird so konfiguriert, dass Sie vertikal angezeigt wird (-ms-flex-direction: column;)
• Die Schaltflächen Vol + und Vol - befinden sich wieder in einer eigenen Flexbox und werden nebeneinander angezeigt (-ms-flex-direction: row;)
• Den Schaltflächen Reverse und Forward wurden höheren Ordnungsgruppennummer zugewiesen (-ms-flex-order: 2). Dies bedeutet, dass die Schaltfläche Reverse in der Reihenfolge des Dokumentobjektmodells (DOM) vor der Schaltfläche Play angezeigt wird, auch wenn sie in der vertikalen Symbolleiste nach der Schaltfläche Play und den Lautstärke-Schaltflächen angezeigt wird, da diese implizit der Ordnungsgruppe 1 angehören.

Das vollständige Beispiel finden Sie unter Beispiel für CSS-Flexbox in der Internet Explorer-Beispielgalerie.

CSS-Mehrspaltenlayout

In Internet Explorer 10 wird Unterstützung für ein mehrspaltiges CSS3-Layout eingeführt, mit dem Inhalt in mehrere Spaltenfelder anstatt nur eines einfließen kann. Sie können jetzt zeitungsähnliche Spalten erstellen, die das Lesen mit verschiedenen Bildschirmgrößen und Auflösungen erleichtern.

Dank der Unterstützung des mehrspaltigen Layouts können Sie Folgendes festlegen:

• die Breite der Spalten (column-width; wenn nichts anderes festgelegt wird, passen ebenso viele Spalten in den verfügbaren Platz)
• die Anzahl der Spalten, die für ein Element erforderlich sind (column-count)
• optionale Spaltenabstände und Trennlinien (column-gap und die column-rule-Eigenschaften)
• das Umbruchverhalten zwischen Spalten (die break-Eigenschaften)
• die Spaltenspanne (column-span)
• gleichmäßiges Verteilen des Spalteninhalts (column-fill)

Das CSS-Mehrspaltenlayout-Modul hat derzeit den W3C-Status "Candidate Recommendation" (Empfehlungskandidat) und wird in Internet Explorer 10 ohne Herstellerpräfix unterstützt. Eine vollständige Liste mit unterstützten Eigenschaften finden Sie in MSDN unter Mehrspaltiges Layout.

Verwandte Themen

Entwickeln von adaptiven Websites

Funktionen für adaptive Eingabebehandlung