::search-text

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Der::search-textCSS Pseudoelement wendet Stile auf Suchergebnisse an, die durch die Textsuchfunktion "Suchen" oder "Auf Seite suchen" des Benutzeragenten identifiziert werden.

Probieren Sie es aus

p::search-text {  color: crimson;  background-color: wheat;}

<p>  Using your browser's "Find in page" functionality, find a word or phrase that  appears in this sentence, and note how, in supporting browsers, each result is  highlighted using the specified custom styles.</p>

Syntax

css

::search-text {  /* ... */}

Die meisten Browser bieten eine Art von Textsuche innerhalb der Seite, die normalerweise als "Suchen" oder "Auf Seite suchen" bezeichnet wird. Das::search-text-Pseudoelement, eines derHervorhebungs-Pseudoelemente, ermöglicht es Ihnen, einenbegrenzten Satz von Stilen auf die Textsuchergebnisse anzuwenden, die durch die Suchfunktion des Browsers hervorgehoben werden.

Nicht alle Browser und Browserversionen heben Suchergebnisse mit hervorgehobenen Texten hervor, die mit CSS gestaltet werden können. In solchen Fällen kann::search-text nicht implementiert oder einfach ignoriert werden.

Die Verwendung von::search-text als eigenem Selektor wird Browser-Suchergebnisseüberall auf einer Seite gestalten. Wenn Sie nur die Suchergebnisse in bestimmten Elementen gestalten möchten, können Sie::search-text mit anderen Selektoren kombinieren, zum Beispielsection::search-text.

Zusätzlich kann::search-text mit der:currentPseudoklasse kombiniert werden, um spezifische Stile für das momentan fokussierte Suchergebnis bereitzustellen, beispielsweise:

css

p::search-text {  color: white;  background-color: purple;}p::search-text:current {  background-color: crimson;}

Vererbungsmodell

Das::search-text-Pseudoelement folgt einem speziellen Vererbungsmodell, das allen Hervorhebungs-Pseudoelementen gemein ist, bei dem Stile von sowohl ihren Elternelementen als auch den Pseudoelementen ihrer Eltern geerbt werden. Für weitere Details, wie diese Vererbung funktioniert, siehe den AbschnittHighlight-Pseudoelement-Vererbung.

Erlaubte Eigenschaften

Ein begrenzter Satz von CSS-Eigenschaften kann mit::search-text verwendet werden:

color
background-color
Dietext-decoration Kurzschrift und zugehörige Langhandschriften:
- text-decoration-line: nur die Wertegrammar-error,spelling-error,line-through,none undunderline.
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration-skip-ink
text-underline-offset
text-shadow

Barrierefreiheit

Überschreiben Sie die Stile der Textsuchergebnisse nur sparsam, insbesondere wenn dies aus rein ästhetischen Gründen geschieht. Für Personen mit kognitiven Beeinträchtigungen oder die weniger technikaffin sind, können unerwartete Änderungen dieser Stile ihr Verständnis der Funktionalität beeinträchtigen.

Ein Hauptanwendungsfall von::search-text besteht darin, den Farbkontrast im Vergleich zur Standardbrowserdarstellung zu erhöhen. Bei der Anpassung von hervorgehobenem Text ist es wichtig sicherzustellen, dass dasKontrastverhältnis zwischen Vorder- und Hintergrundfarben groß genug ist, damit Benutzer den Inhalt des hervorgehobenen Textes wahrnehmen können.

Beispiele

Benutzerdefinierte Stile für Textsuchergebnisse

Dieses Beispiel zeigt, wie Sie::search-text und:current verwenden können, um benutzerdefinierte Stile für die "Auf Seite suchen"-Ergebnisse Ihres Browsers zu erstellen.

HTML

Der HTML-Code besteht aus einem einfachen Absatz von Text. Wir werden den HTML-Quellcode nicht zeigen, sowohl der Kürze halber 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 damit, das::search-text-Pseudoelement zu stilisieren. Wir geben ihm benutzerdefiniertebackground-color,color undtext-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(:current) {    body::before {      content: "Your browser doesn't support the :current pseudo-class.";    }  }  @supports not selector(::search-text) {    body::before {      content: "Your browser doesn't support the ::search-text pseudo-element.";    }  }}

css

::search-text {  background-color: purple;  color: white;  text-shadow: 1px 1px 1px black;}

Abschließend gestalten wir das aktuell fokussierte Suchergebnis über::search-text:current, indem wir ihm eine anderebackground-color und einigetext-decoration Stile zuweisen, sodass es von den restlichen Ergebnissen unterscheidbar ist.

css

::search-text:current {  background-color: crimson;  text-decoration-line: underline;  text-decoration-color: yellow;  text-decoration-thickness: 3px;}

Ergebnis

Das Beispiel wird wie folgt gerendert:

Versuchen Sie, die "Auf Seite suchen"-Schnittstelle 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 das:current-Styling zu überprüfen.