Tutorial: Print-CSS

Inhalt

  1. Prinzip
  2. Quellcode
  3. Beispiel

Prinzip

Da viele Informationen beim Drucken nicht angezeigt werden, werden dieser per CSS im Druck-Stylesheet ausgeben. Dies geschieht Mithilfe der Eigenschaft content:.

Quellcode im Detail

  1. a[href]:after {
  2. content: " <"attr(href)">";
  3. color:#777;
  4. font-style:italic;
  5. font-size:0.9em;
  6. }

Verknüpfungen wird der Pfad angehängt

  1. *[title]:after {
  2. content: " ("attr(title)")";
  3. color:#777;
  4. font-style:italic;
  5. font-size:0.9em;
  6. }

Bei zusätzlichen Erklärungen (Wenn mit der Maus darübergefahren wird) wird ebenfalls angehängt.

  1. *[cite]:after {
  2. content: (Quelle: "attr(cite)")";
  3. color:#777;
  4. font-style:italic;
  5. font-size:0.9em;
  6. }

Falls ein HTML-Element eine Quellenangabe besitzt wird diese ebenfalls per after,content angehängt.

Beispiel

Das Beispiel der Printvorschau begutachten

Alle IEs unterstützen dieses CSS nicht, da sie entweder die Selektoren nicht beherschen, oder die content Eigenschaft im CSS nicht unterstützen

Dieser Code wurde erfolgreich getestet in folgenen Browsern: