Mediefrågor (media queries) på webbsajter är inte bara responsiva villkor för skärmstorlekar. Det är också villkor för utskrifter. Här är min print media query för att få webbsidor grymma på papper.
Det händer inte ofta, men ibland vill du skriva ut en webbsida. Stor irritation. För webbsajten är inte anpassad för utskrifter. Det blir fult och trist och inga som helst marginaler.
Lätt att fixa
De flesta webbutvecklare hoppar helt enkelt över det här. Troligen är det en kulturfråga. Det är i alla fall inte särskilt svårt att fixa. För dig som är insatt i css så bygger idén på att ta bort navigeringselement och allt annat tjafs som ändå inte går att använda offline. (Enda gången det är helt ok att använda latmaskregeln !important.)
Finliret
Därefter är det finlir med speciella villkor för A4-marginaler, fonter som funkar, utskrivna länkadresser och kanske en extra marginal för sidan 1. Du kan sno min kod rakt av, fast mina selektorer är förstås unika för sajten.
Det finns css-properties för automatisk sidnumrering också. Tyvärr stöder inte alla webbläsare de koderna ännu så jag hoppade över den detaljen.
Prova att skriva ut den här sidan. Funkar det?
Koden
@media print {
/* Let's do this in black & white */
body {
color: #000;
background: #fff;
padding: 0;
}
#wrap {
box-shadow: none !important;
}
/* Ditch the web stuff and the sidebar */
#menu, nav, #sidebar-left, #footer, #loop article footer, #ericl-contact-form, .ericl-service-cta, .ssba, .fb-like {
display: none !important
}
#loop, #top-content {
border-top: 0 !important;
}
/* Logo stays but goes align left */
#headerimg {
margin: 0;
float: left;
}
#headerimg:after {
content: "Utskrivet från lindesvard.se";
color: #000;
margin-right: 2cm;
}
.container {
width: auto;
margin: 0;
}
/* Setting A4 page width */
.container .sixteen.columns {
width: 21cm;
}
.container .twelve.columns {
width: auto;
}
/* Fail-safe fonts */
p, h1, h2, h3, h4, li, table, figcaption, .post-meta, .page-meta {
font-family: arial, sans-serif !important;
color: #000;
}
h1 {
font-size: 30pt !important;
}
.ericl-taxonomy-header h1 {
font-size: 1rem !important;
}
h2, .h2 {
font-size: 18pt !important;
margin: 2rem 0 1rem;
page-break-after: avoid
}
table, figure {
page-break-inside: avoid !important;
}
figure img {
width: 100%;
}
.inlead {
font-size: 1.188rem !important;
font-weight: bold !important;
}
.filled-facts-container {
padding: 0;
}
ul {
padding-left: 30px !important;
text-indent: 0 !important;
}
/* I have so many list styles but not anymore */
ul li {
display: list-item !important;
list-style-type: disc !important;
padding: 0 !important;
border-left: 0 !important;
margin: 0 !important;
}
/* Kill them icons too */
ul li:before {
content: "" !important;
padding: 0 !important;
}
a {
color: #000;
border-style: solid;
}
/* Print html links in content area */
.entry-content a:not(.border0):not(.ericl-green-button):not(.top-link):after {
content: " ("attr(href)") ";
font-family: arial, sans-serif;
}
h1 a, .post-meta a, .page-meta a, #breadcrumbs a, li:before, .second-text-lightbg {
border: 0;
color: #000 !important;
}
}
/* Finally, page margins */
@page {
size: A4;
margin: 2.4cm 2cm 3cm 3cm;
}
@page :first {
margin-top: 2.4cm;
}
/* Printer, I love you */
(Det här blogginlägget har lästs 24283 gånger.)
