Webb 10 – Utskriftsvänlig CSS

Ibland vill du kunna kontrollera vad på en hemsida som visas när du skriver ut den. Några vanliga justeringar är att dölja menyer och kontaktformulär eller att ändra storlek på kolumner och typsnitt.

Man kan också vilja ändra färger. Webbläsaren hjälper oftast automatiskt dig att justera så du inte skriver ut svart bakgrund med vit text men det kan ändå vara värt att justera färger manuellt också. Ljusgrå text på vitt papper är ofta för svårt att läsa.

Alla ändringarna för en utskriftsvänlig sida görs i CSS. Tänk dig utskriften som en vy på din sida. Liknande vyn för mobilen. Du arbetar med samma teknik – Media Queries.

@media print {
  
  article,
  aside {
    float: initial;
    width: auto;
  }

  a:after{
    content:" (" attr(href) ") ";
  }
}

När du sitter och jobbar med din print-css kan du börja med att testa mot förhandsgranskningen i webbläsaren. Välj skriv ut och titta hur det ser ut. När du börjar bli färdig gör du en riktig testutstkrift för att säkra att du fått rätt på alla delar.

Uppgifter

Titta på den uppdaterade versionen av apelsinsidan. Välj skriv ut och notera vilka ändringar som är gjorda. Titta sedan i CSS:en och jämför. Förstår du alla CSS-ändringar för print-versionen?

apernit print-preview
Förhandsvisning av utskriften på apelsinsidan

Lägg till en utskriftsvänlig CSS till din hemsida.