Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5 & CSS3: So kombinierst du Data-Attribute und Pseudoklassen

    HTML5 & CSS3: So kombinierst du Data-Attribute und Pseudoklassen

Wir haben schon darüber berichtet, wie du mit CSS3-Pseudoelementen mit purem CSS verschiedenste Formen erzeugen kannst. Heute wollen wir dir zeigen, wie Pseudoelemente in Zusammenarbeit mit HTML5-Data-Attributen neue Wege für die Gestaltung von Webprojekten ermöglichen.

Unser Ziel wird es sein, ein Bild mit einer Überschrift und einer Beschreibung zu versehen. Das Markup hierfür besteht aus einem Bild in einem Anchor-Element, gespickt mit einer Reihe von HTML5-Data-Attributen.

<a class="caption"
href="http://de.wikipedia.org/wiki/Hummeln"
data-title="Hummel"
data-description="Die Hummeln (Bombus) sind eine zu den Bienen [...]">
<img src="hummel.jpg" alt="Foto einer Hummel">
</a>

Mit data-title und data-description legen wir den Titel des Bildes und die dazugehörige Beschreibung fest. Die Werte dieser Attribute werden wir in den Pseudoelementen :before und :after verwenden können.

Wir fangen mit einer statischen Positionierung der Überschrift und Beschreibung an. Um den Titel und die Beschreibung direkt neben das Bild legen zu können, stylen wir zunächst das Anchor-Element.

.caption {
display: inline-block;
position: relative;
margin: 10px;
max-width:50%;
}
.caption img {
display:block;
max-width:100%;
}

Wir sorgen dafür, dass der Anchor und das darin liegende Bild maximal 50 Prozent des Bildschirms einnehmen und bereiten das Layout so für ein responsives Webdesign vor. Den Anchor positionieren wir relativ – das ist wichtig, da wir später die Überschrift und Beschreibung absolut und so relativ zum Anchor und nicht zum Body positioniert werden.

Als nächstes holen wir uns die Überschrift und Beschriftung aus den Data-Attributen heraus. Hierfür weisen wir den Content-Attributen der Pseudo-Elemente das jeweilige HTML5-Data-Attribut zu.

.caption:before {
content: attr(data-title);
}
.caption:after {
content: attr(data-description);
}

Titel und Beschreibung sollten nun ausgegeben werden. Für unser Beispiel können wir das Styling des Elements nochmal verfeinern, um sie neben dem Bild zu positionieren.

.caption::before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
}
.caption:before {
content: attr(data-title);
top: 0;
height:20%;
font-size: 40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.caption:after {
content: attr(data-description);
top: 20%;
padding: 20px 10px 0px 0px;
font-size: 18px;
}

So sollte dann das Endergebnis aussehen:

Endergebnis aus Kombination von CSS3 und HTML5.
Endergebnis aus Kombination von CSS3 und HTML5.

CSS3-Pseudo-Elemente animieren

Einige Browser, wie beispielsweise Google Chrome in der aktuellen Version, unterstützen das Animieren von Pseudo-Elementen, sodass wir mit CSS-Transitions coole Effekte erzielen können.

.caption:hover::after,
.caption:hover::before{
opacity:1;
}
.caption:before,
.caption:after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
opacity:0;
transition: opacity 1000ms ease-out;
}

Hierfür ergänzten wir unser Stylesheet um einen Hover-Zustand für die Pseudoelemente der Caption-Klasse und setzen die Opacity der Pseudoelemente im zuvor definierten Block auf 0. Außerdem ergänzen wir die Pseudoelemente um eine CSS-Transition für die opacity.

Als Ergebnis erhalten wir nur das Bild, das beim Mouse-Over um den Titel und die Beschriftung ergänzt wird.

Mit dieser Technik ergeben sich viele verschiedene Einsatzmöglichkeiten für die Entwicklung von Webseiten. Semantisches Markup sollte bei der Entwicklung dennoch immer bevorzugt werden. Trotzdem: Die Kombination aus HTML5-Data-Attributen und CSS3 ist ein zusätzlicher Weg, um interessante, interaktive Web-Projekte zu gestalten – und das ohne eine einzige Zeile JavaScript.

Weiterführende Links zum Thema „CSS3 und HTML5“

Finde einen Job, den du liebst

9 Reaktionen
Ilja Zaglov

Im letzten Teil weist der Artikel darauf hin, dass eine richtige Auszeichnung für wichtige Inhalte immer zu bevorzugen ist. In einem Einsatzszenario wie im Beispiel, mag die Technik aus SEO- und Barrierefreiheitsicht eher suboptimal sein. Für etwas, wie Tooltipps ist dieser Ansatz aber durchaus zu gebrauchen. Um herauszustellen, dass die Technik auch für spannendere Einsatzzwecke nutzbar ist, wurde dieses Beispiel gewählt. Soweit sehe ich kein Problem in den Einsatz dieser Technik – sofern man nicht übertreibt.

Antworten
michsch
michsch

Ich habe nichts gegen solche innovativen Techniken. Allerdings sollte hier eine fachmännische Bewertung solcher Techniken nicht fehlen, insbesondere auch hinsichtlich Barrierefreiheit.
Auch viele dieser HTML5-Showcases oder "Ich kann ein Logo in CSS3 bauen" sind ziemlich pointless, zeigen aber die Möglichkeiten gut auf.
Der letzte Satz dieses Artikels suggeriert aber eher, dass man eine solche Technik tatsächlich nutzen kann bzw. sollte. Dafür müsste euch euer interner Webkraut (David) auf den Tisch springen. ;-)
Also: für mehr Qualität im Web!

Antworten
marc.tissler
marc.tissler

wird zeit das man Kommentare liken kann @mischsch ;)

Antworten
michsch
michsch

Wie sieht es bei diesem Beispiel denn mit der Barrierefreiheit aus? Soweit ich weiß ist diese hier eher nicht gegeben.
Nur weil etwas funktioniert heißt das nicht, dass man es auch machen sollte. Und wie Sven schon geschrieben hat gibt es dafür einen besseren Weg.

Antworten
Lars
Lars

Ist da im vierten Code-Teil streng genommen nicht ein Doppelpunkt zuviel?

.caption::before,
.caption:after {

Antworten
Sven Wolfermann

oh die Tags wurden gelöscht... ich wollte sagen
"Dafür gibt es in HTML5 figure und figcaption ... "

Antworten
Sven Wolfermann

Schlechtes Beispiel! Dafür gibt es in HTML5 und , das kann genauso gestaltet werden, ist semantisch korrekt und funktioniert (mit kleinen Hilfsmitteln) sogar in älteren Browsern.

Antworten
marc.tissler
marc.tissler

Schleiße ich mich an. Nette spielerei aber CSS ist mehr für layout als für content gebracht, hab die einführung des content attributes nie verstanden. Man sollte layout am besten strickt vom rest trennen. Zumal frage ich mich wo der vorteil liegt ein IMG mit einem data-* attribute auszuliefern als das direkt in ein entsprechendes div o.ä. zu schreiben. Das macht nur dynamisch und damit in verbindung mit JS wirklich sinn.

Antworten
angelmedia
angelmedia

Nette Spielerei, Thema SEO bei Bildern aber verfehlt.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen