Lag en utskriftsvennlig side med Gutenberg.css
Webdesignere glemmer ofte skrive ut fordi det virker mye mindre nødvendig i dag. Og dette kan være sant for digitale nettsteder som BuzzFeed.
Men på informasjonsnettsteder Det er fortsatt en god praksis å tilby en tilpasset utskriftsformat. Heldigvis trenger du ikke å designe din egen fordi Gutenberg er her for å hjelpe.
Oppkalt etter oppfinneren av trykkpressen Johannes Gutenberg, er dette CSS-biblioteket en frittstående ressurs for skrive ut sider design.
Du bare Legg til gutenberg.css
fil inn i dokumenthodet, og du er helt klar.
Når en besøkende går for å skrive ut siden din det skal automatisk restyler basert på utskriftsinnstillingen. Dette kan stilles inn ved hjelp av media = "print"
HTML-attributt.
Sjekk ut denne veiledningen hvis du vil lære litt mer om skrive ut stilark og hvordan de jobber.
Det fine med Gutenberg er det kommer med ekstra klasser og stiler også.
Grav inn i tema-mappen, og du vil finne tre alternative utskriftstemaer: bok, moderne, og gammel stil. Du kan gjøre noen av disse til misligholde ved å legge dem på toppen av standardinnstillingen gutenberg.css
fil.
Også, kan du stil siden annerledes for utskrift ved å legge til spesifikke CSS klasser. For eksempel .no-print
klasse vilje helt gjem et element i utskriftsstilen.
Et annet eksempel er tillegg av linkadresser ved siden av teksten. Gutenberg legger til denne funksjonen for å gjøre det lettere for folk å finne nettadressene fra siden din. Men du kan legge til .no-reformatere
klasse på ankerelementet til skjul nettadressen.
Alt dette er dekket på GitHub repo, og det er veldig greit. Du kan ha Gutenberg installert på mindre enn 5 minutter og hele nettstedet ditt vil bli utskriftsvennlig.
Dette er langt en av de enkleste og kuleste bibliotekene å implementere for bedre ytelse på nettstedet. Det kan legge til noen ekstra KB'er, men den samlede opplevelsen vil bli drastisk forbedret.
Hvis innholdet på nettstedet ditt kan være trykt av noen grunn da er Gutenberg.css en uunnværlig ressurs.