Opret en udskriftsvenlig side med Gutenberg.css

Webdesignere glemmer ofte Print fordi det synes meget mindre nødvendigt i dag. Og det kan være tilfældet for digitale websteder som BuzzFeed.

Men på informative hjemmesider Det er stadig en god praksis at tilbyde en brugerdefineret udskriftsformatark. Heldigvis behøver du ikke at designe din egen, fordi Gutenberg er her for at hjælpe.

Navngivet efter opfinderen af ​​trykkeriet Johannes Gutenberg, er dette CSS-bibliotek en selvstændig ressource for print side designs.

Du bare tilføj gutenberg.css fil ind i dit dokumenthoved, og du er helt klar.

Når en besøgende går til at udskrive din side, skal den automatisk restyler baseret på udskriftsindstillingen. Dette kan indstilles ved hjælp af medier = "print" HTML attribut.

Tjek denne vejledning, hvis du vil lære lidt mere om udskrive stylesheets og hvordan de virker.

Det gode ved Gutenberg er det leveres med ekstra klasser og stilarter også.

Grav ind i temaermappen, og du finder tre alternative print temaer: Bestil, moderne, og gammel stil. Du kan gøre nogen af ​​disse til Standard ved at tilføje dem oven på standard gutenberg.css fil.

Du kan også stil siden forskelligt til udskrivning ved at tilføje specifikke CSS klasser. For eksempel .no-print klasse vilje helt gem et element i udskriftsstilen.

Et andet eksempel er Tilføjelse af link URL'er ved siden af ​​teksten. Gutenberg tilføjer denne funktion for at gøre det nemmere for folk at finde webadresserne fra din side. Men du kan tilføje .no-omformatere klasse på ankerelementet til skjul webadressen.

Alle disse ting er dækket af GitHub repo og det er meget ligetil. Du kan have Gutenberg installeret på mindre end 5 minutter og hele dit websted vil være print-venligt.

Dette er langt en af ​​de enkleste og sejeste biblioteker at implementere til bedre ydeevne. Det kan tilføje et par ekstra KB'er, men den samlede oplevelse vil blive drastisk forbedret.

Hvis indholdet af dit websted muligvis er trykt af nogen grund så er Gutenberg.css en uundværlig ressource.