CSS-Stile für interne Sprungziele :target
CSS :target erlaubt individuelle Stile für Elemente, die als Anker oder internes Sprungziel durch einen Link mit Hash (#) erreicht wurden. Der Hash-Teil einer Adresse ist eine alte Technik, um ein Sprungziel innerhalb einer langen Seite ohne Scrollen zu erreichen.
:target – Seitenanker oder Hash-Link
Die Adresse oder URI (Universal Resource Identifier) einer Webseite besteht aus mehreren Elementen vom https:// ganz am Anfang bis hin zum #-Part für eine interne Sprungadresse. Der # (Hash)-Teil einer Adresse ist eine interne Adresse innerhalb einer Webseite, auch als »Anker« oder »Fragment-Identifikator« bezeichnet wird.
<protocol>//<host>[:<port>]/<pathname>[<hash>][<search>]
▲ ▲ ▲ ▲
│ │ │ │
https://www.mydomain.de/eineseite#morelinks
<a href="#morelinks">Viel viel weiter unten</a>
CSS mit :target
Früher war :target beliebt, weil es einen sichtbaren Sprung innerhalb einer Seite erlaubt. Das Sprungziel oder target kann auf einer anderen Seite oder der aktuellen Seite sitzen. Dabei setzt jeder Klick auf ein :target-Element das jeweilige Sprungziel auf den Anfang der Seite. Diese Verhalten erweckt den Anschein, dass eine eigenständige Seite vorliegt.
<a href="transitions.html#img-flip">img flip mit Bildwechsel</a> <a href="transitions.html#img-overlay">Bild über Text</a> <a href="#morelinks">Links zu ähnlichen Themen</a>
:target weist dem Element CSS-Stile zu, die nur angewendet werden, wenn die URI mit dem Hash – # – Zusatz aufgerufen wurde.
<style>
section#img-flip:target h2,
section#img-overlay:target h2 {
background: silver;color:white;padding-left:8px
}
</style>
Jede #id wird jetzt als Adresse wahrgenommen. target-hash.html, target-hash.html#img-flip und target-hash.html#img-overlay sind jetzt aus Sicht der Suchmaschinen drei Seiten mit gleichem Inhalt – duplicated Content. Darum werden heute Hashes mit :target vermieden, denn sie können Einfluß auf das SEO, Deep-Linking und Bookmarks haben.
:target für CSS-Transition
Typische Einsatzbereiche von :target waren Taps, Akkordeon und modale Fenster ohne Javascript.
Cheesecake cake marshmallow ice cream.
Danish cake dragée sesame snaps chocolate. Cotton candy powder sweet tiramisu marzipan cake cake croissant pie.
Chocolate cake halvah croissant topping apple pie candy sweet carrot cake.
Das HTML-Markup nutz einen Link mit href="#mylink", der Inhalt des Akkordeons wird durch eine gleichnamige ID identifiziert.
<div class="accordion">
<header><a href="#sesame">Sesame snaps croissant</a></header>
<div class="board" id="sesame">
<p>Cheesecake cake marshmallow …</p>
</div>
<header><a href="#cotton"> Cotton candy powder </a></header>
<div class="board" id="cotton">
<p>Danish cake dragée sesame snaps …</p>
</div>
…
</div>
height: 0 und max-height:0 verbergen ein zusammengeklapptes Element des Akkordeons. Wenn ein Akkordeon-Link geklickt wird, um ein Board zu öffnen, wird height auf auto und max-height auf eine übergroße Höhe gesetzt. So wird das Board weich durch eine CSS-Transition geöffnet, denn eine Transition von height: 0 auf height auto würde nicht funktionieren.
.accordion .board {
padding: 0;
margin: 0;
height: 0;
max-height: 0px;
overflow: hidden;
transition: max-height 1s ease-out;
}
.accordion .board:target {
height: auto;
max-height: 800px;
}
Quelle: Better CSS-only tabs, with :target
Das Akkordeon sprint mit jedem Klick an den Seitenanfang – das ist nunmal das vorgesehene Verhalten von :target. :target als Initiator von CSS Transitionen verfälscht den Sinn von internen Links. Mehr dazu bei Stackoverflow: How to prevent a click on a '#' link from jumping to top of page?.
Besser und natürlicher als :target agieren input type=checkbox und input type=radio: Das ist der Checkbox-Hack: CSS Tabs ohne Javascript und CSS Accordion ohne Javascript.
