CSSFontFeatureValuesMap.[Symbol.iterator]() — Methode · JavaScript-Referenz

Signatur

CSSFontFeatureValuesMap.prototype[Symbol.iterator]()

Beschreibung

Die Methode [Symbol.iterator]() der Schnittstelle CSSFontFeatureValuesMap implementiert das iterable-Protokoll. Deshalb lässt sich eine solche Map direkt in allen Sprachkonstrukten verwenden, die ein Iterable erwarten, zum Beispiel for...of, im Spread-Operator ([...map]), mit Array.from() oder beim Destrukturieren.

Eine CSSFontFeatureValuesMap bekommst du über die Eigenschaften einer CSSFontFeatureValuesRule (also einer @font-feature-values-Regel): annotation, ornaments, stylistic, swash, characterVariant und styleset. Jede dieser Maps ordnet selbst gewählten Namen (z. B. nice-style) eine Liste von Ganzzahl-Indizes zu, die die Schrift für das jeweilige OpenType-Feature verwendet.

Die Methode entspricht funktional CSSFontFeatureValuesMap.prototype.entries(). Sie liefert Paare der Form [schluessel, wert]. Dabei ist schluessel ein string und wert ein Array von Zahlen. Die Einträge kommen in der Reihenfolge, in der sie eingefügt wurden.

Nützlich ist das vor allem für Werkzeuge, die Stylesheets untersuchen: Debugger, Linter oder Editoren, die definierte Font-Feature-Aliasse auflisten oder zwischen Stylesheets übertragen wollen.

Rückgabewert

Typ

Iterator<[string, number[]]>

Beschreibung

Ein neues Map-Iterator-Objekt. Es liefert für jeden Eintrag ein Array [name, werte], identisch zu entries().

Beispiele

Stylesets einer @font-feature-values-Regel mit for...of auflisten

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values "Font One" {
    @styleset {
      nice-style: 12;
      fancy-style: 3 5;
    }
  }
`);

const rule = sheet.cssRules[0]; // CSSFontFeatureValuesRule

// Implizit wird rule.styleset[Symbol.iterator]() aufgerufen
for (const [name, values] of rule.styleset) {
  console.log(name, values);
}

nice-style [12] fancy-style [3, 5]

Iterator manuell verwenden

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @font-feature-values "Font One" {
    @swash { flowing: 1; }
  }
`);

const swash = sheet.cssRules[0].swash;
const it = swash[Symbol.iterator]();

console.log(it.next()); // erstes Paar
console.log(it.next()); // fertig

{ value: ['flowing', [1]], done: false } { value: undefined, done: true }

Alle Aliasse eines Dokuments in ein Objekt übertragen

const collectFeatureAliases = () => {
  const result = {};
  const kinds = ['annotation', 'ornaments', 'stylistic', 'swash', 'characterVariant', 'styleset'];

  for (const sheet of document.styleSheets) {
    let rules;
    try {
      rules = sheet.cssRules; // kann bei Cross-Origin-Sheets werfen
    } catch {
      continue;
    }
    for (const rule of rules) {
      if (!(rule instanceof CSSFontFeatureValuesRule)) continue;
      const entry = (result[rule.fontFamily] ??= {});
      for (const kind of kinds) {
        // Spread nutzt [Symbol.iterator]()
        const pairs = [...(rule[kind] ?? [])];
        if (pairs.length) entry[kind] = Object.fromEntries(pairs);
      }
    }
  }
  return result;
};

console.log(collectFeatureAliases());

{ '"Font One"': { styleset: { 'nice-style': [12] } } }

// Wichtig · Fallstricke

Browser-Kompatibilität: Die maplike-Schnittstelle CSSFontFeatureValuesMap und damit diese Methode gibt es sicher erst in Chromium-basierten Browsern ab Version 111. Andere Engines kennen zwar zum Teil CSSFontFeatureValuesRule, stellen die Maps aber nicht oder nur eingeschränkt bereit. Prüfe deshalb vorher mit typeof rule.styleset?.[Symbol.iterator] === 'function'.
Der Iterator ist live: Wenn du die Map während der Iteration mit set() oder delete() änderst, wirkt sich das auf die laufende Iteration aus. Wenn du ändern willst, erstelle vorher eine Kopie mit [...map].
Die Werte sind immer Arrays, auch wenn in CSS nur ein einziger Index steht, z. B. [12] und nicht 12.
cssRules von Stylesheets aus fremden Ursprüngen wirft wegen CORS einen SecurityError. Umschließe den Zugriff deshalb mit try...catch.

Siehe auch

Symbol.iterator for...of CSSFontFeatureValuesMap.entries() CSSFontFeatureValuesMap.clear() CSSFontFeatureValuesMap.delete()