CSS pravidlo @document

CSS pravidlo @document umí omezit platnost CSS na určité URL.

3 minuty

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}
}

Živá ukázka

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 adresa http://example.com/presne/cokoliv bude 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 CSSfungovat 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.

11 minut

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.

16 minut

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.

6 minut

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.

8 minut

Novinky e-mailem

Když budu mít něco opravdu zajímavého, můžu vám to poslat e-mailem

Přidej se k 500+ čtenářům
Jen kvalitní obsah
Žádný spam

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků · Témata · Zkratky
2013–2026