@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-rule schränkt die darin enthaltenen Stilregeln basierend auf der URL des Dokuments ein. Sie ist hauptsächlich für benutzerdefinierte Stylesheets gestaltet (siehe userchrome.org für weitere Informationen), kann jedoch auch in autordefinierten Stylesheets verwendet werden.
@document url("https://www.example.com/")
{
h1 {
color: green;
}
}
Syntax
Eine @document-Regel kann eine oder mehrere Abgleichfunktionen spezifizieren. Wenn eine der Funktionen auf eine gegebene URL zutrifft, wird die Regel auf diese URL angewendet. Die verfügbaren Funktionen sind:
url()-
Passt exakt zu einer 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 ihrer Subdomains) liegt.
media-document()-
Passt das Medium gemäß dem Parameter-String an, einer von
video,image,pluginoderall. regexp()-
Passt, wenn die Dokument-URL durch den angegebenen regulären Ausdruck gematcht wird. Der Ausdruck muss die gesamte URL matchen.
Die an die Funktionen url(), url-prefix(), domain() und media-document() übergebenen Werte können optional in einfachen oder doppelten Anführungszeichen stehen. Die an die Funktion regexp() übergebenen Werte müssen in Anführungszeichen stehen.
Entkommene Werte, die an die Funktion regexp() übergeben werden, müssen zusätzlich aus dem CSS heraus escaped werden. Zum Beispiel matcht ein . (Punkt) jedes Zeichen in regulären Ausdrücken. Um einen tatsächlichen Punkt zu matchen, müssen Sie ihn zuerst mit regulären Ausdrucksregeln escapen (zu \.), dann diesen String mit CSS-Regeln escapen (zu \\.).
@document wird derzeit nur in Firefox unterstützt; wenn Sie versuchen möchten, solche Funktionalität in Ihrem eigenen Nicht-Firefox-Browser zu replizieren, könnten Sie dieses Polyfill von @An-Error94 ausprobieren, das eine Kombination aus einem Benutzerskript, data-* Attributen, und Attributselektoren verwendet.
Hinweis:
Es gibt eine -moz-präfixierte Version dieser Eigenschaft — @-moz-document. Diese wurde auf die Verwendung in Benutzer- und UA-Sheets in Firefox 59 in Nightly und Beta beschränkt — ein Experiment, das darauf abzielt, potenzielle CSS-Injektionsangriffe zu mildern (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, dann aber anschließend entfernt.
Browser-Kompatibilität
Siehe auch
- Regeln für benutzerdefinierte Stylesheets pro Website in der www-style-Mailingliste.