Jak přiřadit tisková CSS pravidla stránce používající ASP.NET Themes?

Mezi uživateli jsou i tací, kdo prahnou po tom, aby si mohli webové stránky tisknout. A papír je médium s trochu jinou podstatou, než web a tisková verze stránky s tím musí počítat. Měla by se soustředit na to, co uživatel pravděpodobně chce vytisknout (např. text článku) a zanedbat věci, které vytištěné na papíře nemají smysl, například navigaci. Neměla by rovněž hýřit barvami. Dnes je sice barevný tisk podstatně dostupnější, než před lety, ale stále je tisk barevné stránky pomalejíší a nákladnější, než tisk černobílý.

Lze vysledovat dva rozdílné přístupy, kterak tento problém řešit. První spočívá v tom, že se vytvoří zvláštní tisková verze stránky a z hlavní se na ni uvede v textu odkaz. Toto řešení osobně nepokládám za šťastné, protože znamená, že místo klepnutí na tlačítko "tiskni", které mám v prohlížeči stále na stejném místě, musím vědět, že takovou možnost tento tvůrce do stránky zahrnul a zjistit, jak se aktivuje.

Druhý způsob využívá toho, že standard CSS umožňuje aplikovat různá pravidla pro různé způsoby zpracování - obrazovku, tisk, projekci atd. Jak už to u vznešených myšlenek bývá, z původně široce koncipovaného řešení bylo implementováno minimum, ale všechny dnes prakticky používané prohlížeče zvládají styly pro obrazovku (screeen) a tisk (print).

Pokud se na soubory se styly odkazujeme přímo, je řešení jednoduché. Stačí do hlavičky zapsat cosi v duchu:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Drobný problém nastane v okamžiku, kdy pro přiřazování stylů používáme novinku v ASP.NET 2.0: Themes. V takovém případě se odkazy na CSS soubory v hlavičce generují automaticky a nelze jednoduše určit, jaký soubor lze použít pro které médium.

Naštěstí lze tuto výhybku realizovat i čistě v CSS pomocí direktivy @media následujícím způsobem:

@media screen {
/* pravidla pro obrazovku */
BODY { background-color: #cccccc; color: #333333; }
}


@media print {
/* pravidla pro tisk */
BODY { background-color: #ffffff; color: #000000; }
}

Pravidla můžete umístit do jednoho souboru a nebo do několika, jak je vám libo.

  • Altairis
  • Nemesis
  • Microsoft MVP
  • IIS
  • ASP.NET