@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 beschränkt die darin enthaltenen Stilregeln basierend auf der URL des Dokuments. Sie ist in erster Linie für vom Benutzer definierte Stylesheets konzipiert (siehe userchrome.org für weitere Informationen), kann jedoch auch in vom Autor definierten Stylesheets verwendet werden.
@document url("https://www.example.com/")
{
h1 {
color: green;
}
}
Syntax
Eine @document-Regel kann eine oder mehrere passende Funktionen spezifizieren. Wenn eine der Funktionen auf eine gegebene URL zutrifft, wirkt die Regel auf diese URL. 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) liegt.
media-document()-
Passt das Medium entsprechend dem Parameterwert, einer von
video,image,pluginoderall. regexp()-
Passt, wenn die Dokument-URL mit dem angegebenen regulären Ausdruck übereinstimmt. Der Ausdruck muss die gesamte URL abdecken.
Die an die Funktionen url(), url-prefix(), domain() und media-document() übergebenen Werte können optional in Einzel- oder Doppelte Anführungszeichen eingeschlossen werden. Die an die Funktion regexp() übergebenen Werte müssen in Anführungszeichen eingeschlossen sein.
Entkommene Werte, die an die Funktion regexp() übergeben werden, müssen zusätzlich aus dem CSS entkommen werden. Zum Beispiel passt ein . (Punkt) in regulären Ausdrücken zu jedem Zeichen. Um einen Punkt wörtlich zu erfassen, müssten Sie ihn zunächst mit regulären Ausdruckregeln entkommen (zu \.) und dann diesen String mit CSS-Regeln entkommen (zu \\.).
@document wird derzeit nur in Firefox unterstützt; wenn Sie diese Funktionalität in Ihrem eigenen Nicht-Firefox-Browser replizieren möchten, könnten Sie versuchen, diesen Polyfill von @An-Error94 zu verwenden, der eine Kombination aus einem Benutzerskript, data-* Attributen und Attributselektoren verwendet.
Hinweis:
Es gibt eine moz-präfixierte Version dieser Eigenschaft — @-moz-document. Diese wurde in Firefox 59 in Nightly und Beta auf die Verwendung in Benutzer- und UA-Blättern beschränkt — ein Experiment, das dazu gedacht ist, potenzielle CSS-Injektionsangriffe 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 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 jedoch anschließend entfernt.
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Regeln für benutzerdefinierte Stylesheets pro Seite in der www-style-Mailingliste.