::highlight()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das ::highlight()
CSS-Pseudoelement wendet Stile auf ein benutzerdefiniertes Highlight an.
Ein benutzerdefiniertes Highlight ist eine Sammlung von Range
-Objekten und wird auf einer Webseite mit dem HighlightRegistry
registriert.
Zulässige Eigenschaften
Nur bestimmte CSS-Eigenschaften können mit ::highlight()
verwendet werden:
color
background-color
text-decoration
und die zugehörigen Eigenschaftentext-shadow
-webkit-text-stroke-color
,-webkit-text-fill-color
und-webkit-text-stroke-width
Insbesondere wird background-image
ignoriert.
Syntax
css
::highlight(custom-highlight-name)
Beispiele
Hervorheben von Zeichen
HTML
html
<p id="rainbow-text">CSS Custom Highlight API rainbow</p>
CSS
css
#rainbow-text {
font-family: monospace;
font-size: 1.5rem;
}
::highlight(rainbow-color-1) {
color: #ad26ad;
text-decoration: underline;
}
::highlight(rainbow-color-2) {
color: #5d0a99;
text-decoration: underline;
}
::highlight(rainbow-color-3) {
color: #0000ff;
text-decoration: underline;
}
::highlight(rainbow-color-4) {
color: #07c607;
text-decoration: underline;
}
::highlight(rainbow-color-5) {
color: #b3b308;
text-decoration: underline;
}
::highlight(rainbow-color-6) {
color: #ffa500;
text-decoration: underline;
}
::highlight(rainbow-color-7) {
color: #ff0000;
text-decoration: underline;
}
JavaScript
js
const textNode = document.getElementById("rainbow-text").firstChild;
if (!CSS.highlights) {
textNode.textContent =
"The CSS Custom Highlight API is not supported in this browser!";
}
// Create and register highlights for each color in the rainbow.
const highlights = [];
for (let i = 0; i < 7; i++) {
// Create a new highlight for this color.
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
// Register this highlight under a custom name.
CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}
// Iterate over the text, character by character.
for (let i = 0; i < textNode.textContent.length; i++) {
// Create a new range just for this character.
const range = new Range();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
// Add the range to the next available highlight,
// looping back to the first one once we've reached the 7th.
highlights[i % 7].add(range);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |
Browser-Kompatibilität
BCD tables only load in the browser