0Pricing
CSS Academy · Урок

Типизированная объектная модель CSS (OM)

Работайте со значениями CSS как с типизированными объектами JavaScript, а не строками, используя API типизированной OM CSS.

«Типизированная объектная модель CSS (OM)» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое CSS Typed OM

Типизированная объектная модель CSS (Typed OM) — часть проекта CSS Houdini. Она предоставляет значения CSS в виде типизированных объектов JavaScript, а не обычных строк, что обеспечивает более быструю обработку, расширенные арифметические операции и безопасность типов.

Старый и новый подход

Традиционный CSSOM возвращает строки, а Typed OM — объекты с информацией о типе:

<p id="demo" style="opacity: 0.5;">Typed OM demo element</p>
<p id="output">Reading style values&hellip;</p>
<script>
  const demo = document.getElementById('demo');
  const output = document.getElementById('output');

  // Old CSSOM (string)
  const oldValue = demo.style.opacity; // '0.5'

  // CSS Typed OM (typed object)
  const typed = demo.computedStyleMap().get('opacity');
  // CSSUnitValue { value: 0.5, unit: 'number' }

  output.textContent = 'old (string): "' + oldValue + '"  |  typed OM: value=' + typed.value + ', unit=' + typed.unit;
</script>

computedStyleMap()

Получите вычисленные типизированные значения для любого элемента:

<div id="box">400px wide box</div>
<p id="output">Reading computed width&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  const styles = box.computedStyleMap();
  const width = styles.get('width');
  console.log(width.value); // 400
  console.log(width.unit);  // 'px'

  output.textContent = 'width.value = ' + width.value + ', width.unit = "' + width.unit + '"';
</script>

attributeStyleMap для встроенных стилей

Устанавливайте и получайте типизированные значения встроенных стилей через element.attributeStyleMap:

<div id="box">Inline-styled box</div>
<p id="output">Setting styles via attributeStyleMap&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  box.attributeStyleMap.set('opacity', CSS.number(0.5));
  box.attributeStyleMap.set('margin-top', CSS.px(16));

  const opacity = box.attributeStyleMap.get('opacity');
  output.textContent = 'opacity.value = ' + opacity.value;
</script>

Фабричные методы для числовых значений CSS

Пространство имён CSS предоставляет фабричные методы для создания типизированных значений:

<div id="box">Factory methods demo</div>
<p id="output">Computing&hellip;</p>
<script>
  const output = document.getElementById('output');

  const px = CSS.px(100);         // CSSUnitValue(100, 'px')
  const percent = CSS.percent(50); // CSSUnitValue(50, 'percent')
  const em = CSS.em(1.5);          // CSSUnitValue(1.5, 'em')
  const number = CSS.number(0.5);  // CSSUnitValue(0.5, 'number')
  const deg = CSS.deg(180);        // CSSUnitValue(180, 'deg')

  output.textContent = [px, percent, em, number, deg]
    .map(v => v.value + v.unit).join(', ');
</script>

Арифметика над типизированными значениями

CSSMathValue позволяет выполнять математические операции CSS в JavaScript без объединения строк:

<div id="box">Math on typed values</div>
<p id="output">Calculating&hellip;</p>
<script>
  const output = document.getElementById('output');

  const width = CSS.px(100).add(CSS.percent(10));
  // Equivalent to calc(100px + 10%)

  const margin = CSS.px(16).mul(2);
  // 32px

  output.textContent = 'width = ' + width.toString() + '  |  margin = ' + margin.value + margin.unit;
</script>

Преимущества производительности

Typed OM значительно быстрее строкового CSSOM при частых операциях (например, на кадрах анимации). Значения не нужно каждый раз извлекать из строк — они уже представлены в виде структурированных объектов.

Типы CSSStyleValue

Типы значений Typed OM включают:

  • CSSUnitValue: число + единица (100px)
  • CSSKeywordValue: ключевое слово (auto, none)
  • CSSImageValue: изображение (url())
  • CSSMathValue: математические выражения calc
  • CSSColorValue: значения цвета (экспериментальная возможность)

Typed OM в анимации

В API веб-анимаций используйте типизированные значения для более точного управления анимацией:

<div id="box">Animated via Typed OM</div>
<script>
  const box = document.getElementById('box');
  box.animate(
    [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
    { duration: 300, fill: 'forwards' }
  );
</script>

Поддержка браузерами

CSS Typed OM (уровень 1) поддерживается в Chrome 66 и более поздних версиях, а также в Edge 79 и более поздних версиях. Поддержка в Firefox и Safari частичная или доступна за флагами. Перед использованием в рабочем окружении проверьте caniuse.com. Набор возможностей API продолжает расширяться.

Когда использовать Typed OM

Используйте Typed OM, когда:

  • Создаёте рабочие модули CSS Paint или Layout (обязательно)
  • Анимируете множество элементов JavaScript на каждом кадре
  • Создаёте инструменты для CSS или препроцессоры
  • Вам нужна проверка типов при обработке значений CSS

Быстрая проверка

Что возвращает element.computedStyleMap().get("width") по сравнению с getComputedStyle(element).width?

Итоги

CSS Typed OM заменяет строковый CSSOM типизированными объектами JavaScript. Используйте computedStyleMap() для чтения и attributeStyleMap для записи встроенных стилей. Фабричные методы CSS (CSS.px(), CSS.percent()) создают типизированные значения. Этот API быстрее строковой обработки и необходим для рабочих модулей Paint и Layout.

Часто задаваемые вопросы

Урок «Типизированная объектная модель CSS (OM)» бесплатный?

Да — полный текст урока «Типизированная объектная модель CSS (OM)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типизированная объектная модель CSS (OM)»?

Работайте со значениями CSS как с типизированными объектами JavaScript, а не строками, используя API типизированной OM CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Типизированная объектная модель CSS (OM)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизированная объектная модель CSS (OM)
  2. API свойств и значений CSS (@property)
  3. API рисования CSS: рабочие модули
  4. API компоновки CSS и область действия
← Назад к CSS Academy