Tlačové štýly (z angličtiny print styles) v CSS sú inštrukcie pre prehliadač, ktoré stanovujú ako má váš web vyzerať pri tlači na papier. Množstvo stránok v minulosti používalo (alebo dodnes používa) odkaz „Vytlačiť stránku“. Takáto funkcia však zvyčajne vedie nielen k duplicitnému obsahu vo vyhľadávačoch, navyše je takýto odkaz dnes úplne zbytočný. Práve tlačové štýly sú správnou alternatíviou pre tlač webu.
Tlačové štýly (z angličtiny print styles) v CSS sú inštrukcie pre prehliadač, ktoré stanovujú ako má váš web vyzerať pri tlači na papier. Množstvo stránok v minulosti používalo (alebo dodnes používa) odkaz „Vytlačiť stránku“. Takáto funkcia však zvyčajne vedie nielen k duplicitnému obsahu vo vyhľadávačoch, navyše je takýto odkaz dnes úplne zbytočný. Práve tlačové štýly sú správnou alternatívou pre tlač webu.
Ako fungujú tlačové štýly? V princípe ide o rovnaké inštrukcie CSS, ako používate pre layout a design vášho webu už dnes. Jediným odlíšením je použitie print média na označenie pravidiel pre tlač. Tlačový štýl môžete pridať na váš web napríklad takto:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Naozaj chcete tlačiť všetko?
Okrem neekologickosti tlače webu tak ako ho vidíte na obrazovke, by ste sa mali zamyslieť aj nad tým, či sú všetky jeho časti naozaj potrebné pri tlači na papier. Pomôže návštevníkovi vášho webu vytlačené ľavé menu? A čo reklamné bannery – akú úlohu plnia na vytlačenej stránke formátu A4? A čo ak práve naopak chcete poskytnúť dodatočnú informáciu pri tlači, ktorú na webe nie je vidno? Či dokonca chcete, aby vaše logo nebolo na papieri „zubaté“ a fotky chcete tlačiť vo vyššej kvalite?
Tlačové štýly sú vaša záchrana. Odbúrajte zbytočné prvky stránky, prípadne zjednodušte rozloženie prvkov pri tlači. Povedzme, že element banner obsahuje reklamu, ktorú nechceme tlačiť. Taktiež zrušíme ľavé menu, ktoré je na papieri zbytočné. No a logo bude na papieri vyzerať lepšie, ako ho ponúkneme vo vyššej kvalite. Do print.css štýlu vložíme nasledovné pravidlá:
#banner, #menu { display: none }
#logo { background: url(images/logo-hq.png); }
Výzva na akciu aj na papieri
Naopak, chceme zobraziť adresu webu (URL), ktorá bola vytlačená – doplníme do obsahu HTML stránky skrytý element printurl a do tlačových štýlov doplníme pravidlo na jeho „zviditeľnenie“:
#printurl { display: block; font-size: 120%; font-weight: bold; }
Tak zabezpečíme, že čitateľ vytlačenej verzie bude hneď vidieť, aká je adresa webu. Do elementu viditeľného len pri tlači, môžete pridať aj výzvu k akcii, napr. „Navštívte www.example.com a získajte 5% zľavu!“ alebo „Pri objednávke do 30. septembra je doručenie zadarmo!“.
Vytlačená objednávka pre okamžitú kontrolu
Optimálne je používať špecifické tlačové štýly aj v prípade všetkých „záverečných“ obrazoviek pri nákupoch poskytujúcich sumár objednávky, itinerár cesty, dôležité kontakty či dátum dodania zásielky. Práve vtedy je správnym použitím CSS pravidiel možné dosiahnuť prehľadnú A4-ku so všetkými informáciami ihneď k dispozícii. Zákazníkovi ušetríte frustráciu, sebe čas strávený opakovaným zodpovedaním informácií o objednávke.
Mimochodom: aj tento článok pri tlači dostanete servírovaný trošku inak (použite napr. Print Preview – ukážku tlače).
Poznáte iné príklady využitia tlačových štýlov pre offline propagáciu? Napíšte nám ich do komentárov!
//bastadigital.com/tlacove-styly-offline-propagacia/
Ako celkom šikovné použitie týchto trikov by som videl možnosť ponúknuť zľavu na ďalší nákup v prípade, že je zákazník nútený (napr. lístky na nejaké prestavenie) naozaj vytlačiť info zo stránky. Súc inšpirovaný typickými hláškami mailov o šetrení životného prostredia by mohli byť na konci tlačené informácie nesúce message „sorry že nešetríme prostredie a spôsobujeme drobné výdavky, ako naše ospravedlnenie prijmite zľavu XY z nasledujúcej objednávky, kód kupónu ABC123…“
@JuRoot: To znie ako dobrý nápad a navyše určite zaujme aj ekologicky orientovaných ľudí.
super clanok