
CSS pravidlo @document
CSS pravidlo @document umí omezit platnost CSS na určité URL.
Podpora
Funguje zatím pouze ve Firefoxu (od verse 6) s prefixem.
Zápis
Následující styl bude použit pouze na doméně jecas.cz.
@document domain(jecas.cz) {
h1 {color: red}
}
Kromě omezení na domain existují i omezení na přesnou URL, začátek URL nebo regulární výraz.
url-
Styly se aplikují jen a pouze na stránce
http://example.com/presna.@document url(http://example.com/presna) { /* pravidla */ } url-prefix-
Styly se aplikují na všech adresách, které začínají na řetězec v
url-prefix. Tedy například adresahttp://example.com/presne/cokolivbude vyhovovat.@document url-prefix(http://example.com/presne) { /* pravidla */ } domain-
Styly se aplikují na všech stránkách určené domény i subdomény.
@document domain(example.com) { /* pravidla */ } regexp-
Poslední možnost je zadat regulární výraz, kterému musí adresa vyhovovat.
Regulární výraz musíme obalit uvozovkami. Následující pravidlo se tak aplikuje jen na URL, které obsahují řetězec „kod“.
@document regexp(".*kod.*") { /* pravidla */ }
Kombinování
V případě, že daný blok CSS má fungovat na různých adresách, jde výše uvedené funkce kombinovat (oddělit je čárkou).
@document
url(http://example.com/presna),
url-prefix(http://example.com/presne),
domain(example.com),
regexp(".*kod.*")
{
/* pravidla */
}
Tato pravidla se proto použijí ve všech případech, kdy vyhoví alespoň jedno pravidlo. Používat nějaké logické operátory typu and nebo or možné není.
Využití
Hlavní využití se nabízí pro uživatelské styly, které mají platit jen na určitých adresách. Ale i v běžném použití by se @document mohl hodit, šlo by tak snížit risiko nechtěného přibíjení si pravidel pro různé stránky.
Odkazy jinam
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.