::search-text

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

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

Beschreibung

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 der Hervorhebungs-Pseudoelemente, ermöglicht es Ihnen, einen begrenzten 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 Beispiel section::search-text.

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

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 Abschnitt Highlight-Pseudoelement-Vererbung.

Erlaubte Eigenschaften

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

• color
• background-color
• Die text-decoration Kurzschrift und zugehörige Langhandschriften:
  • text-decoration-line: nur die Werte grammar-error, spelling-error, line-through, none und underline.
  • 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 das Kontrastverhä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 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(: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.";
    }
  }
}

::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 andere background-color und einige text-decoration Stile zuweisen, sodass es von den restlichen Ergebnissen unterscheidbar ist.

::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.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :current
• Hervorhebungs-Pseudoelemente
• CSS-Pseudoelemente Modul