Работа с новой объектной моделью CSS Typed Object Model

Работа с новой объектной моделью CSS Typed Object Model

От автора: основы использования новой объектной модели CSS Typed Object Model. Сравнение с CSSOM, основные преимущества. Примеры работы со значениями.

В CSS появилась новая объектная модель API для работы со значениями в JS.

Дни конкатенации строк и тонких багов сочтены!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Внимание: Chrome 66 добавляет поддержку CSS Typed Object Model для подмножества CSS свойств.

Старая CSSOM

Долгое время в CSS существовала объектная модель (CSSOM). По факту, каждый раз при чтении/установке .style в JS вы делаете следующее:

Новая CSS Typed OM

Новая CSS Typed Object Model (Typed OM) или типизированная объектная модель является частью усилий Houdini и расширяет ее мировоззрение, добавляя типы, методы и правильную объектную модель к CSS значениям. Вместо строк значения представляются в виде JS объектов для облегчения работы с манипулированием CSS.

Вместо element.style получить доступ к стилям можно через новое свойство .attributeStyleMap для элементов и свойство .styleMap для правил. Оба свойства возвращают объект StylePropertyMap.

StylePropertyMaps – это объекты типа Map. Поэтому они поддерживают все ожидаемые вещи (get/set/keys/values/entries), что делает их гибкими в работе:

Обратите внимание, что во втором примере opacity присваивается строка ‘0.3’, но позже при считывании свойства возвращается число.

Если определенное CSS свойство поддерживает числа, Typed OM будет принимать строки, но возвращать всегда будет число! Аналогия между старой CSSOM и новой Typed OM – как .className выросло и получило свой API .classList.

Преимущества

Какую проблему CSS Typed OM пытается решить? Взглянув на примеры сверху (и на остальные примеры в статье), вы можете сказать, что у CSS Typed OM больше кода, чем у старой объектной модели. Соглашусь!

Прежде чем списать Typed OM взгляните на ключевые возможности:

Меньше багов: например, числовые значения всегда возвращаются как число, а не строка.

Арифметические операции и преобразование единиц измерения. Конвертируйте абсолютные единицы измерения длины (px -> cm) и выполняйте базовые математические операции.

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

Улучшенная производительность. Браузер выполняет меньше действий по сериализации и десериализации строковых значений. Теперь движок использует похожие понятия CSS значений в JS и С++. Tab Akins показал ранние тесты скорости, в которых видно, что Typed OM ~30% быстрее в операциях в секунду по сравнению со старой CSSOM и строками. Это может быть важно для быстрой CSS анимации с использованием requestionAnimationFrame(). crbug.com/808933 отслеживает дополнительную работу по производительности в Blink.

Обработка ошибок. Новые методы парсинга открыли миру CSS обработку ошибок.

«Использовать верблюжий регистр в CSS именах или строки?» Больше не нужно гадать, находятся имена в верблюжьем регистре или это строки (например, el.style.backgroundColor или el.style['background-color']). В Typed OM имена свойств CSS всегда являются строками, что совпадает с тем, как вы пишите CSS :)

Поддержка в браузерах и определение функций

В Chrome Typed OM появилась в 66 версии, в Firefox поддержка уже есть. Edge показал признаки поддержки, но еще не добавил его в панель инструментов.

Примечание: на данный момент в Chrome 66+ поддерживается только подмножество CSS свойств.

Для определения функций можно проверять, определена ли одна из числовых фабрик CSS.*:

Основы API

Получение стилей

В Typed OM значения отделены от единиц измерения. При получении стиля возвращается CSSUnitValue, содержащий value и unit:

Вычисляемые стили

Вычисляемые стили переехали из API в window в новый метод computedStyleMap(): на HTMLElement:

Старая CSSOM

Новая Typed OM

Примечание: между window.getComputedStyle() и element.computedStyleMap() есть один минус – первый возвращает разрешенное значение, а второй возвращает вычисленное. Например, Typed OM сохраняет процентные значения (width: 50%), а CSSOM разрешает их в значения длины (например, width: 200px).

Зажим/округление значений

Одна из классных функций в новой объектной модели – это автоматический зажим и/или округление вычисляемых значений стилей. Например, вы пытаетесь задать opacity за пределами диапазона [0,1]. Typed OM зажимает значение до 1 при вычислении стилей:

Точно так же z-index:15.4 округляет значение до 15, поэтому значение остается целочисленным.

Числовые значения CSS

Числа представлены двумя типами объектов CSSNumericValue в Typed OM:

CSSUnitValue – значения, содержащие один тип единиц измерения (например, «42px»).

CSSMathValue – значения, содержащие более одного значения/единицы, например, математическое выражение («calc(56em + 10%)»).

Значения единиц измерения

Простые числовые значения («50%») представлены объектами CSSUnitValue. Объекты можно создавать напрямую (new CSSUnitValue(10, ‘px’)), но чаще всего вы будете использовать методы фабрики CSS.*:

Примечание: как показано в примерах, в методы можно передавать Number или String в виде числа.

Полный список методов CSS.* смотрите в спецификации.

Математические значения

Объекты CSSMathValue представляют математические выражения и обычно содержат более одного значения/единицы. Общий пример – создание CSS выражения calc(), но есть и методы для всех CSS функций: calc(), min(), max().

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Вложенные выражения

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

calc(1px — 2 * 3em) теперь выглядит так:

calc(1px + 2px + 3px) превратился в:

calc(calc(1px + 2px) + 3px) превратился в:

Арифметические операции

Одна из полезнейших функций Typed OM заключается в том, что вы можете выполнять математические операции над объектами CSSUnitValue.

Базовые операции

Поддерживаются базовые операции (add/sub/mul/div/min/max):

Преобразование

Единицы абсолютной длины можно конвертировать в другие единицы измерения длины:

Равенство

Значения CSS transform

CSS transforms создаются с помощью CSSTransformValue и передаваемого массива значений трансформации (например, CSSRotate, CSScale, CSSSkew, CSSSkewX, CSSSkewY). Например, вы хотите воссоздать этот CSS:

В переводе на Typed OM:

Помимо того, что код длиннее, у CSSTransformValue есть несколько крутых функций. У него есть Булево свойство для различения 2D и 3D трансформаций, а также метод .toMatrix() для возврата представления DOMMatrix трансформации:

Пример: анимированный куб

Рассмотрим практический пример использования трансформаций. Для анимации куба задействуем JS и CSS трансформации.

Обратите внимание:

Числовые значения означают, что мы можем напрямую увеличивать по инкременту угол с помощью вычислений!

Чтобы не трогать DOM или считывать значение каждого кадра (например, no box.style.transform=rotate(0,0,1,${newAngle}deg)), анимация обновляется через объект данных CSSTransformValue, повышая производительность.

Если ваш браузер поддерживает Typed OM, ниже будет красный куб. Куб начинает вращаться при наведении мыши. Анимация управляется CSS Typed OM!

Значения пользовательских свойств CSS

CSS var() стал объектом CSSVariableReferenceValue в Typed OM. Их значения парсятся в CSSUnparsedValue, потому что они могут принимать любой тип (px, %, em, rgba() и т.д.).

Получить значение пользовательского свойства можно следующим образом:

Значения положения

CSS свойства, принимающие положение x/y, разделенное запятой, например, object-position представлены через объекты CSSPositionValue.

Парсинг значений

Typed OM представляет методы парсинга в веб-платформу! Вы наконец-то можете программно парсить CSS значения, прежде чем их использовать! Эта новая возможность сэкономит время на поиск ранних багов и искаженного CSS.

Парсинг всего стиля:

Парсинг значений в CSSUnitValue:

Обработка ошибок

Пример – проверьте, что выдаст парсер CSS с этим значением transform:

Заключение

Приятно наконец-то получить обновленную объектную модель для CSS. Мне всегда было неудобно работать со строками. CSS Typed OM API немного длиннее, но, надеюсь, так будет меньше багов, а код станет быстрее.

Автор: Eric Bidelman

Источник: https://developers.google.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree