The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Üben
  3. Übung 15

Übung 15 von 15 · Medien

Übung 15: Die Navigation beim Drucken ausblenden

Am Bildschirm soll die Navigation sichtbar bleiben. Beim Drucken soll sie verschwinden. Der Prüfer simuliert beide Medien.

Veröffentlicht Prüfer berechnete WerteHinweise 2
HTML · gegeben
<nav class="menu">Navigation</nav>
<article>Artikeltext, der gedruckt werden soll.</article>
Basis-CSS · gegeben
.menu { padding: 8px; border: 1px solid #7A2FB0; background: #F3ECFA; margin-bottom: 8px; }
Dein CSS · bearbeiten
noch nicht geprüft
Ziel
Dein Ergebnis
  • ·am Bildschirm sichtbar
  • ·im Druck versteckt

Hinweise

Hinweis 1

Die Regel muss nur für ein Medium gelten. CSS 2.1 hat dafür eine At-Regel.

Hinweis 2

@media print { … }

Lösung

Lösung anzeigen

@media print {
  .menu { display: none; }
}

Regeln in @media print gelten nur beim Drucken. Siehe @media und Druck-Stylesheets.

Wie Medienbedingungen ausgewertet werden

Eine At-Regel für ein Medium schließt einen Block ein, der nur gilt, wenn die Bedingung zutrifft. Beim Drucken und in der Seitenvorschau ist das der Fall; am Bildschirm nicht. Die Regeln darin sind gewöhnliche Regeln – sie unterliegen der Kaskade wie alle anderen, und die At-Regel hebt ihre Spezifität nicht an.

Das ist der wichtigste Punkt für die Praxis: Eine Druckregel schlägt eine Bildschirmregel nicht, weil sie in der At-Regel steht, sondern nur nach den üblichen Regeln. Bei gleicher Spezifität entscheidet die Position im Quelltext – deshalb gehören Druckregeln ans Ende des Stylesheets.

Der Medientyp lässt sich auch außerhalb des Stylesheets angeben, im verweisenden Element oder beim Einbinden einer weiteren Datei. Beides ist gleichwertig; ein eigenes Druck-Stylesheet in einer eigenen Datei hat nur den praktischen Vorteil, dass es beisammen bleibt.

Was ein Druck-Stylesheet sonst noch tut

Das Ausblenden der Navigation ist der erste Schritt und selten der einzige. Ebenso wegfallen sollten Suchfelder, Schaltflächen, Werbeflächen und alles, was auf Papier keine Funktion hat. Was bleibt, bekommt in der Regel eine einspaltige Anordnung, weil eine Bildschirmaufteilung in Spalten auf einer Seite selten aufgeht.

Zwei weitere Punkte werden regelmäßig übersehen. Hintergründe werden standardmäßig nicht gedruckt – alles, was seine Bedeutung allein aus einer Hintergrundfarbe bezieht, verschwindet also. Und Verweise sind auf Papier wertlos, solange ihr Ziel nicht dabeisteht; über den generierten Inhalt und die Attributfunktion lässt sich die Adresse in Klammern hinter den Verweistext setzen.

Maße gehören im Druck-Stylesheet in eine absolute Einheit, weil das Papier eine feste Größe hat. Der Punkt ist die naheliegende Wahl. Und für die Umbrüche gibt es die drei Eigenschaften aus dem seitenorientierten Kapitel, die heute zuverlässig funktionieren – Näheres in der Schnellreferenz zu den seitenorientierten Eigenschaften.

Bedingungen jenseits des Mediums

Aus dem Medientyp sind Media Queries geworden, die nicht nur nach der Gattung des Ausgabegeräts fragen, sondern nach prüfbaren Eigenschaften: Breite, Ausrichtung, Pixeldichte, Art des Eingabegeräts, bevorzugtes Farbschema, verringerte Bewegung. Der Medientyp bleibt dabei als erste Angabe erhalten und lässt sich mit weiteren Bedingungen verknüpfen.

Für die Zugänglichkeit ist eine dieser Bedingungen besonders wichtig: die Einstellung, mit der Nutzer Bewegung reduzieren. Wer Übergänge oder Animationen einsetzt, sollte sie darin abschalten oder deutlich verkürzen – das ist eine Anforderung der Richtlinien und keine Geschmacksfrage.

Die jüngste Ergänzung fragt nicht mehr das Fenster, sondern den Container: Ein Baustein reagiert dann darauf, wie viel Platz er selbst bekommt, und nicht darauf, wie breit der Bildschirm ist. Für wiederverwendbare Bausteine ist das die passendere Bedingung, weil derselbe Baustein einmal in einer schmalen Spalte und einmal über die volle Breite stehen kann.

Ein Druck-Stylesheet prüfen, ohne zu drucken

Der schnellste Weg ist die Seitenvorschau des Browsers: Sie wendet das Druck-Stylesheet vollständig an, zeigt die Seitenaufteilung und kostet kein Papier. Für die Feinarbeit ist sie unpraktisch, weil sich darin nichts untersuchen lässt – jede Änderung verlangt einen neuen Aufruf.

Dafür bieten die Prüfwerkzeuge der Browser eine Umschaltung, die das Druckmedium für die normale Ansicht erzwingt. Die Regeln gelten dann in der laufenden Seite, und die Elemente lassen sich untersuchen wie sonst auch. Was diese Umschaltung nicht zeigt, ist alles Seitenbezogene: Umbrüche, Ränder der Seitenbox, Restzeilen. Dafür bleibt die Vorschau nötig.

Beim Prüfen lohnt der Blick auf drei Stellen, an denen es typischerweise klemmt: ein Container mit abgeschnittenem Überlauf, der auf Papier alles nach der ersten Seite verschluckt; eine feste Höhe, die den Inhalt abschneidet; und eine am Fenster verankerte Kopfzeile, die auf jeder Seite erscheint oder gar nicht. Alle drei sind am Bildschirm unauffällig und im Ausdruck sofort sichtbar.

Zuletzt ein Hinweis zur Prüfung in dieser Aufgabe: Der Prüfer wertet beide Medien aus und vergleicht die Sichtbarkeit der Navigation in jedem einzeln. Eine Regel, die sie generell entfernt, besteht die eine Prüfung und scheitert an der anderen – gefordert ist der Unterschied, nicht das Verschwinden. Wer das Ergebnis nachvollziehen will, schaltet die Umschaltung im Prüfwerkzeug hin und her und sieht denselben Vergleich, den der Prüfer anstellt.

Wer das Druck-Stylesheet einmal aufgesetzt hat, sollte es bei jeder größeren Änderung an der Seite kurz gegenprüfen: Es ist der Teil eines Stylesheets, der am seltensten angesehen und am leichtesten unbemerkt kaputt wird.

Fragen zur Übung

Wie prüft die Übung das Ergebnis?

Der Prüfer rendert den eingegebenen Code in einem eigenen Rahmen und liest die berechneten Werte und Maße aus dem Rendering – nicht aus dem Quelltext. Jede Lösung, die dasselbe Rendering ergibt, gilt.

Wird der Fortschritt gespeichert?

Nur in diesem Browser, ohne Anmeldung. Gelöste Übungen bleiben markiert, bis der Browserspeicher gelöscht wird.