<hr> background in druckvorschau nicht angezeigt

[Gunnar Bittersmann]

@@Rolf B

Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann.

Liege ich damit richtig?

Nein.

Als Nutzer möchte man, dass Webseiten möglichst schnell laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. Ein Stylesheet, nicht mehrere. Ein Stylesheet, nicht zwei.

Als Entwickler möchte man, dass Code möglichst wartbar ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: Ein Stylesheet, nicht mehrere. Ein Stylesheet, nicht zwei.

Nicht mehrere <link rel="stylesheet">, nicht @import() im Stylesheet.

In dem einen Stylesheet werden dann per media queries gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw.

html
{
	background: hsl(0, 0%, 20%);
	color: white;
	font: 1em/1.4 Georgia, serif;
}

@media print
{
	html
	{
		background: white;	
		color: black;
		font-size: 12pt;
	}
}


nav
{
	background: black;
}

nav ul
{
	display: flex;
	list-style: none;
}

@media print
{
	nav
	{
		display: none;
	}
}


a
{
	color: hsl(0, 100%, 70%);
}

a:focus, a:hover
{
	color: hsl(0, 100%, 80%);
}

@media print
{
	a, a:focus, a:hover
	{
		color: inherit;
		text-decoration: inherit;
	}

	a::after
	{
		content: ' (' attr(href) ')';
	}
}

LLAP 🖖