@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. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Die @document CSS At-Regel beschränkt die darin enthaltenen Stilregeln basierend auf der URL des Dokuments. Sie ist in erster Linie für benutzerdefinierte Stylesheets gedacht (siehe userchrome.org für weitere Informationen), kann jedoch auch für autorendefinierte Stylesheets verwendet werden.
Syntax
@document url("https://www.example.com/")
{
h1 {
color: green;
}
}
Eine @document-Regel kann eine oder mehrere passende Funktionen spezifizieren. Wenn eine der Funktionen auf eine gegebene URL zutrifft, wird die Regel auf diese URL angewendet. Die verfügbaren Funktionen sind:
url()-
Passt zu einer exakten URL.
url-prefix()-
Passt, wenn die Dokument-URL mit dem angegebenen Wert beginnt.
domain()-
Passt, wenn die Dokument-URL auf der angegebenen Domain (oder einer Subdomain davon) ist.
media-document()-
Passt das Medium entsprechend der Zeichenkette im Parameter, eines von
video,image,pluginoderall. regexp()-
Passt, wenn die Dokument-URL mit dem angegebenen regulären Ausdruck übereinstimmt. Der Ausdruck muss die gesamte URL matchen.
Die Werte, die den Funktionen url(), url-prefix(), domain() und media-document() übergeben werden, können optional in einfache oder doppelte Anführungszeichen eingeschlossen werden. Die Werte, die der Funktion regexp() übergeben werden, müssen in Anführungszeichen eingeschlossen sein.
Escapierte Werte, die der Funktion regexp() übergeben werden, müssen zusätzlich aus dem CSS heraus escapiert werden. Zum Beispiel steht ein . (Punkt) in regulären Ausdrücken für jedes Zeichen. Um einen echten Punkt zu matchen, müssen Sie ihn zuerst mit regulären Ausdrucksregeln escapen (zu \.) und dann diese Zeichenfolge mit CSS-Regeln escapen (zu \\.).
@document wird derzeit nur in Firefox unterstützt; wenn Sie dieselbe Funktionalität in einem anderen Browser als Firefox replizieren möchten, könnten Sie versuchen, diesen Polyfill von @An-Error94 zu verwenden, der eine Kombination aus einem Benutzer-Skript, data-* Attributen und Attributselektoren nutzt.
Hinweis:
Es gibt eine -moz-angepasste Version dieser Eigenschaft — @-moz-document. Diese wurde in Firefox 59 in Nightly und Beta auf die Verwendung nur in Benutzer- und UA-Sheets beschränkt — ein Experiment, das potenzielle CSS-Injection-Angriffe mindern soll. (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 spezifizieren
@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
Ursprünglich in Level 3, wurde @document auf Level 4 verschoben, aber dann anschließend entfernt.
Browser-Kompatibilität
Siehe auch
- Per-site user style sheet rules in der www-style-Mailingliste.