Signatur
Beschreibung
Die Eigenschaft priority gehört zum Interface Highlight der CSS Custom Highlight API. Sie kann gelesen und geschrieben werden und enthält eine Ganzzahl (Standardwert 0). Sie bestimmt die Reihenfolge, in der der Browser überlappende Hervorhebungen zeichnet. Dabei gilt: Ein Highlight mit höherer Priorität wird über einem mit niedrigerer Priorität gezeichnet.
Relevant wird das, wenn mehrere Highlights, zum Beispiel ein Suchtreffer und eine Rechtschreibmarkierung, dieselben Zeichen abdecken und ihre ::highlight()-Regeln dieselbe CSS-Eigenschaft setzen, etwa background-color oder color. Bei solchen Konflikten gewinnt das Highlight mit der höheren Priorität. Setzen die Highlights unterschiedliche Eigenschaften (das eine color, das andere text-decoration), werden beide Stile gleichzeitig angewendet.
Haben zwei Highlights die gleiche Priorität, entscheidet die Reihenfolge der Registrierung in CSS.highlights: Das zuletzt registrierte Highlight liegt oben. Mit priority legst du die Reihenfolge also ausdrücklich fest und bist nicht mehr davon abhängig, in welcher Reihenfolge dein Code die Highlights registriert.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 0 | Neue Priorität beim Schreiben. Der Wert wird in eine 32-Bit-Ganzzahl (WebIDL long) umgewandelt. Nachkommastellen werden abgeschnitten, aus NaN wird 0. Auch negative Werte sind erlaubt. |
Rückgabewert
0.Beispiele
Suchtreffer über Rechtschreibmarkierung legen
// CSS:
// ::highlight(rechtschreibung) { background-color: #fdd; }
// ::highlight(suche) { background-color: yellow; }
const textNode = document.querySelector('p').firstChild;
const range1 = new Range();
range1.setStart(textNode, 0);
range1.setEnd(textNode, 10);
const range2 = new Range();
range2.setStart(textNode, 5);
range2.setEnd(textNode, 15);
const suche = new Highlight(range1);
const rechtschreibung = new Highlight(range2);
// Suche soll im überlappenden Bereich (Zeichen 5–10) gewinnen
suche.priority = 1;
rechtschreibung.priority = 0;
// Die Registrierungsreihenfolge spielt jetzt keine Rolle mehr
CSS.highlights.set('suche', suche);
CSS.highlights.set('rechtschreibung', rechtschreibung);
console.log(suche.priority, rechtschreibung.priority);Standardwert und Umwandlung in eine Ganzzahl
const hl = new Highlight();
console.log(hl.priority);
hl.priority = 2.9;
console.log(hl.priority);
hl.priority = -3;
console.log(hl.priority);
hl.priority = 'abc'; // wird zu NaN, also 0
console.log(hl.priority);Aktive Markierung per Klick nach vorne holen
const ebenen = ['kommentar', 'suche', 'fehler'];
const nachVorne = (name) => {
ebenen.forEach((n, i) => {
const hl = CSS.highlights.get(n);
if (hl) hl.priority = n === name ? 100 : i;
});
};
document.querySelector('#btn-kommentare')
.addEventListener('click', () => nachVorne('kommentar'));
// Die Darstellung wird ohne neue Registrierung automatisch aktualisiert// Wichtig · Fallstricke
- Nur bei gleichen CSS-Eigenschaften relevant: Die Priorität entscheidet nur, wenn überlappende Highlights dieselbe CSS-Eigenschaft setzen. Setzen sie unterschiedliche Eigenschaften, werden die Stile kombiniert.
- Gleiche Priorität: Dann gewinnt das zuletzt in
CSS.highlightsregistriertes Highlight. Wenn du Highlights neu registrierst (delete+set), kann sich die Darstellung dadurch unerwartet ändern. Vergib deshalb ausdrückliche Prioritäten. - Keine Auswirkung auf native Hervorhebungen: Die Priorität gilt nur zwischen eigenen Highlights. Wie sie zu
::selection,::spelling-errorund Co. stehen, regelt die Kaskade der Pseudoelemente. - Browser-Unterstützung: Chrome und Edge ab 105, Safari ab 17.2, Firefox ab 140. Prüfe die Unterstützung mit
if ('highlights' in CSS), bevor du die API verwendest. - Nur wenige CSS-Eigenschaften sind in
::highlight()erlaubt (u. a.color,background-color,text-decoration,text-shadow). Andere werden ignoriert, egal welche Priorität gesetzt ist.