17 Březen

Tisk stránky, aneb tiskneme jen to co je potřeba

(x)HTML, CSS, Javascript

Netuším, kolik návštěvníků stránek používá tisk přímo z prohlížeče, ale rád to, i třeba tomu 1% usnadním a vytvořím jim speciální styl pro tisk.
Jak vypadá výsledný vzhled tisku, se můžete podívat na nově spuštěných stránkách www.lanex.cz, nejlépe to jde vidět v sekci O nás, pokud si (v Internet Exploreru) zobrazíte náhled tisku, tak uvidíte, že se tiskne opravdu jen text, který je pro uživatele důležitý.

Základní deklarace speciálního tiskového stylu se provádí přes:

ve zdrojovém kódu ho umísťuji pod všechny CSS, které mám nadeklarovány, aby všechny CSS tzv. „přebyl“.
Samotný print.css vytvořím z hlavního CSS stylu, kde nastavím header, footer a menu (pokud je) na display: none, ostatní nadřazené DIVy hlavního textu, dám na 100% a background (pokud mají) nastavím na bílý, samozřejmě jím odstraním padding a margin a výsledek testuji v Internet Exploreru, zdá se mi na toto nejrychlejší a nejlepší a jelikož většina uživatelů (BFU) používá právě IE.

Samotné tlačítko, sloužící pro tisk stránky vypadá nějak takto:

Vytisknout stránku

Více o tisku stránky vědět asi nepotřebujete, existují samozřejmě ještě triky, jak výsledný vzhled tisku pomocí CSS doladit, ale nevím kolik kodéru něco podobného používá, nebo se tiskem do podrobna zabývá.
Opět stejný závěr, kdybyste měli jakýkoliv dotaz nebo nějaké doplnění k tisku HTML stránky, tak se neváhejte vyjádřit do komentářů, díky :)

Přidat na facebook.com Přidat na twitter.com Přidat na delicious.com Přidat na digg.com Přidat na stumbleupon.com Přidat na reddit.com
4 komentářů
  1. Březen 18, 2010 v 20:52 Petr Komárek napsal:

    Pokud má tvůj print sheet nastavený media=“print“ a ostatní csska media=“screen“, tak není potřeba dávat tiskový css až nakonec.

    Já osobně preferuji všechno deklarovat v jednom cssku, abych snížil requesty…

  2. Březen 18, 2010 v 20:59 R4ms3S napsal:

    Pošli mi odkaz na nějaký velký web, který jsi dělal a jak vypadá tvoje deklarace, nikdy jsem toto nepoužíval a docela mě to zajímá ;)

    Díky.

  3. Březen 18, 2010 v 21:07 Petr Komárek napsal:

    Například tady, ale toho, že je něco napsaný na jednu řádku a něco ne si nevšímej :)

    http://cinestar.cz/css/layout.css

  4. Březen 18, 2010 v 21:09 R4ms3S napsal:

    Aha, chápu, vypadá to dobře, jen je škoda, že už jsem si zvyknul na ten zápis, který používám, ale i tak díky, zase jsem o něco chytřejší :)



Přidat komentář