API модели типов CSS-объектов

API модели типов CSS-объектов упрощает работу с CSS-свойствами, предоставляя CSS-значения в виде типизированных JavaScript-объектов вместо строк. Это не только упрощает работу с CSS, но и снижает негативное влияние на производительность по сравнению с HTMLElement.style.

В целом, CSS-значения могут считываться и записываться в JavaScript как строки, что может быть медленным и неудобным. API модели типов CSS-объектов предоставляет интерфейсы для взаимодействия с базовыми значениями, представляя их специализированными JS-объектами, которые могут быть манипулированы и поняты более легко и надежно, чем парсинг и конкатенация строк. Это проще для авторов (например, числовые значения отражаются фактическими JS-числами и имеют определённые математические операции с учётом единиц). Кроме того, это, как правило, быстрее, так как значения могут быть непосредственно обработаны и затем легко переведены обратно в базовые значения без необходимости создания и парсинга строк CSS.

CSS Typed OM позволяет одновременно эффективно манипулировать значениями, назначенными CSS-свойствам, и создавать поддерживаемый код, который более понятен и проще в написании.

Интерфейс CSSStyleValue API модели типов CSS-объектов является базовым классом всех CSS-значений, доступных через API Typed OM. Экземпляр этого класса может быть использован в любом месте, где ожидается строка.

CSSStyleValue.parse()

Метод, позволяющий создать CSSNumericValue из CSS-строки. Он устанавливает определённое CSS-свойство в указанные значения и возвращает первое значение в виде объекта CSSStyleValue.

CSSStyleValue.parseAll()

Метод, устанавливающий все вхождения определённого CSS-свойства в указанное значение и возвращающий массив объектов CSSStyleValue, каждый из которых содержит одно из предоставленных значений.

Интерфейс StylePropertyMap API модели типов CSS-объектов предоставляет представление блока объявления CSS, являющееся альтернативой CSSStyleDeclaration.

StylePropertyMap.set()

Метод, изменяющий объявление CSS с заданным свойством на заданное значение.

StylePropertyMap.append()

Метод, добавляющий новое объявление CSS в StylePropertyMap с заданным свойством и значением.

StylePropertyMap.delete()

Метод, удаляющий объявление CSS с заданным свойством из StylePropertyMap.

StylePropertyMap.clear()

Метод, удаляющий все объявления в StylePropertyMap.

Интерфейс CSSUnparsedValue API модели типов CSS-объектов представляет значения свойств, которые ссылаются на пользовательские свойства. Он состоит из списка фрагментов строк и ссылок на переменные.

CSSUnparsedValue() конструктор

Создаёт новый объект CSSUnparsedValue, представляющий значения свойств, которые ссылаются на пользовательские свойства.

CSSUnparsedValue.entries()

Метод, возвращающий массив собственных перечисляемых пар свойств-значений данного объекта в том же порядке, что и в цикле for...in, (отличие в том, что цикл for-in перечисляет и свойства в цепочке прототипов).

CSSUnparsedValue.forEach()

Метод, выполняющий предоставленную функцию один раз для каждого элемента CSSUnparsedValue.

CSSUnparsedValue.keys()

Метод, возвращающий новый объект итератора массива, содержащий ключи для каждого индекса в массиве.

Интерфейс CSSKeywordValue API модели типов CSS-объектов создаёт объект для представления CSS-ключевых слов и других идентификаторов.

CSSKeywordValue() конструктор

Конструктор создаёт новый объект CSSKeywordValue(), который представляет CSS-ключевые слова и другие идентификаторы.

CSSKeywordValue.value()

Свойство интерфейса CSSKeywordValue, возвращающее или устанавливающее значение CSSKeywordValue.

CSSStyleValue — это базовый класс, через который выражаются все CSS-значения. Подклассы включают:

CSSImageValue

Интерфейс, представляющий значения для свойств, которые принимают изображение, например background-image, list-style-image или border-image-source.

CSSKeywordValue

Интерфейс, создающий объект для представления CSS-ключевых слов и других идентификаторов. При использовании там, где ожидается строка, он вернёт значение CSSKeyword.value.

CSSMathValue

Дерево подклассов, представляющих числовые значения, которые сложнее, чем одно значение и единица, включая:

• CSSMathInvert — представляет значение CSS calc(), используемое как calc(1 / <value>).
• CSSMathMax — представляет функцию CSS max().
• CSSMathMin — представляет функцию CSS min().
• CSSMathNegate — инвертирует переданное значение.
• CSSMathProduct — представляет результат вызова add(), sub() или toSum() на CSSNumericValue.
• CSSMathSum — представляет результат вызова add(), sub() или toSum() на CSSNumericValue.

CSSNumericValue

Интерфейс, представляющий операции, которые могут выполнять все числовые значения, включая:

• CSSNumericValue.add — добавляет переданные числа к CSSNumericValue.
• CSSNumericValue.sub — вычитает переданные числа из CSSNumericValue.
• CSSNumericValue.mul — умножает переданные числа на CSSNumericValue.
• CSSNumericValue.div — делит CSSNumericValue на переданное значение, вызывая ошибку, если 0.
• CSSNumericValue.min — возвращает минимальное значение.
• CSSNumericValue.max — возвращает максимальное значение.
• CSSNumericValue.equals — возвращает true, если все значения имеют одинаковый тип и значение в том же порядке. Иначе — false.
• CSSNumericValue.to — преобразует value в другой с указанной единицей.
• CSSNumericValue.toSum
• CSSNumericValue.type
• CSSNumericValue.parse — возвращает число, разобранное из CSS-строки.

CSSPositionValue

Представляет значения для свойств, которые принимают позицию, например object-position.

CSSTransformValue

Интерфейс, представляющий список значений transform. Они «содержат» один или несколько CSSTransformComponent, которые представляют отдельные значения функций transform.

CSSUnitValue

Интерфейс, представляющий числовые значения, которые могут быть представлены как единица или именованное число и процент.

CSSUnparsedValue

Представляет значения свойств, которые ссылаются на пользовательские свойства. Он состоит из списка фрагментов строк и ссылок на переменные.

• CSS Painting API
• Использование типизированной объектной модели CSS
• CSS Houdini