Ecommerce, SEO, Gadgets, Mac und Internet Themen

Printlayout mit CSS

Kategorie: web-development Autor: bei Google+

“Mittlerweile gehört ist es bei informativen Webseiten und Portalen Usus, separate Ansichten von einzelnen Seiten anzubieten, um auch beim Drucken ein ansprechendes Layout zur Verfügung zu stellen. Solche Druckansichten erhöhen den Service für den Besucher, der sich sonst umständliches Drucken in verschiedenen Ansichten erspart und z.B. Elemente, die gar nicht notwendig sind, mit ausdruckt.” [via]

CSS bietet die Möglichkeit, für verschiedene Medientypen unterschiedliche Layouts festzulegen.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Enthält das allgemeingültige Stylesheet Definitionen, die auf einem Ausdruck störend wären, müssen diese im Druck-Stylesheet „print.css“ explizit überschrieben werden.

Nehmen wir an, im Quellcode der Webseite wurde u.a. ein Hyperlink angegeben:

Wenn die Webseite ohne weiteres Zutun ausgedruckt wird, würde nur der Text “Link zu HTMLWorld” angezeigt. Sollte der Leser des Drucks die dazugehörige Internetadresse nicht kennen, macht diese Information nicht viel Sinn.
Eine Abhilfe schafft hier die CSS-Eigenschaft content. Damit kann allgemein vor oder nach bereits bestehenden Inhalten weitere Elemente/weiterer Inhalt eingefügt werden. Ein Beispiel dafür ist das Ziel des Hyperlinks, was dadurch im Ausdruck mit angezeigt wird.
Es ist am sinnvollsten, das Ziel des Hyperlinks direkt nach dem eigentlichen Linktext mit anzuzeigen. Beispiel:

a:link:after { content: " (Link auf <" attr(href) ">) "; }

[via]



Bewertungen für: Printlayout mit CSS
1 Sterne2 Sterne3 Sterne4 Sterne5 Sterne (Keine Bewertungen bisher)
Loading ... Loading ...

Das könnte noch interessant sein:




Magst Du mit mir und Anderen über dieses Thema diskutieren? Schreib doch etwas ins Kommentar und lass uns darüber reden!


wpSEO optimiert Blogs für Suchmaschinen - automatisch und effizient.
Viktor Dite Mizine on Twitter Viktor Dite on Google+