Veit Schiele Communications

Veit Schiele Communications

Eigene Data-Attribute und Pseudoklassen

Eigene Data-Attribute zusammen mit Pseudoklassen bieten vielfältige Möglichkeiten, z.B. für Bildbeschreibungen oder Formulare.
erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:14 © Veit Schiele Communications GmbH, 2013–2017

Dabei kann die HTML-Struktur z.B. folgendermaßen aussehen:

<a class="caption"
   href="https://veit-schiele.de/"
   data-title="Smiley"
   data-description="Logo of the Veit Schiele Communications GmbH">
       <img src="images/smiley.gif" alt="Illustration of human–machine interaction">
</a>

Beispiel 1: Bildbeschreibung neben dem Bild

Die Werte der beiden Data-Attribute title und description können nun verwendet werden um sie in den Pseudo-Elementen :before und :after anzuzeigen:

.caption {
    display: inline-block;
    position: relative;
    margin: 10px;
}

.caption img {
    display: block;
    max-width: 100%;
}

.caption::before,
.caption::after {
    position: absolute;
    left: 100%;
    width: 100%;
    margin: 0 0 0 10px;
    color: #c2cbd6;
}

.caption::before {
    content: attr(data-title);
    top: 0;
    height: 42px;
    padding: 5px 8px 13px 8px;
    font-size: 42px;
    border-bottom: 1px solid #c2cbd6;
}

.caption::after {
    content: attr(data-description);
    top: 42px;
    padding: 26px 8px 0 8px;
    font-size: 16px;
}

Beispiel 2: Bildbeschreibung bei hover

Im diesem Beispiel wird der Titel und die Beschreibung angezeigt, wenn sich die Maus über dem Bild befindet. Dieser Effekt wird mit opacity erreicht.

.caption::before,
.caption::after {
    opacity: 0;
    position: absolute;
    width: 100%;
    color: white;
    padding: 21px;
    transition: opacity 0.3s;
}

.caption::before {
    content: attr(data-title);
    top: 0;
    height: 42px;
    font-size: 42px;
    font-weight: bold;
}

.caption::after {
    content: attr(data-description);
    top: 60px;
    padding: 26px 8px 0 8px;
    height: 198px;
    font-size: 16px;
}
.caption:hover::before,
.caption:hover::after {
    background: #c2cbd6;
    opacity: 1;
}

Formulare

Für Formularfelder stehen etliche Pseudoklassen zur Verfügung, u.a. :valid, :invalid, :required, :in-range und viele andere.

Beim folgenden Beispiel wird ein grüner Rahmen um das Eingabefeld angezeigt wenn die Angaben gültig sind und die Eingabe beendet wurde:

input:not(:focus):valid {
    border: 1px solid green;
}

Soll jedoch nach dem Eingabefeld ein Häkchen gesetzt werden, kann nicht die folgende Anweisung verwendet werden:

input:not(:focus):valid::after {
    content: '✓';
}

Es können keine generierten Inhalte auf ersetzte Elemente angewendet werden. Stattdessen muss die HTML-Auszeichnung verändert werden:

<input type="email" required>
<span></span>

Dann kann die folgende CSS-Anweisung verwendet werden:

input:not(:focus):valid + span::after {
    content: '✓';
}