CC BY
4
№ 12 (117)
A UNI
/ш. те;
UNIVERSUM:
технические науки
декабрь, 2023 г.
DOI -10.32743/UniTech.2023.117.12.16546
ИССЛЕДОВАНИЕ ВОЗМОЖНОСТЕЙ CSS HOUDINI В СТИЛИЗАЦИИ СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ
Лабоскин Артем Сергеевич
фронтенд разработчик, Acquire, США, г. Сан-Франциско E-mail: artem. laboskin@gmail. com
STUDYING THE POTENTIAL OF CSS HOUDINI IN STYLING MODERN WEB APPLICATIONS
Artem Laboskin
Frontend Software Engineer, Acquire, USA, San Francisco
АННОТАЦИЯ
В данной статье рассматривается CSS Houdini — передовая инициатива в области веб-разработки, направленная на расширение функциональных возможностей CSS для создания продвинутых визуальных эффектов, сложных анимаций и индивидуальных макетов. Исследуются ключевые API, входящие в состав CSS Houdini, включая Typed Object Model, Properties and Values API, Painting API, Layout API, Animation Worklet, Font Metrics API и Parser API, а также их роль в решении современных задач веб-разработки. Для каждого из перечисленных компонентов приводятся примеры кода, иллюстрирующие их применение. Анализируется текущее состояние развития этих технологий и их потенциальное влияние на будущее разработки веб-приложений.
ABSTRACT
This paper examines CSS Houdini, a cutting-edge web development initiative aimed at extending the functionality of CSS to create advanced visual effects, complex animations, and customized layouts. It explores the key APIs included in CSS Houdini, including the Typed Object Model, Properties and Values API, Painting API, Layout API, Animation Worklet, Font Metrics API, and Parser API, and their role in solving today's web development. For each of the listed components code samples are given to illustrate their application. The paper also analyzes current state of development of these technologies and their potential impact on the future of web application development.
Ключевые слова: css houdini, typed object model, properties and values api, worklets, painting api, layout api, animation worklet, font metrics api, parser api, css, javascript, фронтенд, веб-приложения.
Keywords: css houdini, typed object model, properties and values api, worklets, painting api, layout api, animation worklet, font metrics api, parser api, css, javascript, front end, web applications.
Введение
В мире веб-разработки CSS (Cascading Style Sheets) играет ключевую роль в визуализации вебстраниц, однако с течением времени его ограничения становятся всё более очевидными. Несмотря на свою гибкость и мощь, CSS традиционно ограничен в способности создавать продвинутые визуальные эффекты, сложные анимации и настраиваемые макеты. Скорость развития стандартов CSS не успевает покрывать растущие потребности современной веб-разработки. Это часто вынуждает разработчиков прибегать к сложным и неэффективным обходным решениям при помощи JavaScript. Ответом на эти вызовы стало появление инициативы CSS Houdini, которая открывает новый подход к стилизации, предоставляя инструменты для глубокой настройки и расширению возможностей CSS.
CSS Houdini представляет собой набор API для взаимодействия с CSS движком браузера, открывающий новые перспективы для веб-разработчиков в создании динамичных, высокопроизводительных и глубоко кастомизированных пользовательских интерфейсов. Эти API предоставляют доступ к внутренним механизмам CSS, позволяя разработчикам напрямую влиять на процесс рендеринга и тем самым расширять стандартные возможности стилизации. Такой подход упрощает интеграцию сложных визуальных эффектов и анимаций, которые ранее требовали использования JavaScript и могли негативно сказываться на производительно сти [1].
Настоящее исследование направлено на глубокое понимание CSS Houdini и его потенциала в решении современных задач веб-разработки. Для достижения этой цели будут рассмотрены его основные компоненты, их функциональность и примеры использования.
Библиографическое описание: Лабоскин А.С. ИССЛЕДОВАНИЕ ВОЗМОЖНОСТЕЙ CSS HOUDINI В СТИЛИЗАЦИИ СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ // Universum: технические науки : электрон. научн. журн. 2023. 12(117). URL: https://7universum. com/ru/tech/archive/item/16546
№ 12 (117)
UNIVERSUM:
ТЕХНИЧЕСКИЕ НАУКИ
декабрь, 2023 г.
Typed Object Model
Typed Object Model (Typed OM) упрощает манипулирование CSS свойствами, представляя их значения в виде специализированных объектов JavaScript. Традиционно любое взаимодействие со значениями CSS осуществлялось через их строковое представление, что требовало дополнительного анализа при чтении и конкатенации при записи, ухудшая производительность и качество кода. Typed OM позволяет управлять числовыми значениями и единицами измерения напрямую, обеспечивая более интуитивное
и эффективное управление стилями по сравнению с интерфейсом HTMLElement.style [2].
Этот подход минимизирует вероятность ошибок, связанных с преобразованием данных, а также повышает производительность и читабельность кода. Кроме этого, Typed OM позволяет удобно работать с CSS переменными и наследуемыми стилями, а также предоставляет интерфейс для математических операций над числовыми значениями свойств. Примеры использования Typed OM представлены на рисунке 1.
const el = document.querySelector(1.example1);
el.attributeStyleMap.set('width', CSS.px(200)); el.attributeStyleMap.set( 'transform',
new CSSTransformValue([
new CSSRotate(CSS.deg(60)),
new CSSScale(CSS.number(1.5), CSS.number(2))
])
);
el.computedStyleNapt)-get('width'); el.computedStyleMap().get('transform');
console.log( new CSSMathSum( CSS.px(l),
new CSSMathNegate(new CSSMathProduct(2, CSS.em(3)))
).toString()
)
// "calc(lpx - 2 * Зет)"
console.log(
CSS.s(2).equals(CSS.ms(2000).to('s'))
);
// true
Рисунок 1. Пример использования Typed Object Model
Properties and Values API
Properties and Values API представляет собой инструмент для управления пользовательскими свойствами CSS, обеспечивая им более широкие возможности для создания динамический стилей и управления анимацией. Он позволяет разработчикам определять новые CSS свойства с указанием их типа, начального значения и поведения наследования.
Новые пользовательские свойства могут быть определены при помощи интерфейса
CSS.registerProperty() в JavaScript и ключевого слова @property в CSS. В отличие от традиционных CSS переменных, которые интерпретируется как строки, они обладают строгим синтаксисом и приближены к стандартным свойствам. Благодаря этому браузер может корректно их обрабатывать и плавно изменять их значения при использовании таких средств как transition и animation [3]. Примеры использования Properties and Values API представлены на рисунке 2.
Q ess ШЕМ 5) js QBE
^property —my-color { window.CSS.registerProperty({
syntax: "<color>"; name: "—my-color",
inherits: false; syntax: "<color>",
initial-value: #000000; inherits: false,
> initialValue: "#000000",
});
^property —my-size {
syntax: "<length-percentage>"; window.CSS.registerProperty({
inherits: true; name: "—my-size",
initial-value: 0px; syntax: "<length-percentage>",
} inherits: true,
initialValue: "0px",
технические науки
декабрь, 2023 г.
^property —my-size {
syntax: "<length-percentage>M; inherits: true; initial-value: 0px;
}
window.CSS.registerProperty({ name: "—my-color"f syntax: "<color>", inherits: false, initialvalue: "#000000", });
window.CSS.registerProperty({ name: "—my-size", syntax: "<length-percentage>", inherits: true, initialValue: "0px",
Рисунок 2. Пример использования Properties and Values API
Worklets
Интерфейс Worklet является облегченной версией Web Workers и предоставляет разработчикам доступ к низкоуровневым частям процесса рендеринга. Он позволяет выполнять в отдельном потоке изолированный JavaScript или WebAssembly код, который служит для рендеринга графики и обработки звука. В отличие от Web Workers, эти модули имеют ограниченный набор сценариев использования и не подходят для выполнения произвольных вычислений. Помимо AudioWorklet, предназначенного для обработки звука в рамках Web Audio API, спецификация включает PaintWorklet, LayoutWorklet и AnimationWorklet, каждый из которых реализует соответствующий аспект рендеринга страницы в рамках CSS Houdini [4].
Painting API
Painting API значительно расширяет возможности стилизации веб-элементов за счет использования
JavaScript для создания пользовательских изображений. Он позволяет динамически генерировать изображения, которые затем используются внутри CSS кода при помощи вызова функции paint() в качестве значений для таких свойств, как background-image, border-image или mask-image [5].
Используя функцию paint(), разработчики могут интегрировать собственную логику в процесс рендеринга веб-страницы. Это достигается за счет определения PaintWorklet, который регистрируется и активируется через JavaScript при помощи интерфейса CSS.paintWorklet. В этом модуле разработчики могут использовать традиционные методы рисования HTML5 Canvas для динамического создания изображений, которые реагируют на изменение стилей и действия пользователя. Этот API расширяет возможности стилизации, позволяя создавать сложные фоновые изображения и адаптивные границы элементов. Пример использования Painting API представлен на рисунке 3.
№ 12 (117)
UNIVERSUM:
технические науки
декабрь, 2023 г.
QC5S -box {
background-image: paint(boxbg); —boxColor: hsl(55 90% 60% / 1); —widthSubtractor: 40;
>
® JS
// boxbg.js registerPaint( "boxbg", class {
static get contextOptionsO { return { alpha: true };
}
static get inputPropertiesO {
return ["—boxColor", "—widthSubtractor"];
}
paint{ctx, size, props) {
ctx.fillStyle = props.get("—boxColor"); ctx.fillRect(
size.height / 3,
size.width * 0.4 - props.get("—widthSubtractor"), size.height * 0.6,
);
}
},
);
11 index.js
CSS.paintWorklet.addModule("boxbg.j s");
Рисунок 3. Пример использования Painting API
Layout API
Layout API предоставляет разработчикам возможности для глубокого взаимодействия с процессом рендеринга браузера, позволяя создавать уникальные пользовательские макеты (layouts). Это открывает новые перспективы для веб-дизайна, обеспечивая возможность реализации сложных креативных макетов, недоступных для стандартных режимов отображения в CSS.
Принцип его работы заключается в использовании CSS-функции layout() в качестве значения свойства
display. В нее передается название макета, заранее зарегистрированного в JavaScript при помощи интерфейса CSS.layoutWorklet и функции registerLayout(). В конфигурации макета разработчики могут реализовать уникальные алгоритмы расположения родительского и дочерних элементов, которые способны зависеть от множества параметров, включая количество и размеры элементов, а также пользовательские CSS свойства [6]. Пример использования Layout API представлен на рисунке 4.
№ 12 (117)
UNIVERSUM:
технические науки
декабрь, 2023 г.
.parent { display: layoutíexampleLayout); —foo: 2Й0рх;
}
.child { —bar: 1Й0рх;
}
(DJS
// exampleLayout.js
registerLayout (' exampleLayout1r class { static get inputPropertiesi) { return [i™foo1]; >
static get child renin putP rope rties () { return ['—bar']; }
static get layoutOptionsi) { return { childDisplay: 1 normal sizing: 'block-like1
};
>
intrinsicSizes (children, edgesr styleMap) { /* ...
>
layoutichildren, edges, constraintst styleMap, breakToken) { /* ...
> });
// index.js
CSS.layoutWarklet.addModulel'exampleLayout.is');
Рисунок 4. Пример использования Layout API
Animation Worklet
Animation Worklet является частью Web Animations API (WAAPI) и предоставляет широкие возможности для создания сложных и высоко про -изводительных анимаций, работающих на нативной частоте кадров устройства. Выполнение в отдельном изолированном потоке обеспечивает безопасное и управляемое использование ресурсов и снижает нагрузку на основной поток.
Анимации, созданные при помощи Animation Worklet, могут обладать состоянием и реагировать на действия пользователя. Это, в частности, позволяет анимировать компоненты при прокрутке страницы, что решает распространенную задачу по созданию параллакс-эффекта, недоступную для традиционных анимационных инструментов в CSS [7]. Пример кода, использующего Animation Worklet, представлен на рисунке 5.
№ 12 (117)
UNIVERSUM:
технические науки
декабрь, 2023 г.
// animator.js
registerAnimator('animator', class Passthrough extends StatelessAnimator {
animate{currentTime, effect) { effect-localTime = currentTime;
> >);
// index.js
await CSS.animationWorklet,addModule("animator.js");
const effect = new KeyframeEffect(targetEl,
{transform: ['translateX(0)'t 1 translateXf50vw}13 }f { duration: 1G00 >
);
const animation = new WorkletAnimation("animator11 effect); animation.play{);
Рисунок 5. Пример использования Painting API
Font Metrics API
Font Metrics API предназначен для продвинутой работы с типографикой на веб-страницах за счет предоставления доступа к метрикам шрифтов. Он включает интерфейсы для JavaScript, которые позволяют получить точные размеры и характеристики текста как в документе, так и вне его.
API содержит методы measureElement() и measureText(), которые возвращают объект FontMetrics, содержащий подробную характеристику текста, включая его ширину, высоту, базовую линию, размеры ограничивающего прямоугольника и многое
другое. Функция measureElement() принимает в себя объект Element и предназначена для текста внутри HTML документа. В то же время measureText() принимает строку и объект StylePropertyMapReadOnly, позволяя заранее узнать характеристики текста до его отрисовки в документе [8].
Пример кода, демонстрирующий применение Font Metrics API представлен на рисунке 6. Стоит отметить, что функциональность Font Metrics API может претерпеть значительные изменения в будущем, поскольку он находится на ранней стадии разработки и представляет из себя набор предложений [9].
const element = document.querySelector(1.text-element'); const fontMetrics = document.measureElement(element);
console.log(fontMetrics.width); console.log(fontMetrics.height); console.log(fontMetrics.emHeightAscent); console.log(fontMet rics.emHeightDescent);
const textMetrics = document.measureText("Some text");
console.log(textMetrics.width); console.log(textMet rics.height);
Рисунок 6. Пример использования Font Metrics API
Parser API
Parser API открывает новые горизонты в обработке и расширении CSS, предоставляя интерфейс для прямого взаимодействия с CSS парсером. Он обеспечивает анализ произвольных CSS-подобных языков с помощью умеренно типизированного представления. Такой подход упрощает работу с новыми языками, используя общие форматы обмена данными, такие как XML и JSON, что снижает порог вхождения для разработчиков.
Parser API включает такие методы, как pars-eStylesheet, parseRule, parseDeclaration, parseValue, parseCommaValueList и другие [10]. Они позволяют анализировать различные структуры правил и деклараций CSS и преобразовывать их в удобные для работы JavaScript объекты, что упрощает разработку и делает её более устойчивой к ошибкам.
Parser API находится на ранней стадии разработки, и его спецификация может значительно измениться в будущем [9]. Пример кода, основанный на текущей спецификации и иллюстрирующий потенциальное использование Parser API, представлен на риа 7.
№ 12 (117)
UNIVERSUM:
технические науки
декабрь, 2023 г.
CSSParserAPI.parseRuleList(".container { color: red; height: 100%; >") .then{rules => {
rules.forEach(rule => { console.log(rule.selectorText); console.log(rule.style); >); });
CSSParserAPI.parseDeclaration('background: green;') .then{declaration => { console.log(declaration.property); console.log(declaration.value); });
Рисунок 7. Пример
Текущее состояние
По состоянию на декабрь 2023 года сообщество разработчиков продолжает работу над компонентами, входящими в состав CSS Houdini. Основные его составляющие, включая Paint API, Properties and Values API и Typed Object Model, поддерживаются в большинстве популярных веб-браузеров. Layout API и Animation Worklet имеют частичную поддержку и находятся на стадии публичного обсуждения спецификации. Font Metrics API и Parser API имеют статус предложения (proposal) и еще не реализованы ни в одном из веб-браузеров [9].
Заключение
В результате рассмотрения темы CSS Houdini становится ясно, что этот набор технологий представляет собой значительный шаг вперед в развитии
зования Parser API
стилизации веб-страниц. Он открывает перед разработчиками широкие возможности для более глубокого контроля над процессом рендеринга, предоставляя инструменты для гибкой и производительной работы со стилями. CSS Houdini не только способствует оптимизации и ускорению разработки, но и позволяет реализовывать сложные визуальные эффекты и анимации.
Несмотря на то, что большинство рассмотренных компонентов все еще находится в разработке и не поддерживается всеми основными браузерами, CSS Houdini имеет огромный потенциал в качестве неотъемлемой части инструментария веб-разработчиков. Ожидается, что с полной интеграцией CSS Houdini разработчики смогут значительно расширить свои возможности в создании клиентских веб-приложений.
Список литературы:
1. CSS Houdini - Developer guides | MDN. [Электронный ресурс] Режим доступа: https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini - (дата обращения 03.12.2023).
2. Working with the new CSS Typed Object Model | CSS and UI | Chrome for Developers. [Электронный ресурс] Режим доступа: https://developer.chrome.com/docs/css-ui/cssom - (дата обращения 03.12.2023).
3. Smarter custom properties with Houdini's new API | Articles | web.dev. [Электронный ресурс] Режим доступа: https://web.dev/articles/css-props-and-vals - (дата обращения 03.12.2023).
4. Worklet - Web APIs | MDN. [Электронный ресурс] Режим доступа: https://developer.mozilla.org/en-US/docs/Web/API/Worklet - (дата обращения 03.12.2023).
5. CSS Painting API - Web APIs | MDN. [Электронный ресурс] Режим доступа: https://developer.mozilla.org/en -US/docs/Web/API/CSS_Painting_API - (дата обращения 03.12.2023).
6. A Practical Overview Of CSS Houdini — Smashing Magazine. [Электронный ресурс] Режим доступа: https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini - (дата обращения 03.12.2023).
7. Houdini's Animation Worklet | Blog | Chrome for Developers. [Электронный ресурс] Режим доступа: https://developer.chrome.com/blog/animation-worklet - (дата обращения 03.12.2023).
8. Font Metrics API Level 1. [Электронный ресурс] Режим доступа: https://drails.css-houdini.org/font-metrics-api-1 -(дата обращения 03.12.2023).
9. Is Houdini Ready Yet? [Электронный ресурс] Режим доступа: https://ishoudinireadyyet.com - (дата обращения 03.12.2023).
10. CSS Parser API. [Электронный ресурс] Режим доступа: https://wicg.github.io/css-parser-api - (дата обращения 03.12.2023).
