@document

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die @document CSS At-Regel schränkt die darin enthaltenen Stilregeln basierend auf der URL des Dokuments ein. Sie ist primär für benutzerdefinierte Stylesheets gedacht (siehe userchrome.org für weitere Informationen), kann jedoch auch in autoren-definierten Stylesheets verwendet werden.

css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}

Syntax

Eine @document-Regel kann eine oder mehrere passende Funktionen festlegen. Wenn eine der Funktionen auf eine bestimmte URL zutrifft, wird die Regel auf diese URL angewendet. Die verfügbaren Funktionen sind:

url()

Passt auf eine exakte URL.

url-prefix()

Passt, wenn die Dokument-URL mit dem angegebenen Wert beginnt.

domain()

Passt, wenn die Dokument-URL zu der angegebenen Domain (oder einer Subdomain davon) gehört.

media-document()

Passt das Medium entsprechend der im Parameter angegebenen Zeichenkette, eine der Optionen video, image, plugin oder all.

regexp()

Passt, wenn die Dokument-URL durch den angegebenen regulären Ausdruck übereinstimmt. Der Ausdruck muss die gesamte URL abgleichen.

Die in den Funktionen url(), url-prefix(), domain() und media-document() bereitgestellten Werte können optional in einfache oder doppelte Anführungszeichen gesetzt werden. Die in der Funktion regexp() bereitgestellten Werte müssen in Anführungszeichen gesetzt werden.

Escapete Werte, die der Funktion regexp() übergeben werden, müssen zusätzlich in der CSS-Syntax escaped werden. Ein Beispiel: Ein . (Punkt) passt in regulären Ausdrücken auf jedes beliebige Zeichen. Um auf einen wörtlichen Punkt zu passen, müsste er zunächst gemäß der Regeln für reguläre Ausdrücke escaped werden (zu \.) und anschließend gemäß der CSS-Regeln erneut escaped werden (zu \\.).

@document wird derzeit nur in Firefox unterstützt. Wenn Sie eine ähnliche Funktionalität in einem nicht-Firefox-Browser replizieren möchten, können Sie dieses Polyfill von @An-Error94 verwenden, das eine Kombination aus einem Benutzerskript, data-* Attributen, und Attributselektoren nutzt.

Hinweis: Es gibt eine -moz-präfixierte Version dieser Eigenschaft — @-moz-document. Diese wurde ab Firefox 59 in Nightly und Beta auf die Verwendung nur in Benutzer- und UA-Stylesheets beschränkt – ein Experiment, um mögliche CSS-Injection-Angriffe zu entschärfen (siehe Firefox-Bug 1035091).

Formale Syntax

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

Beispiele

Dokument für CSS-Regel festlegen

css
@document url("http://www.w3.org/"),
          url-prefix("http://www.w3.org/Style/"),
          domain("mozilla.org"),
          media-document("video"),
          regexp("https:.*") {
  /* CSS rules here apply to:
     - The page "http://www.w3.org/"
     - Any page whose URL begins with "http://www.w3.org/Style/"
     - Any page whose URL's host is "mozilla.org"
       or ends with ".mozilla.org"
     - Any standalone video
     - Any page whose URL starts with "https:" */

  /* Make the above-mentioned pages really ugly */
  body {
    color: purple;
    background: yellow;
  }
}

Spezifikationen

Zunächst in Level 3 eingeführt, wurde @document zurückgestellt auf Level 4 und dann schließlich entfernt.

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@document
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch