CSSFontFeatureValuesMap.delete() — Methode · JavaScript-Referenz

Signatur

CSSFontFeatureValuesMap.prototype.delete(key)

Beschreibung

delete() gehört zur Schnittstelle CSSFontFeatureValuesMap. Diese verhält sich wie eine Map und steht für einen Block innerhalb einer @font-feature-values-Regel, also @styleset, @swash, @ornaments, @annotation, @stylistic oder @character-variant. Die Schlüssel sind selbst gewählte Namen wie nice-style. Die Werte sind Listen von Ganzzahlen, nämlich die Feature-Indizes der Schrift.

An die Maps kommst du über die gleichnamigen Eigenschaften eines CSSFontFeatureValuesRule-Objekts, etwa rule.styleset, rule.swash oder rule.characterVariant. Mit delete() entfernst du einen benannten Eintrag zur Laufzeit. Danach verweist z. B. font-variant-alternates: styleset(nice-style) auf nichts mehr. Der Browser ignoriert diesen Verweis dann und zeichnet den Text ohne diese OpenType-Alternativen.

Die Methode arbeitet wie Map.prototype.delete(): Sie gibt true zurück, wenn der Schlüssel vorhanden war und entfernt wurde, sonst false. Die Änderung wirkt direkt auf das CSSOM, also auf das Stylesheet, das der Browser gerade verwendet. Die Quelldatei auf dem Server bleibt unverändert. Nach einem Neuladen der Seite ist der Eintrag also wieder da.

Typische Einsatzfälle sind Schrift-Editoren, Typografie-Spielwiesen oder Einstellungen, in denen Nutzer dekorative Alternativen (Swashes, Ornamente) gezielt abschalten.

Parameter

Name	Typ	Default	Beschreibung
$key Pflicht	string		Name des Feature-Werts, der entfernt werden soll, z. B. `"nice-style"`. Muss exakt so geschrieben sein wie in der Regel definiert. Andere Typen werden in einen String umgewandelt.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn ein Eintrag mit diesem Namen vorhanden war und entfernt wurde, sonst false.

Beispiele

Styleset-Eintrag aus einer @font-feature-values-Regel entfernen

// CSS im Dokument:
// @font-feature-values Font One {
//   @styleset { nice-style: 12; fancy: 3 5; }
// }
// h1 { font-family: 'Font One'; font-variant-alternates: styleset(nice-style); }

const findFeatureRule = (family) => {
  for (const sheet of document.styleSheets) {
    let rules;
    try {
      rules = sheet.cssRules;
    } catch {
      continue; // Fremd-Stylesheet ohne CORS – nicht lesbar
    }
    for (const rule of rules) {
      if (rule instanceof CSSFontFeatureValuesRule && rule.fontFamily.includes(family)) {
        return rule;
      }
    }
  }
  return null;
};

const rule = findFeatureRule('Font One');
if (rule) {
  console.log(rule.styleset.has('nice-style'));
  console.log(rule.styleset.delete('nice-style'));
  console.log(rule.styleset.has('nice-style'));
  console.log(rule.styleset.size);
}

true true false 1

Rückgabewert bei nicht vorhandenem Schlüssel

const rule = [...document.styleSheets[0].cssRules]
  .find((r) => r instanceof CSSFontFeatureValuesRule);

// Ein zweites Löschen desselben Namens liefert false
console.log(rule.swash.delete('flowing'));
console.log(rule.swash.delete('flowing'));
console.log(rule.swash.delete('gibt-es-nicht'));

true false false

Dekorative Alternativen per Schalter entfernen und wiederherstellen

const rule = [...document.styleSheets[0].cssRules]
  .find((r) => r instanceof CSSFontFeatureValuesRule);

// Originalwert vor dem Löschen sichern
const backup = rule.ornaments.get('fleurons'); // z. B. [1]

const toggle = document.querySelector('#ornamente');
toggle.addEventListener('change', () => {
  if (toggle.checked) {
    rule.ornaments.set('fleurons', backup);
  } else {
    const removed = rule.ornaments.delete('fleurons');
    console.log(`Ornamente entfernt: ${removed}`);
  }
});

Ornamente entfernt: true

Alle Einträge eines Blocks gezielt leeren

const rule = [...document.styleSheets[0].cssRules]
  .find((r) => r instanceof CSSFontFeatureValuesRule);

// Nur Namen mit Präfix "test-" entfernen
for (const name of [...rule.stylistic.keys()]) {
  if (name.startsWith('test-')) rule.stylistic.delete(name);
}

console.log([...rule.stylistic.keys()]);

["alt-g"]

// Wichtig · Fallstricke

Browser-Kompatibilität: Die map-artigen Eigenschaften (styleset, swash usw.) mit CSSFontFeatureValuesMap gibt es verlässlich in Chromium-Browsern ab Version 111. Andere Engines unterstützen zum Teil nur die Regel selbst oder valueText. Prüfe vorher mit 'CSSFontFeatureValuesMap' in window bzw. typeof rule.styleset?.delete === 'function'.
Nur Laufzeit: Die Änderung betrifft nur das CSSOM der aktuellen Seite. Wenn du den Eintrag später wiederherstellen willst, sichere den Wert vorher mit get().
Kein Fehler bei ungültigen Verweisen: Deklarationen wie styleset(nice-style) bleiben nach dem Löschen im Stylesheet stehen. Sie haben dann einfach keine Wirkung mehr. Einen Fehler oder ein Event gibt es nicht.
Schreibweise: Schlüssel werden exakt verglichen. Achte deshalb auf die genaue Schreibweise des Namens.
Beim Iterieren löschen: Kopiere die Schlüssel zuerst, z. B. mit [...map.keys()], und lösche erst dann. So vermeidest du Überraschungen, während die Map durchlaufen wird.
Fremde Stylesheets: Bei Stylesheets von anderen Ursprüngen ohne CORS-Freigabe wirft der Zugriff auf cssRules einen SecurityError. Fange ihn mit try/catch ab.
@font-feature-values gilt nur für Schriften, die die entsprechenden OpenType-Features auch tatsächlich enthalten. Ohne passende Schrift ist kein Unterschied sichtbar.

Siehe auch

Map.prototype.delete() CSSFontFeatureValuesMap.clear() CSSFontFeatureValuesMap.get() CSSFontFeatureValuesMap.set() CSSFontFeatureValuesMap.keys()