Tiskové listy stylů byly poněkud zapomenuty a přesto zůstávají důležité stejně. Mnoho lidí vytiskne články, které si přečtou při cestování, nebo když nemají přístup k internetu.

Fólie stylů tisku mají určité výhody . Například čtení na papíře je pro oči méně únavné než čtení na obrazovce.

Rovněž následující výukové programy jsou jednodušší, pokud máte vedle sebe, s otevřeným kódem na obrazovce; Tímto způsobem nemusíte přepínat okna pokaždé, když hledáte něco.

V tomto článku ukážeme 10 jednoduchých tipů, které vám pomohou vytvořit lepší listy stylů tisku .

V případě, že jste zapomněli, postupujte takto:

The media="print" atribut zajišťuje, že uživatelé nevidí žádný ze stylů definovaných v souboru print.css .

Je však třeba věnovat určitou pozornost: pokud váš hlavní stylový list neobsahuje žádný atribut média, list stylu tisku zdědí svůj styl. Chcete-li je oddělit, nastavte hlavní list stylu takto:

Zde je 10 tipů, které vám pomohou začít s tiskem.


1. Odeberte navigaci

Jaký je hlavní rozdíl mezi papírem a počítačem? Papír je statický, zatímco počítač je interaktivní. A k usnadnění této interakce, webové stránky mají navigaci, která se stane zbytečným na papíře.

Skryjte navigaci a další části vašeho webu, které se na papíře stávají zbytečné, například postranní lišty, které odkazují na jiné příspěvky. Kód pro toto je velmi snadné: stačí nastavit element display na none .

[css] #nav, #sidebar {display: žádný;} [/ css]

Odstraňte navigaci


2. Zvětšete oblast obsahu

Po odstranění navigace a postranního panelu je náš obsah nyní rozšířen po celé stránce. To znamená, že list stylu tisku vypadá spíše jako obyčejný dokument namísto papírové verze webu.

Vše, co potřebujeme k rozšíření obsahu, je obnovení plováku, odstranění všech okrajů a nastavení šířky na 100%.

[css] #content {width: 100%; margin: 0; float: none;} [/ css]


3. Obnovte barvy pozadí

Většina prohlížečů již ignoruje vlastnosti pozadí pro zachování inkoustu. Abychom se ujistili, že celé pozadí je bílé, můžeme nastavit tělo na bílou barvu a potom dát každému podřízenému prvku stále na stránku bílé pozadí.

[css] tělo {background: white;} # content {background: transparent;} [/ css]


4. Obnovit barvy textu

Resetováním pozadí se objeví další problém. Co když máte na konci příspěvků tmavě šedou schránku "Informace o autorovi", text je světle šedý nebo bílý? S pozadím nyní nastaveným na bílou budou tyto informace neviditelné.

Chcete-li tento problém vyřešit, změňte libovolný světlý text na něco tmavšího: černé nebo přednostně tmavě šedé.

[css] #author {barva: # 111;} [/ css]


Obnovit barvy textu
Vzít Sam Brown blog nahoře. Dokážete si představit, jak by to vypadalo, kdyby neresetoval barvy textu? Nepochopitelné.


5. Zobrazte cílový odkaz

Vzhledem k tomu, že papír není interaktivní médium, čtenáři samozřejmě nemohou klikat na odkazy a shromažďovat další informace.

Příklad listu stylu tisku zobrazujícího cíle URL

Řekněme, že někdo čte výtisk o novém produktu. Vidět "Klikněte sem pro více informací" najednou by pro ně bylo trochu dráždivé, že? To lze snadno vyřešit přidáním cíle odkazu po samotném textu odkazu, který vám dává něco takového: "Klikněte zde pro více informací (http://hereismore.com/information)."

A co víc, pro prohlížeče připravené pro CSS 2 to lze provést s obyčejným starým CSS. Zde je kód:

[css] a: odkaz: po {content: "(" attr (href) ")";} [/ css]

Můžete věci okořenit menšími písmy, kurzívou nebo cokoli jiného.


6. Vytvoření odkazů vystupuje z běžného textu

Čtenáři musí být schopni rozlišit odkazy od běžného textu. Zde platí základní pravidla použitelnosti: upřednostňuje se modré a podtržení, ale dávám přednost i tónování.

Nezapomeňte, že dokumenty jsou často černé a bílé. Nezáleží jen na rozdílu barev. Zde je kód pro citlivé tištěné odkazy:

[css] a: odkaz {font-weight: tučné; textová výzdoba: podtržená; barva: # 06c;} [/ css]

# 0066cc je světle modrá barva a vypadá to jako # 999999 při tisku ve stupních šedi. Díky tomu odkazy budou vypadat dobře vytištěné buď v barvě, nebo v černé a bílé barvě. Budou také vystupovat z běžného textu.


7. Co o velikosti písma?

Při tisku je standardem 12 bodů. Ale jak to přeložíme do CSS? Někteří říkají, že nastavení velikosti písma na 12 bodů (pt) je dost dobré. Jiní doporučují nastavení na 100%. Přesto ostatní říkají, že v listu stylů tisku neurčují vůbec žádnou velikost písma, protože by to předešlo uživatelským preferencím.

Osobně nejčastěji jdu s velikostí písma o 12 bodech:

[css] p {velikost písma: 12pt;} [/ css]


8. Co o fontech?

Většina lidí dává přednost serifovým písmům, protože jsou méně ošuntělá na očích, lépe vedou čtenáře skrze text a tak dále. Nastavení font-family na serif ve vašem štítku pro tisk je pravděpodobně dobrý nápad, ačkoli někteří čtenáři mohou být překvapeni, že písmo v jejich výtisku není stejné jako písmo na vašem webu.

Zde je kód pro dobrý zásobník písma:

[css] tělo {font-family: Georgia, 'Times New Roman', serif;} [/ css]


Použití písma CSS3 v tisku

Jednou z výhod vlastností @ font-face společnosti CSS 3 je, že můžete vytisknout i vaše speciální písma, takže výtisky vypadají spíše jako vaše webové stránky!


9. Můj blog má spoustu komentářů. Co bych měl dělat?

No, toto je opravdu vaše volba. Na jedné straně přemýšlejte o všech stromech, které byste ušetřili pouze přidáním #comments { display: none; } do listu stylů tisku. Na druhou stranu, komentáře mají na některých blogů velkou hodnotu a obsahují velkou diskuzi.

Přesunutím poznámek na jejich vlastní stránku můžete dát uživatelům možnost vybrat si, zda si je mají vytisknout. CSS má vlastnost, která zjednodušuje:

[css] #comments {page-break-before: vždy;} [/ css]


Například pokud je váš článek dlouhý 2 a půl, komentáře se budou spouštět od strany 4 až po, např. 6. Uživatelé si budou moci vybrat, které stránky vytisknou, aniž by ztratily jakékoli informace.


10. Zobrazte zprávu pouze pro tisk

" Děkujeme za tisk tohoto článku! Nezapomeňte se vrátit na mysite.com pro nové články. "Proč v tiskové podobě nezobrazovat takovou přátelskou zprávu? Nebo můžete požádat čtenáře, aby recyklovali papír, který používali k ochraně životního prostředí.

Zde je to, co by vypadalo:


Děkujeme za tisk tohoto článku. Nezapomeňte se vrátit na mysite.com pro nové články.

[css] #printMsg {display: blok;} [/ css]

Můžete také přidat trochu styl, jako hranici 1 pixel. Nezapomeňte přidat #printMsg { display: none; } ke svému pravidelnému stylu, aby se zabránilo matoucím návštěvníkům.


Vitrína

Zde jsou některé příklady z dobře známých webů, které si myslely (nebo zapomněly) na listu stylu tisku. Neváhejte se inspirovat.

Vypadá dobře:

Zde jsou některé webové stránky, které dělají skvělou práci se svými listy stylů tisku:

24 způsobů
24 způsobů : Webová stránka tohoto "adventního kalendáře pro webových geeků" má fantazijní design, ale přemýšlel jsem, jak to vypadá v tisku. Výsledkem je opravdu pěkné. Prázdné položky CSS 3 byly odstraněny. Rozložení je čisté a přesto stále hladké. Velká značka byla odstraněna a nahrazena jednoduchým pravým zarovnáním "24 způsobů" vedle názvu příspěvku.


ThinkVitamin
ThinkVitamin : Carsonified blog je dobrý příklad toho, jak udělat listy stylu tisku. Žádné skutečné slabé stránky, kromě toho, že cílová adresa URL není zobrazena.


CSS-triky
CSS-triky : Chris Coyier z CSS-Tricks.com udělal dobrou práci se svým tiskem stylu list. Odstranil veškerý nepořádek a přesunul komentáře na novou stránku, takže se uživatelé mohou rozhodnout, že nebudou tisknout.


Mohl použít nějakou práci

Zde jsou některé webové stránky, které jsou již skvělé, ale jejichž listy stylů tisku by mohly použít trochu lesku. Žádný přestupek nikomu v této sekci.

WebdesignLedger
Webdesign Ledger : Webdesign Ledger zřejmě zanedbával svůj list stylu tisku. Po klepnutí na tlačítko "Tisk" skončíte s třemi stránkami reklam a souvisejícími odkazy.


Designová skříň
Designová skříň : Zdá se, že Brian Hoff zapomněl také na svůj list stylu tisku. Když vytisknete článek, dostanete i formulář pro komentář.


Flickr
Flickr : Byť schopen vytisknout fotky, které se budou zobrazovat přátelům, by bylo hezké. Flickr mohl odstranit vše, kromě samotného obrazu a informací o autorských právech ve výtiscích. Ale vše se objevuje v obyčejném HTML.


Zdroje


Napsal výhradně pro WDD Pieter Beulque. On je student a web Developer , žijící v Belgii. Můžete ho následovat Cvrlikání také.