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