CSS umožňují, aby se vzhled stránky na obrazovce a v tiskárně odlišoval.
Media=print - Příklad - Alternativní zápisy - Podpora prohlížečů - Výhody - Zalomení stránky - Tisk naležato - Tisk pozadí - Snadné experimenty
Uvedu-li v tagu <style> atribut media s hodnotou print, říkám tím, že se
instrukce tohoto stylopisu budou vztahovat jenom na tisk.
<style media="print">
(Existují i jiné možné hodnoty atributu media, například screen pro monitor, page pro tištěnou stránku.)
<html><head><title>Pokus s media=print</title>
<style media="print">
p {font-style: italic}
</style>
</head>
<body>
<p>Tento text bude na monitoru zobrazen normálním stojatým písmem, ale při tisku
vyleze kurzívou.</p>
</body></html>
Nevěříte? Inu, než jsem si tenhle příklad vytisknul, taky jsem nevěřil.
Vztahuje-li se k tisku celý externí stylopis odkazovaný tagem <link rel=stylesheet>, prostě se také přidá media=print, stejně jako do <style>:
<link rel=stylesheet href="někam.css" media=print>
Horší situace nastává, pokud chci pro tisk určit část stávajícího stylopisu nebo když styl zadávám přímo. Pak musím využít formule @media print.
<style>
p {color: blue}/* Normální stylopis */
@media print {
p {text-indent: 10%}
}
/* Pokračování normálního stylopisu*/
</style>
Určitě jste si všimli syntaxe, která spočívá v použití dalších složených závorek, které ohraničují styl určený pro tisk.
Podobně se to dá použít v přímém stylu:
<p style="@media print{ p {text-indent: 10%} }">Text odstavce.</p>
Výše popsané postupy fungují ve všech prohlížečích, které podporují CSS s výjimkou Netscape Navigatoru
verze 4 (což asi nikoho nepřekvapí), ten naštěstí pak ty zápisy ignoruje. Mírné zklamání jsem zažil u MSIE
verze 4, který nepodporuje zápis @media print (media=print ano). IE 5, Opera 5 a Mozilla 5 podporují
bezvadně. Můžete si to zkusit na příkladu, v němž využívám všechny
postupy.
Není to žádná bomba, ale někdy se to může hodit. Napadá mě pár příkladů:
Určitě vymyslíte mnoho veselých použití. Zejména si lze vyhrát s třídami a identifikátory.
CSS2 nabízí celou kolekci nových vlastností, které mají ovlivňovat tištěný výstup. Dnes jsou do prohlížeče Internet Explorer 5 zabudovány pouze vlastnosti určující zalomení stránek.
| Vlastost | Význam | Hodnoty |
|---|---|---|
| page-break-before | zalomení stránky před elementem | always | auto | right | left | avoid |
| page-break-after | zalomení stránky po elementu |
| Hodnota | Význam | Poznámka |
|---|---|---|
| always | zalomení vždy | Jediná rozumně použitelná hodnota |
| auto | normálně | Jako by se nic nezadalo |
| right | nová pravá stránka | u tisku, v němž jsou rozlišovány pravá a levá stránka |
| left | nová levá stránka | |
| avoid | nikdy nelámat | V Internet Exploreru nefunguje |
V praxi by se nejčastěji použilo zakázání zarovnání po nadpisech (h2 {page-break-after: avoid}), ale to nefunguje. Proto je dnes rozumné využití těchto vlastností jen v přikazování zalomení (hodnotou always), což ale často vede k chybám a zbytečné spotřebě papíru.
Prakticky dnes nejde nijak udělat. V Internet Exploreru 5 ale funguje poněkud zvláštní CSS vlastnost, která umožňuje nastavit tisk naležato, to jest na šířku. Zápis je následující:
@page {mso-page-orientation: landscape}
Pozor, mám pocit, že se tím přenastaví prohlížeč na delší dobu a pak tak tiskne všechno. Mnohem častěji to ovšem nefunguje vůbec, myslím, že to na klientovi vyžaduje i nainstalované MS Office.
Je to někde v nastavení prohlížeče. Např v IE5:
Nástroje - Možnosti - Upřesnit - Tisk - Tisknout barvy a pozadí na obrázky.
Neznám žádný způsob, jak nějakou html nebo css deklarací způsobit tisk pozadí, musí si to nasatavit sám uživatel.
Dnes nejrozšířenější prohlížeče Internet Explorer 5 a 6 mají velmi pěkný příkaz: Soubor - Náhled. Je to klasické zobrazení před tiskem, ukazuje stránku přesně tak, jak potom vyleze z tiskárny. Podle mých zkušeností je to naprosto přesné s výjimkou tisku průhledných obrázků na postskriptových tiskárnách (průhledná barva se tiskne bíle). Takže na pokusy nemusíte plýtvat papírem.
Vizte též: Různý styl v různých prohlížečích, Přehled vlastností a hodnot CSS
Příklad: Zkouška tiskových CSS
o tvorbě, údržbě a zlepšování internetových stránek