CSSFontPaletteValuesRule: свойство overrideColors

Базовая версия 2022

Новое свойство

С ноября 2022 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Только для чтения overrideColors свойство интерфейса CSSFontPaletteValuesRule — это строка, содержащая список индексов и пар цветов, которые необходимо использовать вместо исходных. Он задаётся в том же формате, что и соответствующий описатель override-colors.

Значение

Строка, содержащая список пар индекс цвета и цвет, разделённых запятыми.

Примеры

Чтение переопределенного цвета

В этом примере сначала определены несколько правил @, среди которых два @font-palette-values. Поскольку эти правила находятся в последнем добавленном в документ стиле, палитра будет второй CSSRule, возвращённой последним стилем в документе (document.styleSheets[document.styleSheets.length-1].cssRules).

HTML

<div class="hat">
  <div class="emoji colored-hat">🎩</div>
</div>
<button>Toggle color</button>
<pre id="log"></pre>

CSS

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}

@font-palette-values --blue {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(1 28 193),
    4 rgb(60 124 230);
}

@font-palette-values --green {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(28 193 1),
    4 rgb(34 230 1);
}

.colored-hat {
  font-palette: --blue;
}

JavaScript

const log = document.getElementById("log");
const button = document.querySelector("button");
const hat = document.querySelector(".colored-hat");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const greenFontPaletteValuesRule = rules[3];
const blueFontPaletteValuesRule = rules[2];
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;

button.addEventListener("click", (event) => {
  if (hat.style.fontPalette !== "--green") {
    hat.style.fontPalette = "--green";
    log.textContent = `Overridden colors: ${greenFontPaletteValuesRule.overrideColors}`;
  } else {
    hat.style.fontPalette = "--blue";
    log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
  }
});

Результат

Спецификации

Спецификация
CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-overridecolors

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`overrideColors`	101	101	107	87	15.4	101	107	70	15.4	19.0	101

См. также

@font-palette-values правило
override-colors описатель

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/overrideColors