WMP Webstandards

Content per CSS anzeigen

zurück zur Übersicht

In CSS ist es seit längerer Zeit möglich, über die Funktion attr() Text aus XML/HTML Attributen in die Seitenansicht einzufügen.

Der Internet Explorer unterstützt diese Technologie bisher (in Version 6) leider noch nicht, Firefox und Opera unterstützen sie in aktuellen Versionen einwandfrei. Doch nicht immer ist volle Kompatibilität gefragt. Oft sind Informationen für das Verständnis der Seite nicht zwingend nötig.

Ist dies der Fall, kann man von dieser Technik nur profitieren. Wichtig ist allerdings: Sie sollte nur genutzt werden, wenn die dargestellten Informationen nicht zwingend erforderlich sind. (.. denn der IE unterstützt das Feature nicht)

Nach oben

Wie es funktioniert

Für alle Block- und Inlineelemente bietet CSS die Pseudoklassen before und after, mit denen die Bereiche vor, respektive hinter einem Objekt formatiert werden können.
Zudem bietet es die Eigenschaft content, mit der Text eingefügt werden kann.
Die content Eigenschaft kann mehrere Werte kombinieren.

content: "text" "text" "text"

Diese Werte werden kombiniert.
Anstelle von Text ist es jedoch auch möglich, Attribute aus dem betreffenden Tag zu nutzen:

content: attr(title);

Fügt den Text des title Attributs ein.

Nach oben

Wozu?!

Auf diese Weise lassen sich zum Beispiel Quellenangaben für Zitate einfügen, auch Zusammenfassungen für Absätze (keine Überschriften, dafür gibt es <hX> Tags!!) sind gut einsetzbar.

Diese Informationen sind nicht zwangsläufig zum Betrachten der Seite erforderlich, sicherlich aber erfreulich.
Und das Browsen in speziellen Browsern zu erleichtern ist schließlich im Rahmen des w3-Standards legitim...

Es folgen einige nützliche Beispiele

Nach oben

Die Sprache des Linkziels mit einer Grafik anzeigen

Man die Sprache des Linkziels per Grafik anzeigen. Vorausgesetzt ist die Angabe des xml:lang Attributs im Link und eine Grafik für die Sprache (nur Englisch als Beispiel):

<a href="http://www.google.de">Google Deutschland</a>
<a href="http://www.google.us" hreflang="en">Google USA</a> a:[hreflang="en"] {
    padding-left: 20px;
    background: url(en.gif) no-repeat 0 50%;
} Nach oben

Externe Links und interne Verweise (Anker) kennzeichnen

Man kann externe Links, also Verweise, die mit einem "http://" beginnen und Anker kennzeichnen. Im ersten Beispiel wird dafür ein Pfeil verwendet. Im zweiten Beispiel eine Graphik, für die aber erstmit padding-left entsprechend Platz gemacht werden muss.

<p><a href="http://www.test.de">externer Lnk</a></p>

Externe Verweise, ohne Bild

a[href^="http://"]:before,
a[href^="https://"]:before {
    content: "\2197\00A0";
}

Externe Verweise, mit Bild (z.b. 5px x 5px)

a[href^="http://"] {
    background: url(bild.jpg) left;
    padding-left:10px;
}
a[href^="https://"] {
    background: url(bild.jpg) left;
    padding-left:10px;
}

Interne Verweise (Anker)

p><a href="#stelle">springe zur Stelle x</a></p> a[href^="#"]:before{
    content:"\2193";
}

Anmerkungen: Falls man bestimmte Pfeile oder andere Schriftzeichen den externen Links oder Ankern voranstellen möchten, dann braucht man die Unicode-Hexadezimalwerte für die entsprechenden Zeichen. Die Dezimalwerte stehen z.B. hier . Die dort aufgeführten Dezimalwerte brauchen sie dann nur noch mit dem Dezimal-Hexadezimal-Umrechner umzurechnen.

Im letzten Beispiel habe ich mir einen Pfeil nach unten herausgesucht. Der Unicode-Dezimalwert ist 8595, umgerechnet gibt das den Hexadezimalwert 2193.

Nach oben

Word- und PDF-Dokumente kennzeichnen

Links, welche auf eine Datei mit der Endung .doc oder .pdf linken, können mit Icons als solche gekennzeichnet werden.

a[href$=".pdf"] {
    padding-left:20px;
    background: url(pdf.gif) no-repeat 0 50%;
}
a[href$=".doc"] {
    padding-left:20px;
    background: url(word.gif) no-repeat 0 50%;
}

Dazu gibt es passende Icons bei Stylegala

Nach oben

Links beim Ausdrucken anzeigen

Wenn man eine Seite ausdruckt, sieht man zwar die Links, man weiss aber nicht wohin diese führen. Folgende Formatierungen im Print-Stylesheet lösen dieses Problem:

/* INTERNE LINKS */
a[href^="/"]:after {
    content: " (http://www.seite.com" attr(href) ") ";
}
/* EXTERNE LINKS */
a[href^="http"]:after {
    content: " (" attr(href) ") ";
} Nach oben

Quellenangaben bei Zitaten und automatische Überschriften für Inhaltsboxen

Hier gibt es ein anschauliches Beispiel dazu.

Kommentare







10.09.2007 Löschen

Goliath

#content a[href^="http://"]:after,
#content a[href^="https://"]:after {
content: "\00A0\2B01";
}
...find ich vom Design her hübscher als das oben vorgeschlagene.
("\2B01" ist ein Pfeil nach schräg oben)

Von pberndt. Letzte Änderung am 22.08.2005