HTML <link> media-Eigenschaft

HTML <link> Tag

Definition und Verwendung

media Diese Eigenschaft legt fest, für welche Medien/geräte das Zielressource optimiert wurde.

media Diese Eigenschaft bestimmt, auf welchem Gerät das verknüpfte Dokument angezeigt wird.

Diese Eigenschaft wird hauptsächlich mit CSS-Stylesheets verwendet, um für verschiedene Medienarten verschiedene Stile zu spezifizieren.

media Die Eigenschaft kann mehrere Werte akzeptieren.

Beispiel

Zwei verschiedene Stylesheets für zwei verschiedene Medienarten (Bildschirm und Druck):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  
<link rel="stylesheet" type="text/css" href="print.css" media="print">

</head>

Versuchen Sie es selbst

Syntax<link media="value

>

Mögliche Operator Beschreibung
Operator and
Definiert den AND-Operator. not
Definiert den NOT-Operator. ,

Definiert den OR-Operator.

Definiert den OR-Operator. Beschreibung
Gerät all
Standard. Für alle Mediengerätetypen. print
Für Druckvorschau-Modus/Druckseiten. screen
Für Computerbildschirme, Tablets, Smartphones und ähnliches. speech
Bildschirmleser zum Vorlesen von Seiten. Veraltet.aural
Sprachsynthese. Veraltet.braille
Brailleschrift-Feedback-Geräte. Veraltet.handheld
Handheld-Geräte (kleiner Bildschirm, begrenzte Bandbreite). Veraltet.Projektor.
tty Veraltet.Telegraphie-Apparate und ähnliche Medien mit festem Abstand zwischen Zeichen.
tv Veraltet.Fernsehgerätetypen (niedrige Auflösung, begrenzte Scrollfähigkeit).

Wert

Wert Beschreibung
aspect-ratio

Definiert das Breite/Höhen-Verhältnis des Zielbildschirmbereichs.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (aspect-ratio:16/9)"
color

Definiert die Anzahl der Bits pro Farbe des Zielbildschirms.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (color:3)"
color-index

Definiert die Anzahl der Farben, die der Zielbildschirm verarbeiten kann.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (min-color-index:256)"
device-aspect-ratio Veraltet.Definiert das device-width/device-height-Verhältnis des Zielbildschirms/Papieres.
device-width Veraltet.Definiert die Breite des Zielbildschirms/Papieres.
device-height Veraltet.Definiert die Höhe des Zielbildschirms/Papieres.
grid

Definiert, ob das Ausgabegerät ein Gitter oder ein Bitmap ist.

Mögliche Werte: "1" für Gitter, "0" für andere.

Beispiel: media="handheld and (grid:1)"
height

Definiert die Höhe des Zielbildschirmbereichs.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (max-height:700px)"
monochrome

Definiert die Bit pro Pixel im monochromen Framebuffer.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (monochrome:2)"
Richtung

Bestimmt die Richtung des Zielbildschirms/Papieres.

Mögliche Werte sind: "portrait" oder "landscape".

Beispiel: media="all and (orientation: landscape)"
Auflösung

Bestimmt die Pixel-Dichte des Zielbildschirms/Papieres (dpi oder dpcm).

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="print and (resolution:300dpi)"
Scan

Bestimmt die Scanmethode des TV-Displays.

Mögliche Werte sind: "progressive" und "interlace".

Beispiel: media="tv and (scan:interlace)"
Breite

Bestimmt die Breite der Zielanzeigezone.

Verwendbare Präfixe sind "min-" und "max-".

Beispiel: media="screen and (min-width:500px)"

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML <link> Tag