Russ Weakleys css-print i auktoriserad översättning av Thomas Lindbjer

1. CSS För utskrift

2. Det finns två alternativ när det gäller att förbereda utskrift med CSS.

3. Alternativ 1: Låt CSS för skärm och utskrift vara densamma (det som fins på skärmen skrivs ut). A lternativ 2: Skapa en helt egen “utskriftsvänlig” css-version.

4. Alternativ 1: Låt CSS för skärm och utskrift vara densamma

5. Eftersom din CSS för utskrift kommer att vara samma som din CSS för skärm , kan du helt enkelt…

6. … lägga till ytterligare en mediatyp till ditt element <link> … eller <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”screen , print &quot; />

7. … lägga till ytterligare en mediatyp till din @media-regel. @media screen , print { /* screen and print rules here */ }

8. Tyvärr är saker aldrig riktigt så enkla !

9. Bakgrundsbilder och färger skrivs inte ut som standard. Det kan få din design för skärm att se märklig ut i utskrift.

10. Flytande och absolut placerade element klipper ibland av efter första sidan (speciellt i vissa versioner av Firefox)

11. Även om det låter komplicerat är det ofta mycket enklare att skapa en helt egen CSS för skrivare – en utskriftsvänlig version för dina sidor.

12. Alternativ 2: Skapa en utskriftsvänlig version

13. Med detta alternativ kommer din CSS för utskrift att skilja sig mot din CSS för skärm , så du kan…

14. … lägga till ytterligare en länk till din nya cssfil för utskrift … eller <link rel=&quot;stylesheet” href=&quot; a. css” type=&quot; te xt/css&quot; media=”screen&quot; /> <link rel=&quot;stylesheet” href=” b. css” type=&quot; te xt/css&quot; media=”print&quot; />

15. … lägga till ytterligare en @media-regel till din css-fil. @media screen { /* screen rules here */ } @media print { /* print rules here */ }

16. Här följer några tips för att enkelt skapa utskriftsvänliga sidor.

17. Tips 1: Formatera om möjligt om fäger till svart och vitt. h1, h2, h3, h4, h5, h6 { color: #000; }

18. Tips 2: Göm sektioner av sidan som inte behövs. #navigation, #sidebar, #adbanner, #richfooter { display: none; }

19. Tips 3: Formatera om standard för textfärg och stil – om du vill det! a:link, a:visited { color: #000; text-decoration: none; }

20. Tips 4: Undvik float, absolut placering och height=100%. #container { float: none; }

21. Tips 5: Gör det enkelt! Minns att syftet är att skapa en sida som är enkel att skriva ut och läsa.

22. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley (översättning: Thomas Lindbjer)