CSSÂ 3: Die :target
-Pseudoklasse
Artikel vom 19. Januar 2006, exklusiv für Dr. Web. ISSN 1614-3124, #19. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).
Dieser Artikel ist stellenweise veraltet.
Die :target
-Pseudoklasse ist Bestandteil des derzeitigen Entwurfs von CSSÂ 3 und Teil einer ganzen Reihe neuer Selektoren. Dieser Artikel gibt wieder, was die Spezifikation bislang zu :target
schreibt und wie mögliche Einsatzszenarien aussehen.
Spezifikation
Ins Deutsche übersetzt erläutert der derzeitige Stand der Spezifikation :target
wie folgt:
Manche URIs beziehen sich auf eine Stelle innerhalb einer Ressource. Diese Art eines URI endet mit einem Nummernzeichen (#), gefolgt von einem Ankeridentifikator (der Fragmentidentifikator). URIs mit Fragmentidentifikatoren linken zu einem bestimmten Element innerhalb des Dokuments, das als Zielelement bekannt ist. Hier ist zum Beispiel ein URI, der in einem HTML-Dokument auf einen Anker namens
section_2
zeigt:https://example.com/html/top.html#section_2
Ein Zielelement kann durch die
:target
-Pseudoklasse repräsentiert werden. Wenn der URI des Dokuments keinen Fragmentidentifikator besitzt, hat das Dokument kein Zielelement.
Anwendungsfälle
Die folgenden Beispiele demonstrieren unterschiedliche Einsatzmöglichkeiten der :target
-Pseudoklasse. Auf einer Beispielseite können alle Fälle betrachtet werden, allerdings wird :target
derzeit nur von neueren Gecko- (wie Firefox 1.5) und WebKit-Browsern (wie Safari) unterstĂĽtzt.
Beispiel 1: Hervorheben
Der einfachste Fall fĂĽr die Verwendung von :target
besteht in einer simplen Umformatierung und Hervorhebung des Zielelements. Weniger technisch ausgedrückt: Nehmen wir an, wir versehen einige Absätze eines Dokuments mit IDs zur internen Referenzierung.
<p id="einleitung">Lorem ipsum …</p>
Damit können wir diese bei Aufruf entsprechend anders gestalten, zum Beispiel in roter Farbe:
p:target {
color: #f00;
}
Sind unsere Absätze normalerweise schwarz, so sorgt die :target
-Pseudoklasse bei Aufruf des Dokuments mit einem beliebigen Fragmentidentifikator, der einen Absatz betrifft, dafĂĽr, dass der jeweils betroffene Abschnitt rot koloriert wird. Siehe Beispielseite.
Beispiel 2: Ein- und Ausblenden
Etwas interessanter ist, bestimmte Seitenelemente erst anzuzeigen, wenn diese mit einem internen Anker aufgerufen werden. Nehmen wir hierfĂĽr ein Element mit der ID hinweis
:
<div id="hinweis">Dies ist ein Hinweis.</div>
Zuerst blenden wir dieses Element aus. Dazu genĂĽgt der Einsatz einer simplen Regel:
div#hinweis {
display: none;
}
Verweist jemand direkt auf das Zielelement #hinweis
, können wir den div
-Container ĂĽber :target
wieder einblenden. Bei der Gelegenheit gestalten wir ihn auch gleich etwas prominenter, indem wir ein em
Innenabstand injizieren:
div#hinweis:target {
display: block;
padding: 1em;
}
Das Ergebnis kann ebenfalls auf der Beispielseite betrachtet werden, jeweils mit und ohne Fragmentidentifikator #hinweis
.
Diese Einsatzart der :target
-Pseudoklasse birgt einige weitere interessante Spielarten. So könnte unser Hinweiselement auch noch einen Link auf dasselbe Dokument beinhalten – sofern nicht erneut mit dem Identifikator hinweis
versehen –, um den Text wieder auszublenden. Durch Klick auf einen solchen Link greift der Selektor div#hinweis:target
nicht mehr (die Beispielseite illustriert auch diesen Fall). Sieht dynamisch aus, ist aber »nur« CSS.
Beispiel 3: Umfassende Layoutänderung
:target
kann selbstverständlich noch »radikaler« eingesetzt werden, indem man den Fokus – also das Zielelement – entsprechend groß wählt und die Formatierung umfassender ändert. Der folgende Ansatz soll dies veranschaulichen. Wir schenken dem html
-Element eine ID:
<html id="alternative"></html>
… und gestalten das dazugehörige Dokument bei Aufruf mitsamt Fragmentidentifikator #alternative
um. Der Selektor muss die ID alternative
in diesem Fall nicht beinhalten, wichtig ist nur, dass dem html
-Element eine solche zugewiesen wurde und der Selektor natĂĽrlich :target
beinhaltet.
html:target {
color: #060;
font-size: 2em;
}
Das Ergebnis ist ein einfacher CSS-»Stylesheet-Switcher«, der unsere Beispielseite mit großer, grüner Schrift präsentiert.
Bitte beachten: Das letzte Beispiel geht mit IDs eigentlich nicht korrekt um, da das html
-Element die ID alternative
eigentlich nur erfordert, wenn wir :target
anwenden wollen. Obwohl es semantisch also nur zwischenzeitlich »alternativ« ist, wird es so permanent gekennzeichnet. Sowohl Beispiel 2 als auch 3 sind zudem erstmal als »Spielerei« zu betrachten und vor einem praktischen und großflächigen Einsatz vor allem auf die Zugänglichkeit zu prüfen. Elemente, die wie dargestellt über display: none;
aus- und einen die :target
-Pseudoklasse beinhaltenden Selektor wieder eingeblendet werden, sind in Bildschirmlesesoftware genauso vorhanden wie jetzt noch im Internet Explorer – gar nicht. Wenn dies nicht verantwortet werden kann, bleibt nur das Warten auf den reader
-Medientyp sowie den Internet Explorer 7. Sofern er :target
unterstĂĽtzt.
Ăśber mich
Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.
Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.
Wenn du mir einen Gefallen tun magst, interpretiere wohlwollend (ich spreche drei Sprachen, und die kommen sich manchmal in die Quere), aber hinterfrage meine Arbeit und teile Feedback, damit ich Inhalte verbessern kann. Danke!
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
Die Webentwicklung gut überblicken? Probier WebGlossary.info – und The Web Development Glossary 3K (2023). Mit Erklärungen und Definitionen zu tausenden Begriffen aus Webentwicklung, Webdesign und verwandten Feldern, aufbauend auf Wikipedia sowie MDN Web Docs. Erhältlich bei Apple Books, Kobo, Google Play Books und Leanpub.