Veit Schiele Communications

Veit Schiele Communications

Ausgabemedien

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:09 © Veit Schiele Communications GmbH, 2007–2017

Media Types

Mit Media Types können Ausgabemedien wie z.B. Bildschirm oder Drucker unterschieden werden. Diese erfordern unterschiedliche Formatierungen für die Gestaltung der Daten. Während am Bildschirm etwa ein längerer Text in heller Schrift auf dunklem Hintergrund gut lesbar sein kann, ist dies für die Ausgabe am Drucker keine gute Lösung. Bei der Bildschirmausgabe muss Ihnen die URL von Verweisen nicht angezeigt werden während die entsprechende Angabe auf Papier sehr informativ sein kann. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die wiederum unterschiedliche Formatdefinitionen enthalten können. Der Browser entscheidet beim Präsentieren der Seiten, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium 'screen' bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium 'print' angeben.

media="all"
CSS-Datei gilt für alle Medientypen.
media="aural"
CSS-Datei gilt für computergesteuerte, synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die Seite CSS-Eigenschaften für Sprachausgabe.
media="braille"
CSS-Datei gilt für Ausgabegeräte mit so genannter «Braille-Zeile».
media="embossed"
CSS-Datei gilt für Braille-Drucker.
media="handheld"
CSS-Datei gilt für Organizer.
media="print"
CSS-Datei gilt für den Ausdruck.
media="projection"
CSS-Datei gilt für die Datenprojektion mit Beamern.
media="screen"
CSS-Datei gilt für die Bildschirmanzeige.
media="tty"
CSS-Datei für nicht-grafische Ausgabemedien mit fixer Zeichenbreite.
media="tv"
CSS-Datei gilt für Fernsehgeräte, die Scrollen nicht erlauben.

Der MS Internet Explorer interpretiert diese Angaben ab der Software-Version 4.0 nur teilweise. Daher wird in Plone bei der Drucken-Aktion ein Javascript ausgeführt, das das Stylesheet-Dokument beim Drucken austauscht.

Media Queries

Mit Media Queries wird zwischen verschiedenen Medientypen unterschieden, z.B.:

@media screen and (min-width: 1024px) {
    body {
        font-size: 100%;
   }
}

link-Element:

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

@import-Anweisung:

@import url("wide.css") screen and (min-width: 1024px);
NameBeschreibungmin- und max- Präfix
widthBreite des Elements
heightHöhe des Elements
device-widthBreite des Displays
device-heightHöhe des Displays

Die verschiedenen Queries können kombiniert werden mit ànd, z.B.:

@media screen and (min-device-width: 480px) and (orientation: landscape) {…}

viewport

<meta name="viewport" content="initial-scale=1.0, width=device-width" />
initial-scale

Eigenschaft, die das Zoom-Level der Seite auf ``1.0``oder ``100%` festlegt.

System Message: WARNING/2 (<string>, line 111); backlink

Inline literal start-string without end-string.

System Message: WARNING/2 (<string>, line 111); backlink

Inline literal start-string without end-string.
width

legt die Breite der Seite fest.

Dies kann entweder eine feste Breite sein oder abhängig vom jeweiligen Display.

Beispiel

@media screen and (max-width: 768px) {
 …
}
@media screen and (max-width: 520px) {
    …
}
@media screen and (min-width: 1200px) {
    …
}

Browser-Kompatibilität