CSSFontFeatureValuesMap.clear() — Methode · JavaScript-Referenz

Signatur

CSSFontFeatureValuesMap.prototype.clear()

Beschreibung

Die Methode clear() gehört zur Schnittstelle CSSFontFeatureValuesMap. Diese Schnittstelle verhält sich wie eine Map (sie ist maplike): Die Schlüssel sind die selbst vergebenen Namen (z. B. "fancy"), die Werte sind Arrays mit ganzzahligen Feature-Indizes (z. B. [1, 3]). clear() leert die Map vollständig.

Man erhält eine CSSFontFeatureValuesMap über die Eigenschaften einer CSSFontFeatureValuesRule, also einer @font-feature-values-Regel im CSSOM:

rule.annotation – Block @annotation
rule.ornaments – Block @ornaments
rule.stylistic – Block @stylistic
rule.swash – Block @swash
rule.characterVariant – Block @character-variant
rule.styleset – Block @styleset

Das ist nützlich, wenn man die alternativen Glyphen einer Schrift dynamisch neu festlegen will, etwa in einem Schrift-Editor oder einem Typografie-Konfigurator: erst mit clear() alle alten Namen entfernen, dann mit set() neue eintragen. Elemente, die in font-variant-alternates einen gelöschten Namen verwenden, fallen auf die normale Darstellung zurück.

Beispiele

Alle @styleset-Werte einer Regel entfernen

// CSS im Dokument:
// @font-feature-values "Font One" {
//   @styleset { nice-style: 12; fancy: 1 3; }
// }
const sheet = document.styleSheets[0];
const rule = [...sheet.cssRules].find(
  (r) => r instanceof CSSFontFeatureValuesRule
);

console.log(rule.styleset.size);
rule.styleset.clear();
console.log(rule.styleset.size);

2 0

Werte ersetzen: erst leeren, dann neu setzen

const style = document.createElement('style');
style.textContent = `
  @font-feature-values "Font One" {
    @swash { alt: 1; }
  }
  .headline { font-family: "Font One"; font-variant-alternates: swash(flourish); }
`;
document.head.append(style);

const rule = [...style.sheet.cssRules].find(
  (r) => r instanceof CSSFontFeatureValuesRule
);

const replaceSwash = (map, entries) => {
  map.clear();
  for (const [name, indices] of Object.entries(entries)) {
    map.set(name, indices);
  }
};

replaceSwash(rule.swash, { flourish: [2] });
console.log([...rule.swash.keys()]);

["flourish"]

Mit Feature-Erkennung alle Blöcke einer Regel leeren

const MAP_NAMES = ['annotation', 'ornaments', 'stylistic', 'swash', 'characterVariant', 'styleset'];

const resetFeatureValues = (rule) => {
  for (const name of MAP_NAMES) {
    const map = rule[name];
    if (map && typeof map.clear === 'function') {
      map.clear();
    }
  }
};

for (const sheet of document.styleSheets) {
  try {
    for (const rule of sheet.cssRules) {
      if (typeof CSSFontFeatureValuesRule !== 'undefined' &&
          rule instanceof CSSFontFeatureValuesRule) {
        resetFeatureValues(rule);
      }
    }
  } catch (err) {
    // Fremde Stylesheets ohne CORS sind nicht lesbar
    console.warn('Stylesheet übersprungen:', sheet.href);
  }
}

// Wichtig · Fallstricke

Browser-Kompatibilität: CSSFontFeatureValuesRule gibt es in allen modernen Browsern. Die Map-Eigenschaften (styleset, swash usw.) und damit clear() sind aber bisher vor allem in Chromium-Browsern (ab Version 111) umgesetzt. Prüfe vorher, ob es sie gibt, z. B. mit typeof rule.styleset?.clear === 'function'.

clear() leert nur einen Block (z. B. @styleset). Die übrigen Blöcke und die Regel selbst bleiben erhalten. Um die ganze Regel zu entfernen, verwende CSSStyleSheet.deleteRule().
Die Änderung wirkt sofort auf die Darstellung: Namen, die in font-variant-alternates noch verwendet werden, werden danach ignoriert.
Die Regeln von Stylesheets anderer Herkunft ohne CORS-Freigabe lassen sich nicht lesen. Der Zugriff auf cssRules wirft dann einen SecurityError.
Du änderst nur das CSSOM, nicht die CSS-Datei. Nach einem Neuladen der Seite gelten wieder die ursprünglichen Werte.

Siehe auch

Map.prototype.clear() CSSFontFeatureValuesMap.[Symbol.iterator]() CSSFontFeatureValuesMap.delete() CSSFontFeatureValuesMap.get() CSSFontFeatureValuesMap.has()