:current
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Der :current CSS Pseudoklassen Selektor repräsentiert ein Element oder den Vorfahren eines Elements, das derzeit angezeigt oder hervorgehoben wird.
Syntax
:current {
/* ... */
}
:current(<compound-selector-list>) {
/* ... */
}
Beschreibung
Die :current Pseudoklasse wird verwendet, um das "derzeit angezeigte" Element aus einer Reihe von Elementen zu repräsentieren.
Dies kann "aktuell" im zeitlichen Sinne bedeuten: :current kann verwendet werden, um die derzeit angezeigten Untertitel oder Bildunterschriften (dargestellt mittels WebVTT), die mit einem abspielenden Video verbunden sind, zu definieren.
Es kann sich auch auf das gerade hervorgehobene Element in einer Reihe beziehen. Zum Beispiel kann :current mit dem ::search-text Pseudo-Element kombiniert werden, um den derzeit fokussierten Suchergebnistext aus der "In Seite suchen"-Funktion des Browsers speziell zu gestalten.
Zum Beispiel:
p::search-text {
color: white;
background-color: purple;
}
p::search-text:current {
background-color: crimson;
}
Beispiele
Benutzerdefinierte Stile für Suchergebnisse im Text
Dieses Beispiel zeigt, wie ::search-text und :current verwendet werden, um benutzerdefinierte Stile für die "In Seite suchen"-Suchergebnisse Ihres Browsers zu erstellen.
HTML
Das HTML besteht aus einem einfachen Absatz von Text. Wir werden den HTML-Quellcode nicht zeigen, sowohl der Kürze halber, als auch damit es leichter ist, durch die Suchergebnisse im gerenderten Beispiel zu navigieren.
CSS
In unserem CSS beginnen wir mit der Gestaltung des ::search-text Pseudo-Elements. Wir geben ihm benutzerdefinierte background-color, color und text-shadow Stile.
::search-text {
background-color: purple;
color: white;
text-shadow: 1px 1px 1px black;
}
Schließlich gestalten wir das derzeit fokussierte Suchergebnis über ::search-text:current, indem wir ihm eine andere background-color und einige text-decoration Stile geben, sodass es sich von den restlichen Ergebnissen unterscheidet.
::search-text:current {
background-color: crimson;
text-decoration-line: underline;
text-decoration-color: yellow;
text-decoration-thickness: 3px;
}
Ergebnis
Das Beispiel rendert wie folgt:
Versuchen Sie, die "In Seite suchen"-Schnittstelle des Browsers zu verwenden, um ein Wort zu finden, das im Beispieltext mehrfach vorkommt, z. B. "aliquam", "amet" oder "tortor". Wechseln Sie zwischen vorherigen und nächsten Ergebnissen, um die :current Stilistik zu überprüfen.
Gestaltung von derzeit angezeigten WebVTT Untertiteln
CSS
:current(p, span) {
background-color: yellow;
}
HTML
<video controls preload="metadata">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<track
label="English"
kind="subtitles"
srclang="en"
src="subtitles.vtt"
default />
</video>
WebVTT
WEBVTT FILE 1 00:00:03.500 --> 00:00:05.000 This is the first caption 2 00:00:06.000 --> 00:00:09.000 This is the second caption 3 00:00:11.000 --> 00:00:19.000 This is the third caption