Pseudoklasse :target in CSS-3

Donnerstag, 28 Februar 2008 22:33 MET

Thema:
Webgestaltung  
Stichworte:
 
 
Beispielseite
Pseudoklasse :target in CSS-3 [hyperkontext | Weblog]

In einigen Situationen kann :target schon jetzt sinnvoll eingesetzt werden, da Firefox und Safari diese CSS-Pseudoklasse seit geraumer Zeit unterstützen. Ich zeige hier auch eine Einsatzmöglichkeit im Beispiel.

Diese unscheinbare CSS-Anweisung kann Java-Script ersetzen, welches hinter den derzeit in Mode gekommenen Tab-Ansichten liegt. Das ist allerdings noch Zukunftsmusik.

:target bezieht sich auf den Ankerindikator

Sogenannte Ankerindikatoren im URI (Uniform Resource Identifier) beginnen am Ende der Adresse mit dem Zeichen #, gefolgt von einem Namen. Zum Beispiel http://example.com/index.htm#anker.

Existiert innerhalb der HTML (Hypertext Markup Language)-Seite ein Element, das als ID-Attribut diesen Namen beinhaltet (id="anker"), dann springt das Ausgabegerät direkt zu dieser Stelle. Genau hier setzt die CSS (Cascading Style Sheets)-Pseudoklasse :target ein.

Die (veraltete) Sprung-Möglichkeit zum Element a  mit dem Attribut name tut hier nichts zur Sache.

Pseudoklasse :target ist Bestandteil von CSS-3

Ich kann also auf den Zustand eines existierenden Ankers in der URI über CSS reagieren. Oder natürlich auch umgekehrt, dass ein bestimmter Ankerindikator nicht enthalten ist – in diesem Fall mit der zusätzlichen Pseudoklasse :not(:target).

Die Pseudoklasse :target ist Bestandteil von CSS 3. Da der Standard CSS 3 noch (lange) nicht verabschiedet ist, liegt der Schluss nahe, sich damit noch nicht zu beschäftigen, da Zukunftsmusik. Dem ist allerdings nicht ganz so.

Firefox seit Version 1 und Safari seit Version 1.3 verstehen die Pseudoklassen :target (Safari mit einem kleinen Bug) und :not, also doch schon seit geraumer Zeit.

Es ist daher durchaus möglich, die sich damit eröffnenden Möglichkeiten bereits heute zu nutzen. Solange keine Darstellungsfehler in Ausgabegeräten entstehen, die diese vorgesehenen Anweisungen für CSS 3 noch nicht verstehen. Ganz nach dem Motto: Verstehst du es lieber Browser ist es gut, ansonsten dir vom Inhalt trotzdem nichts vorenthalten wird.

Bereits im Jahr 2003 haben sich nach den ersten Arbeitsentwürfen zu CSS 3 einige Leute Gedanken zu dieser Pseudoklasse gemacht. Gefundene Referenzen und Beispiele finden Sie in den Verweisen und gesammelt am Ende dieses Beitrages.

Stay on :target

Vor längerer Zeit unter Zukunftsmusik gedanklich abgelegt, rief mir ein Beitrag von Brian Suda auf thinkvitamin.com die doch mächtigen Möglichkeiten dieser (sogenannten) Pseudoklasse einprägsam in Erinnerung: Stay on :target.

Recht hat er. Diese unscheinbare CSS-Anweisung kann Java-Script ersetzen, welches hinter den derzeit in Mode gekommenen Tab-Ansichten liegt. Es werden also Bestandteile einer Seite ausgeblendet und mit einer Reiter-Navigation zugänglich gemacht. Der Inhalt erscheint dann sofort nach Klick auf einen dieser Reiter, ohne die Seite neu laden zu müssen.

Diese Art der Anwendung ist allerdings erst dann auf breiter Basis einsetzbar, wenn auch alle gängigen Browser diese CSS-Anweisung unterstützen.

Derzeitige Einsatzmöglichkeiten

In einigen Situationen kann :target schon jetzt sinnvoll eingesetzt werden. Damit kann Benutzern Mehrwert geboten werden, welche Ausgaberäte benützen, die diese Pseudoklasse unterstützen.

Optisch die Benutzbarkeit verbessern

Diese Art ist die am häufigsten gezeigte Möglicheit, :target schon jetzt einzusetzen. Die Browser die es verstehen zeigen zusätzlich etwas an, auf die anderen hat es keinen Einfluss. Hier ein paar Verweise zu gesammelten Beispielen:

Ein- und Ausblenden

Durch den zusätzlichen Einsatz der Pseudoklasse :not ist es möglich per Default Teile einer Seite ausgeblendet zu lassen und erst mit Ankerindikator einzublenden, während Ausgaberäte die das nicht verstehen gleich alles anzeigen. Daraus ergibt sich die Möglichkeit auch weitergehende Optionen dieser CSS-Anweisung auch heute schon einzusetzen.

Mein Beispiel

Ein typischer Anwendungsfall wäre eine Liste von häufig gestellten Fragen, bekannt auch unter FAQ (Frequently Asked Questions). Oft bestehen solche Frage/Antwort-Seiten aus einer geordneten Liste mit den Fragen, die per Ankerindikator (Sprungmarker) dann in den unteren Teil der Seite zur entsprechenden Erklärung verweisen.

Analog zu diversen Java-Script-Lösungen könnten wir nun eine geordnete Liste mit den Fragen erstellen und im selben Listenpunkt gleich darunter die Antwort setzen, die nur dann angezeigt wird, wenn die Sprungmarke im URI gesetzt ist.

Wie gewohnt, kann auch ein Link von einer anderen Seite mit Ankerindikator direkt zu gewünschter Frage springen. Browser die :target nicht unterstützen sehen die gesamte Liste gleich mit den Antworten.

Die CSS-Anweisungen hierzu finden sich im Quellcode der folgenden Beispielseite:

Anmerkungen zu dieser Lösung
  • Vor sehr alten Ausgaberäten müssen diese CSS-Anweisungen versteckt werden. Der IE5 (und Versionen darunter) rastet bei :not(:target) völlig aus und zeigt ganze Teile der Seite überhaupt nicht mehr an. Das gilt wahrscheinlich (nicht getestet) auch für alte Netscape-Versionen.
  • Beim Ausdruck so einer Seite zeigt Firefox zum Beispiel immer nur die Fragen, Safari hingegen berücksichtigt auch beim Druck den Ankerindikator. Es braucht daher ein Stylesheet für den Druck, das entweder in der Einlade-Reihenfolge vor dem Screen-Stylesheet kommt und :target nicht berücksichtigt oder nachträglich alle :target und :not auf sichtbar setzt.

Sehr lange FAQ-Listen können durchaus wie bisher mit einer reinen Frageliste beginnen, die allerdings per Default für Browser die :target verstehen ausgeblendet wird und für die anderen Ausgabegeräte sichtbar bleibt. Hierzu brauchen wir dieser Liste per CSS nur folgende Anweisung verpassen: ol:not(:target) {display: none; visibility: hidden}. Dieses Detail ist in meiner Beispielseite auch berücksichtigt.

Abschnitt 1 von 1

Quellenverzeichnis

  1. The target pseudo-class :target [w3.org]
  2. :target – SitePoint CSS Reference
  3. The negation pseudo-class [w3.org]
  4. :not – SitePoint CSS Reference
  5. Pseudoklassen – Einführung in XHTML, CSS und Webdesign [jendryschik.de]

Gesammelte Verweise zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 28. Februar 2008 auf Relevanz geprüft.

Datum:
veröffentlicht am 28 Februar 2008, 22:33 MET.
Artikel:
Pseudoklasse :target in CSS-3 [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/119
Thema:
Webgestaltung 
Stichworte:
 

Interne Bezugnahme von neueren Artikeln

  1. CSS :target – Tab-Navigation aus Sprunglinks in Überschriften vom 24. März 2010
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Februar 2008 im Kontext
älterer Artikel »
Journalisten, Zeitungen und Web 2.0