CSSFontFeatureValuesMap.size — Eigenschaft · JavaScript-Referenz

Signatur

get CSSFontFeatureValuesMap.prototype.size

Beschreibung

size ist eine nur lesbare Eigenschaft und liefert die Anzahl der Schlüssel-Wert-Paare in einer CSSFontFeatureValuesMap. Eine solche Map steht für einen einzelnen Feature-Block innerhalb einer @font-feature-values-Regel, also zum Beispiel @styleset, @swash, @annotation, @ornaments, @stylistic, @character-variant oder @historical-forms.

Man kommt über die passenden Eigenschaften einer CSSFontFeatureValuesRule an die Maps heran, etwa rule.styleset oder rule.swash. Jeder Eintrag ordnet einem selbst vergebenen Namen (z. B. fancy) ein Array mit ganzzahligen Feature-Indizes zu (z. B. [3, 5]).

Die Eigenschaft verhält sich genauso wie Map.prototype.size, denn CSSFontFeatureValuesMap ist ein maplike-Interface. Gezählt werden die Namen, nicht die einzelnen Zahlen in den Wert-Arrays. Praktisch ist size, wenn man schnell prüfen will, ob ein Block überhaupt Einträge hat, oder wenn man Stylesheets per Skript auswertet, zum Beispiel in Werkzeugen, die Schriften oder CSS prüfen.

Rückgabewert

Typ

number

Beschreibung

Nicht negative ganze Zahl: die Anzahl der Einträge in der Map. Bei einem leeren oder fehlenden Feature-Block ist sie 0.

Beispiele

Einträge eines @styleset-Blocks zählen

const style = document.createElement('style');
style.textContent = `
  @font-feature-values "Font One" {
    @styleset { nice-style: 12; fancy: 3 5; }
    @swash { flowing: 1; }
  }
`;
document.head.append(style);

const rule = style.sheet.cssRules[0]; // CSSFontFeatureValuesRule
console.log(rule.styleset.size);
console.log(rule.swash.size);
console.log(rule.ornaments.size); // Block nicht vorhanden

2 1 0

Alle Feature-Blöcke einer Regel auswerten

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

const summarize = (rule) =>
  blocks
    .filter((name) => rule[name]?.size > 0)
    .map((name) => `${name}: ${rule[name].size} Einträge`);

for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule instanceof CSSFontFeatureValuesRule) {
      console.log(rule.fontFamily, summarize(rule));
    }
  }
}

"Font One" ["swash: 1 Einträge", "styleset: 2 Einträge"]

size ändert sich, wenn Einträge hinzukommen oder entfernt werden

const rule = document.styleSheets[0].cssRules[0];
const map = rule.styleset;

console.log(map.size);      // 2
map.set('alt', [7]);
console.log(map.size);      // 3
map.delete('fancy');
console.log(map.size);      // 2

// Gezählt werden Namen, nicht die Zahlen in den Wert-Arrays
console.log([...map.entries()]);

2 3 2 [["nice-style", [12]], ["alt", [7]]]

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie map.size = 5 wird im nicht strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Die Größe ändert man nur über set(), delete() oder clear().
Es ist kein Methodenaufruf: Richtig ist map.size. map.size() löst einen TypeError aus.
Was gezählt wird: fancy: 3 5 zählt als ein Eintrag, nicht als zwei.
Browser-Unterstützung: Die CSSOM-Anbindung (CSSFontFeatureValuesRule mit Map-Eigenschaften) gibt es in Chromium-Browsern ab Version 111. Firefox und Safari unterstützen @font-feature-values zwar in CSS, aber nicht unbedingt die Map-Schnittstelle. Vor dem Zugriff am besten prüfen, z. B. mit typeof CSSFontFeatureValuesMap !== 'undefined' oder mit optionaler Verkettung (rule.styleset?.size).
Fremde Stylesheets: Stylesheets von anderen Ursprüngen ohne CORS-Freigabe lassen sich nicht auslesen. Schon der Zugriff auf cssRules löst dann einen SecurityError aus.

Siehe auch

CSSFontFeatureValuesRule.ornaments CSSFontFeatureValuesRule.stylistic CSSFontFeatureValuesRule.swash CSSFontFeatureValuesRule.styleset CSSFontFeatureValuesRule.annotation