Manuel Matuzovic entdeckt @media print {} Styles neu.
Das Erste, was er in diesem Artikel zeigt, ist ein Tweet von Aaron Gustafson, in dem die Website von Indiegogo für den Druck ziemlich verhunzt ist. Sie sieht im Grunde aus wie eine Website, auf der kein CSS geladen wird, was wahrscheinlich daran liegt, dass sie alle ihre Stile in @media screen {} einschließen oder <link rel="stylesheet" media="screen" href="style.css"> verwenden. Das ist in Ordnung, wenn Sie einen "von Grund auf neu"-Ansatz für Druckstile verfolgen möchten. Ich bevorzuge es im Allgemeinen, Bildschirmstile nicht zu beschränken und stattdessen ein paar druckspezifische Überschreibungen zu verwenden (eine "Blacklist" statt einer "Whitelist").
Manuel wies darauf hin, dass Sie Chrome DevTools verwenden können, um Mediendruck zu emulieren, was ziemlich nützlich ist! Hier ist ein kurzes Video davon
Dieser Screenshot der Indiegogo-Website zeigt auch, wie Inline-SVG (oder auch andere Bilder, nehme ich an) etwas verrückt werden können, wenn Sie keine Größeninformationen im HTML angeben. Das hat mich zu diesem Tipp veranlasst
guter Plan
<svg width=“20px” height=“20px” … >
Sie können mit CSS leicht überschreiben und es verhindert... (siehe Bild)https://#/TcgKHL0R60
— Chris Coyier (@chriscoyier) 17. November 2016
Selbst wenn CSS geladen wird und diese SVGs korrekt dimensioniert, kann es hilfreich sein, sie von Anfang an annähernd korrekt zu dimensionieren, um das zu vermeiden, was Sara Soueidan als "Flash of Unstyled SVG" bezeichnet hat.
Denken Sie daran, dass Attribute wie width und height in CSS extrem einfach zu überschreiben sind. Wenn Sie sie überhaupt in CSS festlegen, werden sie überschrieben. Sie sind nicht wie Inline-Stile.
Manuels Artikel ist voller 12 weiterer heißer Tipps zu Dingen, die Sie in eine Druckvorlage aufnehmen könnten, an die Sie vielleicht nicht denken: Waisen verhindern, Farben korrekt drucken erzwingen, anderweitig versteckte Inhalte anzeigen, alternative Inhalte für Dinge bereitstellen, die nicht korrekt gedruckt werden, usw. Ein paar weitere Tipps hier.