Het blijft me verbazen dat mensen op een webpagina moeten zoeken naar een link of een knop met de tekst 'Afdrukken', vooral gezien het feit dat er een wondertechnologie is die die stap overbodig maakt. Helaas gebruikt bijna niemand het, ook al is het ... 10 jaar oud.
Het is niet alleen dom om een extra stap voor het afdrukken te vereisen, maar het gebruik van afdrukstijlenbladen zou wat inkt besparen voor iedereen die de afdrukbare link niet gebruikt. En natuurlijk zijn er heel veel mensen die print-to-pdf gebruiken om artikelen voor later op te slaan zonder papier te verspillen.
Wat zijn afdrukstijlenbladen?
De meeste websites implementeren hun afdrukfunctie door u naar een andere pagina te leiden, die anders is opgemaakt voor printers, maar dit is echt niet nodig. Elke browser implementeert een eenvoudige CSS-technologie die bekend staat als Stylesheets afdrukken , wat niets meer is dan een bestand dat elementen specificeert die moeten worden verborgen wanneer uw browser de pagina afdrukt.
Voor degenen die niet vertrouwd zijn, betekent CSS Cascading Style Sheets, en het is hoe uw browser weet hoe de HTML-broncode voor een webpagina moet worden opgemaakt in wat u daadwerkelijk op het scherm ziet. Alles, van lettertypen, kleuren, randen en zelfs achtergrondafbeeldingen, kan in het stijlblad worden gespecificeerd.
Het toevoegen van een afdrukstijlblad is net zo eenvoudig als het invoegen van deze ene regel in de HTML van uw pagina - het media = print-gedeelte van de code vertelt de browser om dit stijlblad alleen te gebruiken bij het afdrukken.
<link rel = "stylesheet" href = "print.css" type = "text / css" media = "print">
Dit bestand ziet er over het algemeen ongeveer zo uit:
#sidebar, #footer, #navigatie, #sharinglinks, #topad, #comments { display:none }
Ja, zo simpel is het. Dus hoe werkt het? Hier is een voorbeeld van een normale webpagina aan de linkerkant, met alle navigatie, logo's en advertenties duidelijk zichtbaar met de bijbehorende ID - en aan de rechterkant, dezelfde pagina waarop het afdrukstijlblad is toegepast, waarbij al deze elementen worden verborgen.
Het is duidelijk dat je er de voorkeur aan geeft de een over de ander af te drukken, toch?
Voorbeelden van mislukte afdrukstijlen
Helaas zijn er gewoon heel veel enorme websites die helemaal niet de moeite hebben genomen om dit te implementeren. Bekijk wat er gebeurt als u probeert af te drukken vanuit de New York Times:
Sommige sites, zoals het Gawker-netwerk van sites, zijn nog erger. Ze hebben niet alleen geen afdrukbare weergave, maar als u probeert af te drukken, lijkt het op inktsoep. Voor zover we kunnen nagaan, is er geen manier om af te drukken vanaf een Gawker-site zonder een aparte service zoals Readability te gebruiken, of de inhoud op de pagina handmatig te markeren, wat bijna onmogelijk is bij hun nieuwe ontwerp.
Het is echt triest. Veel van de grootste sites slagen er gewoon helemaal niet in om deze functie te implementeren.
Gelukkig gebruiken sommige sites ze wel
Hier is een voorbeeld van een correct opgemaakte afdrukbare weergave, zonder dat u de moeite hoeft te doen om een afdruklink te vinden. De BBC News-site maakt de artikelen netjes op voor print, compleet met een aangepaste koptekst. Ze bevatten wel opmerkingen in de afdrukweergave, maar het is nog steeds goed gedaan.
Er zijn nogal wat andere sites die hetzelfde doen, zoals ArsTechnica en… onze site, maar het zou dom zijn om screenshots van allemaal te laten zien. In ons onderzoek zijn de sites die ze correct hebben geïmplementeerd, zeldzaam.
Dus om af te ronden ... neem alstublieft de 5 minuten die nodig zijn om een print stylesheet voor uw site te implementeren!
