@document CSS at-rule
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
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 primär für benutzerdefinierte Stylesheets konzipiert (siehe userchrome.org für weitere Informationen), kann aber auch in von Autoren definierten Stylesheets verwendet werden.
Syntax
@document url("https://www.example.com/")
{
h1 {
color: green;
}
}
Ein @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 auf eine exakte URL.
url-prefix()-
Passt, wenn die Dokument-URL mit dem angegebenen Wert beginnt.
domain()-
Passt, wenn die Dokument-URL in der angegebenen Domain (oder einer Subdomain davon) liegt.
media-document()-
Passt auf das Medium gemäß dem Parameterstring, einer von
video,image,pluginoderall. regexp()-
Passt, wenn die Dokument-URL mit dem angegebenen regulären Ausdruck übereinstimmt. Der Ausdruck muss der gesamten URL entsprechen.
Die an die Funktionen url(), url-prefix(), domain(), und media-document() übergebenen Werte können optional in einfachen oder doppelten Anführungszeichen eingeschlossen werden. Die an die Funktion regexp() übergebenen Werte müssen in Anführungszeichen eingeschlossen sein.
Entkommene Werte, die der Funktion regexp() übergeben werden, müssen zusätzlich aus dem CSS entkommen werden. Zum Beispiel stimmt ein . (Punkt) in regulären Ausdrücken auf jedes Zeichen. Um einen wörtlichen Punkt zu matchen, müssten Sie ihn zuerst gemäß den Regeln der regulären Ausdrücke entkommen (\.), dann diesen String gemäß den CSS-Regeln entkommen (\\.).
@document wird derzeit nur von Firefox unterstützt; wenn Sie eine solche Funktionalität in Ihrem eigenen Nicht-Firefox-Browser nachahmen möchten, könnten Sie versuchen, diesen Polyfill von @An-Error94 zu verwenden, der eine Kombination aus einem Benutzerskript, data-* Attributen, und Attributselektoren nutzt.
Hinweis:
Es gibt eine -moz-präfixierte Version dieser Eigenschaft — @-moz-document. Diese wurde in Firefox 59 in Nightly und Beta auf die Nutzung nur in Benutzer- und UA-Sheets beschränkt — ein Experiment, das entwickelt wurde, um potenzielle CSS-Injektionsangriffe zu mindern (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
Zunächst in Level 3, wurde @document verschoben auf Level 4, dann jedoch schließlich entfernt.
Browser-Kompatibilität
Siehe auch
- Pro-Site benutzerdefinierte Stylesheet-Regeln in der www-style-Mailingliste.