Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
:current CSS-Pseudoklasse
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 ein 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 darzustellen.
Das kann "aktuell" im Sinne der Zeit bedeuten: :current kann verwendet werden, um die derzeit angezeigten Untertitel oder Beschriftungen zu markieren (dargestellt mit WebVTT), die mit einem abspielenden Video verbunden sind.
Es kann sich auch auf das derzeit hervorgehobene Element in einer Serie beziehen. Zum Beispiel kann :current mit dem ::search-text Pseudoelement kombiniert werden, um bestimmte Stile für das aktuell fokussierte Suchergebnis aus der Textsuchfunktion "Im Dokument suchen" des Browsers bereitzustellen.
Zum Beispiel:
p::search-text {
color: white;
background-color: purple;
}
p::search-text:current {
background-color: crimson;
}
Beispiele
Benutzerdefinierte Stile für Textsuchergebnisse
Dieses Beispiel zeigt, wie ::search-text und :current verwendet werden, um benutzerdefinierte Stile für die Suchergebnisse "Im Dokument suchen" Ihres Browsers zu erstellen.
HTML
Das HTML besteht aus einem einfachen Textabsatz. Wir zeigen den HTML-Quellcode nicht an, sowohl aus Gründen der Kürze als auch damit es einfacher ist, die Suchergebnisse im gerenderten Beispiel zu navigieren.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus est
eget eros congue pellentesque. Etiam a augue accumsan, scelerisque nisl sit
amet, lobortis nulla. Aliquam condimentum eu orci eu elementum. Donec
porttitor quam et posuere commodo. Mauris rhoncus diam a scelerisque molestie.
Integer sollicitudin risus dui, ut sagittis lorem laoreet eget. Duis eget
pretium enim. Morbi tristique, diam sit amet gravida finibus, metus ex
tincidunt nibh, ac volutpat urna purus et arcu. Donec risus risus, semper vel
purus sit amet, gravida vestibulum est. Sed et tristique urna. Nam vel mi eget
nisi consectetur elementum. Aenean faucibus aliquam cursus. Morbi posuere
tincidunt velit, et sagittis quam sagittis in. Nam eget ante ultrices, auctor
dui vel, euismod lacus. Vivamus tincidunt, sem ac sodales aliquet, tortor
tortor consequat diam, nec tempor mi dui vel eros. Aliquam ac erat et metus
egestas scelerisque.
</p>
CSS
In unserem CSS beginnen wir mit der Gestaltung des ::search-text-Pseudoelements. Wir geben ihm benutzerdefinierte background-color, color und text-shadow Stile.
html {
font-family: "Helvetica", "Arial";
}
p {
font-size: 1.5rem;
line-height: 1.5;
width: 90%;
margin: 0 auto;
}
@layer no-support {
body::before {
background-color: wheat;
display: block;
text-align: center;
padding: 1em 0;
}
@supports not selector(::search-text) {
body::before {
content: "Your browser doesn't support the ::search-text pseudo-element.";
}
}
@supports not selector(:current) {
body::before {
content: "Your browser doesn't support the :current pseudo-class.";
}
}
}
::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 anderen 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 Suchfunktion des Browsers zu verwenden, um ein Wort zu finden, das mehrmals im Beispieltext vorkommt, wie "aliquam", "amet" oder "tortor". Bewegen Sie sich zwischen den vorherigen und nächsten Ergebnissen, um die :current-Stilierung zu überprüfen.
Stil für derzeit angezeigte WebVTT-Untertitel
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
Spezifikationen
Diese Funktion scheint in keiner Spezifikation definiert zu sein.Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.