Iets waar moderne websites het lastig mee hebben is om als je de webpagina afdrukt, deze vaak te veel nutteloze informatie afdrukt. Een pagina printer-friendly maken is echter niet zo moeilijk:

CSS Media type: print

In css zijn er enkele media types: screen voor schermen, print voor afdrukken en speech voor text-to-speech synthesizers.

Deze kunnen op enkele manieren worden gebruikt: In de <link> verwijzing en in het css stylesheet zelf. Ik heb hiervoor een apart stylesheet gemaakt, welke ik aanroep door in de <link> tag het attribuut media="print" toe te voegen (<link rel="stylesheet" media="print" href="/pad/naar/print.css">). Je kan uiteraard ook css media queries gebruiken:

@media print {
    /*hier de css regels voor print */
}

Bijde manieren werken even goed.

Overbodige dingen verbergen.

vaak is de navigatiebalk en de footer van een webpagina niet zo nuttig als je hem afdrukt. Daarvoor voegen we een stuk css toe aan ons print.css (of het stuk voor print in het gewone stylesheet):

/*
Verberg de nav, footer en alles met de classe noprint.
*/
nav, footer, .noprint {
    display: none;
}

Hierdoor worden de navigatiebalk, de footer en alles met class="noprint" niet afgedrukt.

Links

Een link afdrukken, dat is niet zo handig: want je kan er niet op klikken. Met css pseudo classes kunen we wel maken dat de bestemming van de link achter de link word geplaatst:

/*
Link gewoon zwart, vetjes en onderlijnd.
*/
a:link,
a:visited {
    color: black;
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
}

/*
Voeg de url toe tussen haakjes achter de link
*/
a:link:after,
a:visited:after {
    content: " (" attr(href) ") "
}

/*
als de link begint met een /, voeg er de url van de site aan toe
*/
a[href^="/"]:after {
    content: " (https://www.vincentlammens.be" attr(href) ") ";
}

met deze css regels is de pagina iets beter voor print. hieronder zie je bijvoorbeeld het resultaat voor mijn website, welke anders zou worden afgedrukt met de navigatie en footer.