Link-Tag: Bedingtes Laden von CSS

Jan 2026

Das media-Attribut im link- und style-Tag war ursprünglich als eine einfache Methode gedacht, um spezielle Ausgabegeräte wie Monitor, Druck, Audio oder Braillezeile anzusprechen. Heute ist es wieder wichtig (Dark Mode, Accessibility) und erlaubt automatisches bedingtes Laden.

media-Attribut des link-Tags

Das Laden von CSS mit dem media-Attribut des link-Tags ist eines der ältesten CSS-Features. Der Standard hatte ursprünglich eine lange Liste mit den folgenden Typen für media vorgesehen, von denen viele von der Technik überholt wurden.

all: Für alle Geräte
print: Drucker
screen: Desktop-Computer
speech: Sprachausgabe

Aural und Braille wurden aus der CSS-Spezifikation entfernt, weil sie unnötig geworden sind. Stattdessen nutzt man heute ARIA (Accessible Rich Internet Applications) und CSS für die Sprachausgabe. Schon das erste iPhone ließ den Media-Typ »Handheld« links liegen und schlug sich auf die Seite des Media-Typs »Screen«.

Das moderne media-Attribut des Link-Tags

Heute wird das media-Attribut bewusster und strategischer eingesetzt: CSS wird nur angewendet und oft nur geladen, wenn die Bedingung im media-Attribut erfüllt ist.

<link rel="stylesheet" href="print.css" media="print">

print.css gilt nur beim Drucken und blockiert das normale Rendering nicht.

<link rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)">

Der Browser lädt und aktiviert das CSS nur bei Dark Mode und reagiert automatisch auf den Wechsel zwischen Light Mode und Dark Mode. Dazu ist kein Javascript erforderlich.

<link rel="stylesheet"
      href="high-contrast.css"
      media="(prefers-contrast: more)">

Der Nutzer sagt dem System, was er braucht und das CSS reagiert automatisch. Spezielles CSS für Nutzer mit Sehschwäche, Blendempfindlichkeit oder neurologischen Problemen arbeitet mit klaren Kontrasten.

Mit media="(prefers-contrast: more) wird kein High-Contrast-Button gebraucht, kein JavaScript zum Umschalten und keine Cookies. Wie beim Dark Mode regelt der Browser die Umstellung automatisch.

Auch ein Media Feature wie (pointer: fine) würde mit dem media-Attribut des link-Elements funktionieren. Die Browser laden und aktivieren das CSS nur, wenn das primäre Zeigegerät präzise ist. Das kann z.B. Sinn machen, um das CSS für Hover-Menüs getrennt zu behandeln.

<link rel="stylesheet"
      href="hover.css"
      media="(hover: hover) and (pointer: fine)">

Media Queries

Auch diese Variante ist möglich, um CSS in Abhängigkeit von der Auflösung des Geräts zu laden.

<link rel="stylesheet"
      href="desktop.css"
      media="(min-width: 1024px)">

Das wird allerdings eher selten empfohlen, da auf diese Weise mehr HTTP-Requests anfallen und die Wartung der CSS-Dateien komplizierter würde.

Media Queries sind mächtiger als der Media-Typ und sie sind flexibler. Sie prüfen die Merkmale von Ausgabegeräten detaillierter und können die alten Media Types einbeziehen. In erster Linie nutzt das responsive Webdesign Media Queries für Breakpoints, denn eine Media Query differenziert nach Auflösung und Ausrichtung des Monitors.