Erstellen von HTML5-Anwendungen

Verwendung von CSS3-Medienabfragen für die Erstellung von Websites mit optimierter Reaktionsfähigkeit

Brandon Satrom

In diesem Artikel wird die Internet Explorer 10 Platform Preview behandelt. Änderungen an allen Informationen in diesem Artikel sind vorbehalten.

Vor einigen Jahren kam ein Kunde auf mich zu, der eine Website nur für mobile Geräte erstellen wollte, die junge, technisch versierte Benutzer ansprechen sollte. Das Projekt wurde uns als „iPhone-Website“ angekündigt und es lag bereits ein komplett ausgearbeitetes Konzept vor. Wir waren begeistert, solch eine innovative Anwendung für mobile Geräte zu entwickeln, fingen damit an und kamen auch gut voran – bis wir auch die anderen mobilen Geräte auf dem Markt berücksichtigen mussten. Dieser Kunde verlangte, dass so gut wie alle diese Geräte unterstützt werden sollten. So begann unser Versuch, zwei der wichtigsten Fragen von Webentwicklern zu beantworten, wenn sie sich mit der Entwicklung von maßgeschneiderten Anwendungen für mobile Geräte befassen: Woher weiß man, wann Handhabung und Design eines mobilen Browsers verändert werden müssen, und wie werden die erforderlichen Änderungen durchgeführt?

Reaktionsfähiges Webdesign

Diese Fragen stehen an zentraler Stelle bei reaktionsfähigem Webdesign, ein Ausdruck, den Ethan Marcotte prägte (bit.ly/aO2cFa). Bei reaktionsfähigem Webdesign geht es darum, kontextabhängige Anhaltspunkte im Browser dazu zu verwenden, das Erscheinungsbild und sogar das Verhalten einer Website anzupassen. Es ist wichtig, auf Informationen vom Browser mit maßgeschneidertem und attraktivem Design zu reagieren, das den Erwartungen des Benutzers bei der Handhabung dieses Geräts entspricht. Wenn durch die richtigen Anhaltspunkte genügend Informationen über den Browser und das fragliche Gerät zur Verfügung stehen, ist es möglich, Anpassungen wie wechselnde Bildfolgen und flüssige Layouts anzubieten.

Normalerweise erhält man diese kontextabhängigen Anhaltspunkte durch Analyse der vom Browser dargestellten Zeichenfolge des Benutzer-Agent – dieses Vorgehen wird auch Browser- oder UA Sniffing genannt – und diese Informationen werden dann verwendet, um das weitere Vorgehen zu bestimmen. Ich habe die Benutzer-Agent-Ermittlung (UA Sniffing) in der Ausgabe vom September 2011 in folgendem Artikel behandelt: „Kein Browser bleibt unberücksichtigt: Eine Strategie für die Einführung von HTML5“ (msdn.microsoft.com/magazine/hh394148). Ich habe dort angemerkt, dass Browser-Sniffing unzuverlässig ist und im Prinzip durch Funktionserkennung ersetzt wurde. Diese erlaubt es, Entscheidungen über Markup, CSS und JavaScript basierend auf vorhandenen Funktionen zu treffen, anstatt auf der Basis eines vorhandenen Browsers und dessen Version.

Im Zusammenhang mit reaktionsfähigem Webdesign unterstützen alle modernen Desktopbrowser und die gängigen mobilen Browser die Funktion „Medienabfragen“. Dies ist ein CSS3-Modul, das die mit CSS 2.1 eingeführten Medientypen – es können alternative Stylesheets für Druck, Bildschirm und Ähnliches festgelegt werden – um die Möglichkeit erweitert, einige der physischen Eigenschaften eines Geräts zu bestimmen, das eine Website besucht. Ähnlich dem zugrunde liegenden Verwendungsprinzip der Funktionserkennung, kann man über gezielte Medienabfragen die entscheidenden kontextabhängigen Anhaltspunkte für einen aktuellen Besucher erhalten. Diese können dann zur optimierten Anpassung der gelieferten Lösung verwendet werden. Die Leistungsstärke von Medienabfragen liegt darin, dass sie solche Anhaltspunkte direkt in die Stylesheets liefern.

Dieser Artikel gibt eine Übersicht über das CSS3-Modul „Medienabfragen“. Ich erläutere kurz Syntax und Verwendung und zeige dann an einem einfachen Beispiel, wie Medienabfragen zur Erstellung von Ansichten für eine Onlinefotogalerie für Smartphones und Tablets verwendet werden können. Zum Schluss habe ich noch einen Tipp für alle Entwicklungsmethoden für mobile Geräte, bevor wir mit einer kurzen Diskussion über Medienabfragenlistener abschließen. In einer separaten Spezifikation des World Wide Web Consortium (W3C) (bit.ly/wyYBDG) wird eine API bereitgestellt, die Reaktionen auf Änderungen in der Medienumgebung via JavaScript ermöglicht. Am Ende dieses Artikels sollten Sie über eine solide Basis für die Erstellung von reaktionsfähigen Websites verfügen sowie für Anwendungen, die nur CSS und ein paar angepasste Formatvorlagen verwenden.

CSS-Medienabfragen

Wie bereits erwähnt, unterstützt CSS 2.1 aktuell medienabhängige Stylesheets auf der Basis von „Medientyp“-Deklarationen (bit.ly/xhD3HD). Das folgende Markup veranschaulicht die Verwendung von Medientypen bei der Definition von Conditional Stylesheets:

    <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />

Wenn diese Elemente vorhanden sind, lädt die Website ein anderes als das standardmäßige (oder „Bildschirm“-) Stylesheet, sobald eine Seite im Druckvorschaumodus geladen wird. So praktisch diese Funktion auch ist (obwohl sie in der Vergangenheit nicht oft verwendet wurde), liefert sie doch keine nützlichen kontextabhängigen Anhaltspunkte zur Erstellung von wirklich reaktionsfähigen Websites. Und obwohl die Spezifikation der Medientypen die genaue Verwendung von 10 Medientypen angibt, haben Browseranbieter die spezifizierten Typen nie umfassend angewendet.

Das media-Attribut bietet sich jedoch als solide Grundlage an, und das W3C hat beschlossen, Medienabfragen (bit.ly/zbIeDg) darauf aufzubauen. Wenn Sie einen Medientyp (wie „print“, „screen“ oder „all“) angeben, können Sie über Medienabfragen dem media‑Attribut Ausdrücke hinzufügen, die das Vorhandensein bestimmter Medienfunktionen überprüfen, wie z. B. Breite, Höhe, Ausrichtung und sogar die Bildschirmauflösung des aktuellen Geräts. Im folgenden Beispiel wird das Stylesheet „main.css“ geladen, wenn der Medientyp „screen“ ist und die Gerätebreite mindestens 800 Pixel beträgt:

    <link rel="stylesheet" media="screen and (min-width: 800px)" href="main.css" />

Die Medienabfrage befindet sich in der Klammer. Die linke Seite gibt mit einem optionalen Min- oder Max-Modifizierer die zu prüfende Eigenschaft (Breite) an, die rechte Seite gibt den Wert dieser Eigenschaft an. Wenn das fragliche Gerät oder der Browser einen Bildschirm mit einer Mindestbreite von 800 Pixeln bereitstellt, werden die Formatvorlagen in „main.css“ darauf angewendet. Andernfalls werden die Formatvorlagen nicht angewendet. Dies illustriert, wie Medienabfragen Entwicklern nützliche kontextabhängige Anhaltspunkte für die Erstellung reaktionsfähiger Websites und Anwendungen zur Verfügung stellen.

Erste Schritte

Ich habe bereits darauf hingewiesen, dass CSS3-Medienabfragen von den neuesten Versionen aller gängigen Browser unterstützt werden(bit.ly/wpamib), sodass Sie sie sofort einsetzen können. Es gibt drei Möglichkeiten, Medienabfragen für Websites zu nutzen. Die erste Möglichkeit besteht darin, vollständige Stylesheets bedingt zu laden, wie im vorigen Beispiel gezeigt. Bei der zweiten Methode können in den Stylesheets @import-Direktiven verwendet werden. Hier ist derselbe Test, diesmal als Import-Direktive:

    @import url("main.css") screen and (min-width: 800px);

Genau wie im ersten Beispiel wertet die Anweisung die Breite des aktuellen Geräts aus. Wenn sie mindestens 800 Pixel beträgt, wird „main.css“ geladen und die enthaltenen Formatvorlagen angewendet.

Als letzte Möglichkeit können Sie Medienabfragen in CSS inline mit der @media-Direktive verwenden, wie hier beschrieben:

    @media screen and (min-width: 800px) { ... }

In diesem Fall werden die Formatvorlagen nicht in einer separaten Datei definiert, sondern inline in einem vorhandenen Stylesheet. Sie werden von einer Medienabfrage umschlossen, die sicherstellt, dass diese Formatvorlagen nur angewendet werden, wenn dies gewünscht ist.

Werfen wir zuerst in einem einfachen Beispiel einen Blick auf Medienabfragen in Aktion. Wenn Sie es zuhause selbst ausprobieren möchten, sehen Sie sich den Beispielcode zu diesem Artikel an, oder öffnen Sie Ihren bevorzugten IDE oder Text-Editor und fügen Sie das Markup aus Abbildung 1 ein.

Abbildung 1 Ein HTML-Beispieldokument

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="media.css">
      </head>
      <body>
        <article id="small">This is a small screen</article>
        <article id="medium">This is a medium screen</article>
        <article id="large">This is a large screen</article>
        <article id="landscape">... and you're in landscape mode...</article> 
      </body>
    </html>

Erstellen Sie als nächstes im selben Ordner ein Stylesheet mit dem Namen „media.css“ und fügen Sie die in Abbildung 2 definierten Formatvorlagen hinzu. Wie Sie sehen, habe ich alle @media-Direktiven am Ende der Datei definiert; ich empfehle Ihnen, in Ihren Stylesheets genauso vorzugehen. Falls Sie mehrere Stylesheets in Ihrem Markup definieren möchten, sollten Sie auch <link>-Elemente für spezifische Stylesheets im Anschluss an die vorrangigen Stylesheets platzieren. Aufgrund des kaskadierenden Verhaltens von CSS sollten die medienspezifischen Regeln möglicherweise Vorrang vor den primären Regeln haben und entsprechend definiert werden. Wie Sie sehen, habe ich die Formatvorlagen für die Artikel- und Textkörperelemente definiert, und erst im Anschluss daran die Medienabfragen (mit den damit verbundenen Regeln) für jedes gewünschte Anzeigeverhalten. Bildschirmen, die kleiner als 480 Pixel sind, wird ein Satz zusätzlicher Formatvorlagen zugeordnet, Bildschirmen zwischen 480 Pixel und 1024 Pixel wird ein weiterer Satz zugeordnet, und Bildschirmen, die größer als 1024 Pixel sind, wird ein dritter Satz Formatvorlagen zugeordnet. Ich habe auch eine Abfrage zur Ausrichtung hinzugefügt und werde für Geräte mit Anzeige im Querformat noch einen weiteren Formatvorlagensatz zuweisen.

Abbildung 2 CSS-Medienabfragen, die mit der @media-Direktive inline definiert werden

    article {
      display: none;
    }
    body {
      font-size: 24px;
      font-weight: 800;
      color: white;
    }
    @media screen and (max-width: 480px) {
      body {
        background-color: #ff2a18;
      }
      #small {
        display: inline;
      }
    }
    @media screen and (min-width: 480px) and (max-width: 1024px) {
      body {
        background-color: #00ff00;
      }
      #medium {
        display: inline;
      }
    }
    @media screen and (min-width: 1024px) {
      body {
        background-color: #0000ff;
      }
      #large {
        display: inline;
      }
    }
    @media screen and (orientation: landscape) {
      body {
        background-color: #ff7f00;
      }
      #landscape {
        display: inline;
      }
    }

Wenn Sie die Seite, wie in Abbildung 1 und das Stylesheet, wie in Abbildung 2 dargestellt, erstellt haben, öffnen Sie die Seite in einem beliebigen Browser. Das Testen der Medienabfragen ist einfach, Sie können es auch ohne mobiles Gerät ausführen. Verändern Sie die Größe des Browserfensters und beobachten Sie, wie sich der Text und die Hintergrundfarben abhängig vom Kontext des sichtbaren Fensters ändern.

Nachdem wir jetzt die Grundlage für Medienabfragen geschaffen haben, gehen wir einen Schritt weiter und sehen uns ein realistischeres Beispiel an. In diesem Beispiel füge ich einer Onlinefotogalerie Medienabfragen hinzu, durch die ich Smartphones und Tablets unterstützen kann. Sie finden den Code für dieses Beispiel, das die mit WebMatrix (webmatrix.com) gelieferte Fotogalerievorlage verwendet, auf archive.msdn.microsoft.com/mag201204HTML5.

Wenn Sie diese Seite in einem mobilen oder Tabletbrowser öffnen, werden Sie sehen, dass die Seite verkleinert erscheint und schwer zu sehen oder zu lesen ist, wie Abbildung 3 zeigt. Mit einigen Medienabfragen und ein paar anderen Tricks können wir ohne neues Markup oder Browser-Sniffing eine angepasste Anzeige erstellen.

Abbildung 3 Ansicht auf mobilen Geräten ohne Medienabfragen

Fügen Sie die Medienabfrage-Direktive und die Medienabfragebedingung am Ende der für dieses Beispiel erstellten Datei „desktop.css“ an. Da ich mich vorrangig mit den kleinsten Bildschirmen befassen möchte, erstelle ich folgende Definition:

    @media screen and (max-width: 480px) {}

Wir erstellen jetzt innerhalb dieser Definition einige Regeln für die Größenanpassung und die Änderung der Anordnung der Bilder für kleinere Bildschirme. Diese Regeln sind in Abbildung 4 dargestellt.

Abbildung 4 Ändern von Formatvorlagen für mobile Geräte

    body {
      min-width: 120px;
      max-width: 320px;
    }
    h1 {
      font-size: 1.5em;
    }
    img {
      width: 250px;
      height: 187.5px;
    }
    ul.thumbnails li {
      width: 265px;
        height: 200px;
        line-height: 200px;
    }
    ul.thumbnails li span.image-overlay {
        width: 265px;
    }

Wenn Sie die Seite nach dem Hinzufügen dieser Formatvorlagen aktualisieren, sollten Sie eine ähnliche Darstellung wie in Abbildung 5 sehen. Die Bilder sehen jetzt besser aus, aber die Hauptnavigation ist falsch ausgerichtet. Darüber hinaus verwendet die Galerie einen „:hover“-Pseudoselektor, um zusätzliche Informationen zu jedem Bild anzuzeigen, wie in Abbildung 6 zu sehen ist. Da dies eine Benutzererfahrung ist, die in einer Umgebung, in der Hover-Ereignisse nicht sehr häufig auftreten (Smartphones und Tablets), nicht sinnvoll ist, müssen wir auch für diesen Aspekt der Seite eine alternative Lösung finden. Dazu fügen wir die Formatvorlagen aus Abbildung 7 in die aktuelle @media-Direktive ein.

Abbildung 5 Ansicht auf mobilen Geräten mit optimierten Bildern

Abbildung 6 Ein Bild mit angewendetem Hover-Effekt

Abbildung 7 Formatvorlagen für Navigation und Bildinformationen auf mobilen Geräten

    #banner {
      height: 110px;
      background: #eaeaea;
    }
    #menu li {
      display: block;
      margin-top: 3px;
      margin-bottom: 3px;
    }
    #menu li.tags a,
    #menu li.galleries a,
    #menu li.account a {
      background: none; 
    }
    #menu li.login {
      display: none;
    }
    ul.thumbnails li span.image-overlay {
      display:block;
      position: absolute;
      top: 0;
      left: 0;
      line-height: normal;
      width: 515px;
        padding: 5px;
    }
    ul.thumbnails li {
        background: #f3f6f7;
        border-color: #dbe2e5;
        border-radius: 7px;
        box-shadow: 0px 0px 20px 5px #A9A9A9;
    }

Wenn Sie die Seite jetzt im Browser aktualisieren, sollten sowohl die Navigation als auch die Informationen, die zuvor in einem Hover-Ereignis angezeigt wurden, bereinigt sein, wie in Abbildung 8 zu sehen ist.

Abbildung 8 Die Galerie mit optimierter Navigation und optimierten Bildfeldern

Jetzt haben wir eine Desktopansicht für die Galerie sowie eine ganz gute Version für mobile Geräte, und das alles mit nur wenigen zusätzlichen CSS-Regeln. Wir gehen jetzt noch einen Schritt weiter und fügen Unterstützung für Bildschirme hinzu, die größer als 480 Pixel und kleiner als 1024 Pixel sind – Tablets.

Wenn Sie die Fotogalerie in einem Desktopbrowser betrachten und die Größe auf weniger als 1024 Pixel reduzieren (Bildschirmabbildung in Abbildung 8), sehen Sie, dass viele Bilder abgeschnitten sind. Da der Bildschirm vieler Tabletgeräte normalerweise größer ist, ist es sinnvoll, auf der Galerieseite größere Bilder zur Verfügung zu stellen. Fügen wir nun noch eine Medienabfrage für Geräte in Tabletgröße hinzu:

    @media screen and (min-width:480px) and (max-width:1024px)

Im Onlinequellcode habe ich einige der Regeln für Smartphones in einem Formatvorlagensatz für andere als Desktopgeräte umgestaltet. Damit muss ich für die Ansicht auf Tablets nur noch die Formatvorlagen festlegen, die sich auf Dokument-, Bild- und Miniaturbildgrößen beziehen, wie in Abbildung 9 gezeigt.

Abbildung 9 Formatvorlagen für die Ansicht auf Tablets

    body {
      min-width: 480px;
      max-width: 800px;
    } 
    img {
      width: 500px;
      height: 375px;
      align: center;
    } 
    ul.thumbnails li {
      width: 515px;
        height: 390px;
        line-height: 200px;
    }

Aktualisieren Sie den Bildschirm in der Browseransicht des Tablets. Es wird ein Bildschirm angezeigt, der ähnlich wie in Abbildung 10 aussieht. Wir behandeln jetzt unterschiedliche Bildschirmgrößen – und damit unterschiedliche Geräte – und das alles mit dem geringen Zeitaufwand für die Erstellung einiger alternativer Formatvorlagen.

Abbildung 10 Fotogalerie, Ansicht auf Tablets

Mobile Geräte haben Priorität

Bevor ich nun zum Ende der Diskussion über Medienabfragen komme, möchte ich einen Tipp weitergeben, der nicht nur bei Medienabfragen verwendet werden kann, sondern auch für die allgemeine Webentwicklung wichtig ist. Es ist besonders wichtig, Viewport und Design für mobile Geräte als Erstes festzulegen.

Falls sie parallel zu meinen Ausführungen über Medienabfragen codiert haben, haben Sie vielleicht ein kleines Problem bei der Anzeige der Seite auf einem Smartphone oder Smartphone-Emulator bemerkt: Auf einigen Geräten hat sich der „Verkleinerungseffekt“ auch nach der Anwendung der Bedingungsregeln nicht verändert. Hier hat der mobile Browser versucht, die Darstellung auf einem kleineren Bildschirm zu „optimieren“; das kann bei Websites günstig sein, die Benutzer von mobilen Geräten ignorieren. Für diese Website möchten wir jedoch diese Optimierung verhindern. Sie können dieses Verhalten durch Hinzufügen eines einzelnen <meta>-Tags zum <head> der Seite verhindern, wie hier dargestellt:

    <meta name="viewport" content="width=device-width">

Wenn Sie jetzt die Seite aktualisieren, sollten Sie den Effekt der angewendeten Regeln sehen, vorausgesetzt, Sie haben die Medienabfragen korrekt definiert.

Sie werden auch bemerkt haben, dass ich im Beispiel der Fotogalerie einer vorhandenen Website eine Handhabung für mobile Geräte hinzugefügt habe. Wenn Sie sich als Entwickler mit Medienabfragen befassen, werden Sie das am Anfang wahrscheinlich auch so machen. Es gibt jedoch eine wachsende Bewegung, die bei Design und Entwicklung von Websites den Ansatz „Mobile Geräte haben Priorität“ propagiert. Sie sollten also die Anzeige auf mobilen Geräten zur obersten Priorität erklären, anstatt sie erst im Nachhinein zu beachten (wie dies oft in der Vergangenheit der Fall war). Wenn Sie bedenken, dass in den letzten beiden Jahren die Verkaufszahlen von Smartphones und Tablets diejenigen der PCs übertrafen, und das mobile Browsen mehr als die Hälfte allen Webbrowsens ausmacht, ist das durchaus sinnvoll. Außerdem fördert das Prinzip „Mobile Geräte haben Priorität“ fortschrittliche Ansätze. Danach werden Websites, die oft nur textorientiert für Grundanforderungen entwickelt wurden, nach und nach für leistungsstärkere Browser und Geräte optimiert. Wenn Sie mehr über den Ansatz von „Mobile Geräte haben Priorität“ erfahren möchten, kann ich Ihnen das Buch „Mobile first“ von Luke Wroblewski empfehlen (erhältlich über bit.ly/zd9UWT).

Medienabfragelistener

Als Erweiterung zur Unterstützung von Medienabfragen in CSS3 möchte die CSS-Arbeitsgruppe JavaScript APIs hinzufügen. Über diese APIs können Entwickler während der Laufzeit Medienabfragen auswerten und Änderungen der Medienabfragebedingungen verfolgen. Diese APIs sind in der CSSOM View Module-Spezifikation dokumentiert (bit.ly/w8Ncq4). Abbildung 11 zeigt ein Beispiel, wie Medienabfragen ausgeführt und Listeners in JavaScript erstellt werden.

Abbildung 11 Arbeiten mit Medienabfragelistenern

    listener = window.msMatchMedia("(min-width: 480px)");
    evaluate(listener); // Perform an initial evaluation
    listener.addListener(evaluate); // Evaluate each time the width changes
     function evaluate(listener) {
       if (mql.matches) {
        expandCommentList(); // Screen is at least 480px
       } else {
         shrinkCommentList(); // Screen is smaller
       }
     }

Listeners können in Fällen ganz wertvoll sein, in denen sich der Viewport eines Geräts während der Laufzeit ändern kann, z. B. wenn sich die Ausrichtung auf Smartphones und Tablets ändert. Mit Medienabfragelistenern können Sie auf diese Veränderungen nicht nur aus CSS, sondern auch aus den Scripts heraus reagieren. Die CSSOM View-Spezifikation befindet sich derzeit noch im Stadium des Arbeitsentwurfs, aber die Internet Explorer 10 Platform Preview bietet Unterstützung für Medienabfragelistener, sodass Sie es auf dem Internet Explorer Test Drive (bit.ly/gQk7wZ) ausprobieren können.

Während der letzten Jahre gab es in der Unterstützung von unterschiedlichen Plattformen, Bildschirmen und Anwendungserfahrungen bei Webanwendungen große Fortschritte. In der Vergangenheit war es normal, gerätespezifische Versionen einer Website zu erstellen – dieses Vorgehen ist jetzt aber durch die große Anzahl von mobilen Geräten zunehmend undurchführbar geworden. Mit der Einführung von CSS3-Medienabfragen für alle gängigen Desktop- und mobilen Browser, können Sie jetzt entscheidende, kontextabhängige Anhaltspunkte nutzen. Mit bedingten CSS können Anwendungserfahrungen bereitgestellt werden, die auf die unterschiedlichsten Geräte zugeschnitten sind. Weitere Informationen über CSS3-Medienabfragen erhalten Sie im Kapitel über Medienabfragen im ausgezeichneten Buch „The Book of CSS3“ von Peter Gasston (No Starch Press, 2011). Auf der Website „Medienabfragen“ finden Sie eine Galerie mit fantastischen Anwendungsbeispielen, die alle mithilfe von Medienabfragen erstellt wurden. Ich hoffe, dieser Artikel hat Ihnen genügend Informationen geboten, um heute noch mit der Entwicklung von maßgeschneiderten Anwendungen für mobile Geräte zu beginnen. Ich freue mich schon auf die beeindruckenden Anwendungen für die Handhabung mobiler Geräte, die Sie erstellen!

Brandon Satromist Produktmanager für Kendo UI (kendoui.com), ein HTML5- und Mobil-Toolset von Telerik. Er veröffentlicht Blogs unter userinexperience.com und Sie können ihm auf Twitter folgen unter twitter.com/BrandonSatrom.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: John Box, Sharon Newman und Jacob Rossi