Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Übersicht

Die @document CSS at-rule beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine @document Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.

Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.

Die verfügbaren Funktionen sind:

  • url(), welche einen exakten URL matcht.
  • url-prefix(), welche matcht, falls der Dokument-URL mit dem angegebenen Wert beginnt.
  • domain(), welche matcht, falls der Dokument-URL zur angegebenen Domain (oder einer Subdomain davon) gehört.
  • regexp(), welche matcht, falls der Dokument-URL auf den angegebenen regulären Ausdruck passt. Der Ausdruck muss den gesamten URL matchen.

Syntax

Die angegebenen Werte für die url(), url-prefix() und domain() Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die regexp() Funktion müssen durch Anführungenzeichen umschlossen sein.

Für die regexp() Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein . (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also \.) und anschließend durch die CSS Regeln (also \\.).

Formale Syntax

@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# {
  <group-rule-body>
}

Beispiele

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* CSS Regeln hier werden angewandt auf:
     - Die Seite "http://www.w3.org/".
     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
     - Jede Seite, deren URL mit "https:" beginnt */

  /* macht die oben erwähnten Seiten wirklich hässlich */
  body {
    color: purple;
    background: yellow;
  }
}

Spezifikationen

Ursprünglich in CSS Conditional Rules Module Level 3, wurde @document nach Level 4 verschoben.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende Unterstützung
ExperimentellNicht standardisiert
Chrome Keine Unterstützung NeinEdge ? Firefox Vollständige Unterstützung 61
Mit Präfix Hinweise Deaktiviert
Vollständige Unterstützung 61
Mit Präfix Hinweise Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Deaktiviert From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung 1.5 — 61
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Keine Unterstützung Nein
regexp()
ExperimentellNicht standardisiert
Chrome Keine Unterstützung NeinEdge ? Firefox Vollständige Unterstützung 6
Mit Präfix
Vollständige Unterstützung 6
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile ? Firefox Android ? Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, teoli, fscholz, Sebastianz
Zuletzt aktualisiert von: SJW,