Um die Funktionsweise von Media Queries zu beschreiben, bieten die eingangs bereits erwähnten Media Types einen guten Einstiegspunkt. Wenn Sie bspw. separate Stylesheets für die Druckausgabe (bspw. print.css) erstellt haben, kennen Sie schon das Konzept, nach dem bestimmte Stylesheets unter bestimmten Bedingungen aufgerufen werden. Die aus CSS2 stammenden Media Types ermöglichen es also, die Ausgabe von Stylesheets bestimmten Medientypen wie einem Drucker (print), einem Braillegerät (braille) oder bspw. auch einem einem TV-Gerät (tv) zuzuordnen. Die hier im weiteren Verlauf des Artikels beschriebenen Media Queries entstammen CSS3; sie greifen dieses Konzept auf und bauen es weiter aus. Das heißt, es wird nicht nur nach dem Ausgabemedium entschieden, sondern anhand von Eigenschaften und Fähigkeiten von Endgeräten, wie beispielsweise der Breite und Höhe des Viewports.

Für einen Anwender, der – unabhängig davon, ob er einen Desktop-PC oder ein mobiles Endgerät verwendet – einen Browser nutzt, der Media Queries unterstützt, können Sie separate, für das jeweilige Ausgabemedium optimierte Gestaltungseigenschaften festlegen. Voraussetzung für Media Queries ist daher die strikte Trennung von Inhalt und Layout! Denn nur dann besitzt man die Möglichkeit, die Inhalte einer Webseite je nach Bedarf des Anwenders in Abhängigkeit seines Endgerätes, dass Design zu optimieren. Wäre dies nicht der Fall und man hätte bspw. Inline-Styles oder gar Tabellen-Layouts, würde man irgendwann an die Grenzen seiner Möglichkeiten stoßen und hätte nicht mehr die Freiheit mit CSS moderne Webseiten erstellen zu können.

Anlegen und Kombinieren von Media-Query-Regeln

Analog zum Vorgehen bei Media Types, gibt es auch bei Media Queries verschiedene Wege, diese zusätzlichen, für die entsprechenden Endgeräte angelegten Eigenschaften einzubinden. Hierfür kann das link-Element verwendet werden, wobei dort das media-Attribut dazu dient, das jeweilige Ausgabemedien für die referenzierte CSS-Datei zu bestimmen:

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

Bei der Referenzierung mittels des link-Elementes kann man zudem aber auch weitere Eigenschaften als Merkmale miteinander kombinieren und somit die Bedinung die erfüllt werden muss, spezifizieren:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 950px)" />

Man kann aber auch mehrere Media Queries mit den jeweiligen Merkmalen miteinander kombinieren. Dies geschieht, wie im folgenden Beispiel, durch eine Trennung mittels Komma:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 950px),projection and (min-width: 1500px)" />

Bei wenig zusätzlichem Code können die notwendigen CSS-Eigenschaften, einfach an das Ende einer bereits vorhandenen CSS-Datei angelegt werden. Das Einfügen muss daher am Ende geschehen, weil zuvor für große Viewports definierte Eigenschaften von den Eigenschaften für kleine Viewports überschrieben werden müssen.

body {
...
}
 
@media screen and (max-width:750px) {
body { ... }
}

Aber damit nicht genug. Mit der Eigenschaft device-width können Sie auch gezielt die Breite von
Endgeräten ansprechen:

iPads (Portrait und Landscape):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) {...}

iPads (Landscape):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) and (orientation:
landscape) {...}

iPads (Portrait):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) and
(orientation:portrait) {...}

Desktops und Laptops:

@media only screen and (minwidth: 1224px){... }

Große Monitore:

@media only screen and (minwidth:1824px){... }

Da es bei mobilen Endgeräten wie Smartphones und Tablets mit der Portrait- und der Landscape-View zudem zwei unterschiedliche Ansichtsformate zur Darstellung der Inhalte gibt, können Sie mit orientation die Merkmale height und width miteinander vergleichen. Wenn height größer oder gleich width ist, besitzt die Darstellung den Wert portrait, andernfalls den Wert landscape. Erkannt wird die Ansicht am Gerät übrigens durch einen Bewegungssensor. Sollte die Gestaltung einer Webseite auf diesen beiden Ansichtsformaten große Unterschiede aufweisen, können Sie jedem Format folgendermaßen eine eigene CSS-Datei zuweisen:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Neben der Integration dieser Media-Query-Regeln ist es wichtig, dass Sie dem Viewport-Metatag innerhalb des head-Elementes eines HTML-Dokumentes initial weitere Eigenschaften zur optimierten Darstellung der Inhalte zuweisen. Damit können Sie die Darstellung und Skalierung der Inhalte auf Smartphones und Tablets gleichermaßen festlegen. Wenn Sie all diese oder zumindest einen Großteil dieser Regeln für das Anlegen von Regeln mittels Media Queries befolgen, können sie ab nun mit der Individualisierung der Styles für die entsprechenden Viewportgrößen beginnen. Unabhängig von den Möglichkeiten, gibt es aber auch bestimmte Fallstricke denen man sich vorher bewusst sein sollte, um nicht am Ende eines Projektes eine böse Überraschung zu erleben, die am Ende dazu führt, dass bestimmte Gestaltungsaspekte nicht realisiert werden können. Welche Probleme und Risiken hier auf den dafür Verantwortlichen warten können, zeigt der folgende Absatz.

Was gilt es beim Einsatz von Media Queries für ein responsives Design zu beachten

Aufgrund der möglichen unterschiedlichen Viewports der Benutzer muss ein auf Basis von Media Queries umgesetztes Design einer Webseite einige wichtige Aspekte berücksichtigen, die unabhängig vom Viewport eine weiterhin optimale Benutzerführung gewährleisten. Daher sollten Sie zumindest folgende Aspekte immer im Auge haben, um somit gegebenenfalls je nach Viewport neue CSS-Eigenschaften anlegen zu können:

• Anpassung der Schriftgrößen ( Da die Lesbarkeit von Texten auf unterschiedlichen Endgeräten nicht immer identisch ist, sollte man insbesondere auf kleineren Smartphone-Displays die vorher für einen Desktop-PC definierten Schriftgrößen, den Anforderungen entsprechend anpassen. )
• Darstellung von Links und Buttons ( Maße und Kontraste müssen nicht zuletzt aufgrund der Mobilität von Endgeräten größer sein. Gründe hierfür sind bspw. die unterschiedliche Fingergröße der User anstatt des stets gleich großen Mauszeigers und die Witterungsbedingungen wie Sonneneinstrahlung etc. )
• Größe und Ausrichtung von Bildern ( Kleinere Viewportgrößen ermöglichen schlecht die Darstellung großer Elemente wie bspw. Bilder oder Videos, daher Größenangaben relativ auszeichnen, dass Problem bei dieser Herangehensweise ist das sich diese ursprünglich große Bilddatei zwar visuell in den Maßen (Höhe und Breite) anpassen lässt, die zu ladende Dateigröße allerdings bleibt unabhängig vom Ausgabemedium gleich. Bei mobilen Geräten und den aktuellen Übertragungsraten können einige Hundert Kilobyte für solche Bilddateien das Ladeverhalten durchaus signifikant beeinflussen. Ein anderer Ansatz wäre es, für die Ausgabe verschiedener Bildergrößen in responsive Webdesigns den Adaptive Images-Ansatz zu verfolgen. Hier werden mit Hilfe von PHP und JavaScript automatisch verschiedene Bildgrößen für die verschiedenen Viewportgrößen erzeugt. )
• Ausrichtung und Position von Elementen ( So sollten Formular-Elemente auf mobilen Endgeräten eher unter-, als neben einander ausgerichtet werden. Bei der Darstellung von Tabellen, bietet es sich aufgrund der Platzverhältnisse an die Tabellenköpfe eher linksbündig auszurichten, anstatt wie gewohnt oberhalb der Zeilen. Denn so besitzen Sie die Möglichkeit mittels floating, die einzelnen Tabellenzellen direkt unter dem Tabellenkopf dieser Zeile abzubilden. )
• Reduzierung oder Vergrößerung des Whitespace ( Tablet vs. Smartphone )
• Aus- bzw. Einblenden von via Conditional Comments eingeblendeten Dateien ( IE 6 & 7 sind auf mobilen Endgeräten nicht vertreten. )

Wer sicher dieser Risiken bewusst wird, der wird über lang oder kurz nicht um die Diskussion herum kommen, welcher Möglichkeiten es für die ideale Vorgehensweise bei der Umsetzung eines responsiven Designs gibt. Ein möglicher Ansatz wäre es das mobile Design als Grundlage für die Gestaltung der anderen Darstellungsvarianten (Tablet, Desktop) heranzuziehen. Eine solche Vorgehensweise, auch “mobile first”, bringt eine vollkommen andere Herangehensweise für Webdesigner und Entwickler mit sich. Und das führt dazu, dass man aufgrund der kleineren Displays auf mobilen Endgeräten sehr viel weniger Platz zur Verfügung hat, womit man sich auf die wichtigsten inhaltlichen und funktionellen Features einer Webseite konzentrieren muss. Dazu sollte man sich u.a. unbedingt vor Beginn des Desingprozesses mit Fragen wie den folgenden: Was möchte ich mit der Webseite erreichen? Welche inhaltlichen und visuellen Elemente sind dafür dringend notwendig (und welche nicht)? Sollten diese Aspekte im vornherein geklärt worden sein, kann man dann mittels Media Queries und den entsprechenden CSS Eigenschaften die gewünschten responsiven Designs umsetzen.

Media Queries und die Browserwelt

Die Daseinsberechtigung einer CSS Eigenschaft richtet sich in erster Linie nach der Unterstützung durch die Browser. Diese ist bei Media Queries mittlerweile recht beachtlich, wobei Opera bereits seit Version 8 mit Media Queries umgehen kann. Firefox ist dazu seit Version 3.5 in der Lage. Da Safaris Rendering-Engine-Webkit außerdem in Googles Chrome zum Einsatz kommt, ist auch bei diesen beiden Browsern die Unterstützung gegeben. Aus dem Hause Microsoft, gibt es erst seit der aktuellen Version 9 Support für CSS Media Queries.

1 x ein HP Touchpad Tablet PC
5 x je ein Webstandards-Magazin Jahres Abo

Um an dem Gewinnspiel mitzumachen, müsst Du einfach nur diesen Tweet retweeten.
Wir werden alle Tweets welche unsere URL beinhalten aggregieren und die Gewinner dann per Zufall auswählen.
Das Gewinnspiel endet am 31. Oktober 2011. Die Gewinner werden hier im Blog sowie über unseren Twitter-Account bekannt gegeben.

Wir wünschen allen Viel Glück.

Und hier die Gewinner:
Das HP Touchpad geht an: FollowBackBear
Je ein Webstandards-Magazin Abo geht an:
Douth, newmediafactory, red_pixel, knieblond und happybeagleDE
Bitte meldet euch bei uns und teilt uns eure Adresse mit, damit wir die Gewinne verschicken können.
Vielen Dank noch einmal an alle, die mitgemacht haben!

Hier einmal das HTML

<div class="tooltip tooltip_white">
  Ich bin ein Tooltip...
  <div class="tooltip__pointer__up">
    <div class="tooltip__pointer__up__i"></div>
  </div>
</div>

Die Klasse “tooltip” beinhaltet alles um das Tooltip zu generieren und die Klasse “tooltip_white” beinhaltet die farbliche gestaltung. So ist es einfacher Tooltips in verschiedenen Farben zu bauen. Mit den beiden “tooltip__pointer” Klassen wird dann das Dreieck erstellt.
Der Trick dabei ist, dass man die Border-Breite bei dem Dreieck zu der Richtung zu welcher er zeigen soll immer auf 0 setzt. Ist vielleicht nicht einfach zu erklären, deshalb hier das CSS:

/* Farben definieren */
.tooltip_white {
    background: #FFF;
    border: 1px solid #CCC;
    border-right-width: 3px;
    border-bottom-width: 3px; 
}
 
.tooltip_white .tooltip__pointer__up,
.tooltip_white .tooltip__pointer__bottom,
.tooltip_white .tooltip__pointer__left,
.tooltip_white .tooltip__pointer__right {
    border: 1px solid #CCC; 
}
 
.tooltip_white .tooltip__pointer__up__i,
.tooltip_white .tooltip__pointer__bottom__i,
.tooltip_white .tooltip__pointer__left__i,
.tooltip_white .tooltip__pointer__right__i {
    border: 1px solid #FFF; 
}
 
/* Tooltip bauen */
.tooltip {
    position: absolute;
    padding: 10px 10px 0 10px;
    max-width: 250px;
    min-width: 200px;
    font-size: 11px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
.tooltip .tooltip__pointer__up,
.tooltip .tooltip__pointer__bottom,
.tooltip .tooltip__pointer__left,
.tooltip .tooltip__pointer__right,
.tooltip .tooltip__pointer__up__i,
.tooltip .tooltip__pointer__bottom__i,
.tooltip .tooltip__pointer__left__i,
.tooltip .tooltip__pointer__right__i {
    position: absolute;
    width: 0;
    height: 0;
    border-bottom-width: 0; 
}
 
.tooltip .tooltip__pointer__bottom {
    left: 20px;
    bottom: -10px;
    margin-left: -7px;
    border-top-width: 10px;
    border-right: 12px solid transparent;
    border-left: 10px solid transparent; 
}
 
.tooltip .tooltip__pointer__bottom__i {
    top: -10px;
    bottom: auto;
    left: -9px;
    border-top-width: 9px;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent; 
}
 
.tooltip .tooltip__pointer__up {
    left: 20px;
    top: -10px;
    margin-left: -7px;
    border-top-width: 0;
    border-bottom-width: 10px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent; 
}
 
.tooltip .tooltip__pointer__up__i {
    top: 2px;
    bottom: auto;
    left: -9px;
    border-top-width: 0;
    border-bottom-width: 9px;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent; 
}
 
.tooltip .tooltip__pointer__left {
    left: -10px;
    top: 7px;
    border-top: 10px solid transparent;
    border-bottom: 12px solid transparent;
    border-right-width: 10px;
    border-left-width: 0; 
}
 
.tooltip .tooltip__pointer__left__i {
    left: 1px;
    top: -9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right-width: 9px;
    border-left-width: 0; 
}
 
.tooltip .tooltip__pointer__right {
    right: -10px;
    top: 7px;
    border-top: 10px solid transparent;
    border-bottom: 12px solid transparent;
    border-right-width: 0;
    border-left-width: 10px; 
}
 
.tooltip .tooltip__pointer__right__i {
    right: 1px;
    top: -9px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right-width: 0;
    border-left-width: 9px; 
}
 
.tooltip .tooltip__close {
    position: relative;
    top: -4px;
    font-size: 11px;
    float: right;
    color: #999; 
}

Ich habe hier alle möglichen Variationen erstellt (Tooltip-Dreieck oben, recht, unten und links) deshalb ist es einwenig mehr Quelltext geworden
Ausserdem bitte beachten, dass der Tooltip immer “absolut” positioniert ist, also immer ein DIV mit “position: relative;” ausserhalb benutzen.

Laut Microsoft liegt der Focus auf der Hardware-Beschleunigung, welche schon mit der Veröffentlichung der IE9 angepriesen würde.
Ausserdem wird weiterhin an einer verbesserten HTML5 und CSS3 Unterstützung gearbeitet wie z.b. an der Implementation von CSS-Gradients und Flexiblen Box-Layouts.

Obwohl es noch keinen endgültigen Termin für den IE10 gibt, glaubt man, dass die neue IE Version zusammen mit Windows 8 irgendwann im nächsten Jahr erscheinen wird.

Hier gehts zum Download

Hier nochmal der Link zur offiziellen Seite: http://www.w3.org/html/logo/

Wir gehen davon aus, dass es ein DIV mit der Klasse “container” gibt, welches die gleiche Höhe wie auch das Browserfenster haben soll.
Im CSS geben wir zuerst dem HTML und Body-Tag eine Höhe von 100% (diese wird leider oft übersehen):

html, body {
  height: 100%;
}

Sobald dieses vorhanden ist, muss man noch die Höhe für den entsprechenden DIV-Container hinzufügen.
Am besten funktioniert es mit dem Parameter “min-height: 100%;”

div.container {
  min-height: 100%;
}

Das wars dann auch.

<div class="progress_bar">
    <strong>25%</strong>
    <span style="width: 25%;">&nbsp;</span>
</div>

Diese besteht neben dem DIV aus einem STRONG und einem SPAN Tag.
Der STRONG Tag zeigt den aktuelen Status in Prozent an.
Der SPAN zeigt den Balken an, welcher per Inline-Style definiert wird.
Im Inline-Style kann man dann mit Java-Script dynamisch den Fortschritt anzeigen, um z.b. ein Datei-Upload zu simulieren.

Und hier das CSS dazu:

.progress_bar {
  position: relative;
  margin: 0 0 15px 0;
  width: 250px;
  border: 1px solid #CCC;
  background: #FFF;  
}
 
.progress_bar span {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 20px;
  background-color: #AAF0FF;
}
 
.progress_bar strong {
  position: relative;
  z-index: 10;
  display: block;
  line-height: 20px;
  text-align: center;
}

Das Ergbniss sieht dann so aus:

Man könnte hier noch einwenig herumspielen und einen Schatten oder einen Verlauf bei dem Fortschrittsbalken hinzufügen.

Mashable

Supersized


JQuery Lightbox

Galleria

Galleryview

s3Slider

slideViewer

Galleriffic

Nivo slider

Smooth Div Scroll

Easy Slider