Printlayout mit CSS

„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. 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. Anzeige von Links und deren Inhalten 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]

HTML mit JavaScript (jQuery) nachladen

Manchmal ist es ganz nützlich den Inhalt einer HTML Seite extern nachzuladen. Beispielsweise ist es unheimlich nützlich, wenn eine vom Shop oder CMS losgelöste Landingpage (Startseite) hinundwieder mit frischem Inhalt versorgt werden will, die Quelldaten des Templates aber im Verzeichnisbaum in der Dunkelheit des Grabens verscharrt sind, oder dieser Inhalt von propriätär gestalteten Templates ferngehalten werden soll. Ist das Templatesystem bereits auf php basierend, ist es indes sehr leicht mit Hilfe eines includes HTML Inhalt nachzuladen. Besteht das Templatesystem jedoch aus reinen HTML Dateien, wird es etwas komplizierter. Hier gibt es an sich wohl nur zwei Möglichkeiten: Server Side Includes (SSI) oder JavaScript. Da SSI nicht bei jedem Hoster funktioniert, besteht also im Prinzip nur die Möglichkeit über JavaScript. Mit Javascript lässt sich bspw. der Inhalt von div Elementen sehr einfach manipulieren und somit auch durch einen nachgeladenen Code ersetzen. Dazu stehen hier stellvertretend zwei divs mit je eigener ID, deren Inhalt beim laden der Seite per JS verändert wird

alternative content
alternative content
Der alternative content ist dabei sehr wichtig, da sonst User ohne JavaScript an dieser Setlle nur ein weißes Feld ohne jeglichen Inhalt zu sehen bekämen. Der nachfolgende JavaScript Aufruf überschreibt dann … Weiterlesen →