Houdini — CSS, который JavaScript

Никита Дубко

• доброжелюбный бородач;
• адепт философии Pure CSS Images;
• соорганизатор митапов MinskCSS и MinskJS.

Конвейер рендеринга в браузере

JavaScript

Полифил

(function(self) {
	'use strict';
	if (self.es2020feature) {
		return;
	}
	self.es2020feature = function() {
		// Do some magic
	};
	self.es2020feature.polyfill = true;
})(this);

Понифил 🦄

ponyfill.com

// is-nan-ponyfill.js
module.exports = function (value) {
	return value !== value;
};

// app.js
var isNanPonyfill = require('is-nan-ponyfill');
isNanPonyfill(5);

Транспайлер

// ES6
let point = { x: 0, y: 0 };
const {x, y} = point;
const arrowFunction = (a) => a ** 2;

// ES5
'use strict';
var point = { x: 0, y: 0 };
var x = point.x,
    y = point.y;
var arrowFunction = function arrowFunction(a) {
  return Math.pow(a, 2);
};

CSS

Ошибки в проектировании CSS

• box-sizing должен быть border-box по умолчанию.
• z-index следовало назвать z-order или depth и он должен Просто Работать для всех элементов (как для flex-элементов).
• margin-top и margin-bottom никогда не должны схлопываться автоматически, так как это корень всего margin-collapse зла.
• border-radius должен был называться corner-radius.
• size должен был быть сокращением для width и height, а не отдельным свойством @page для обозначения размера листа.

Polyfill.js 🎉

Polyfill({
		declarations:["position:sticky"]
	})
	.doMatched(function(rules) {
		/* add styles */
	 })
	.undoUnmatched(function(rules) {
		/* reset styles */
	});

CSS-TAG Houdini Task Force 💎

CSS Custom Properties

:root {
	--r: 255;
	--g: 20;
	--b: 147;
	--primary-color: rgb(var(--r), var(--g), var(--b));
}

.my-element {
	--e-width: 200px;
	--e-border-width: 20px;
	background-color: var(--primary-color);
	width: calc(var(--e-width) + var(--e-border-width));
}

const isSupported = CSS.supports('--custom', 'property');

// Получить значение custom property
const pinkElement = document.querySelector('.pink-element');
const elementWidth = window
   .getComputedStyle(pinkElement)
   .getPropertyValue('--element-width');

// Изменить custom property для узла
pinkElement.style.setProperty('--element-width', '300px');

// Изменить custom property в :root
document.documentElement.style.setProperty('--r', 190);

демо Stargate

chrome://flags

CSS Typed OM

Проблема #1

const elem = document.querySelector('.elem');
const elemFontSize = parseFloat(
	window.getComputedStyle(elem).getPropertyValue('font-size')
);
console.log(elemFontSize); // 25

• лишняя операция преобразования в число;
• нет лёгкого способа получить единицы измерения.

Решение #1

const element = document.querySelector('.elem');

const styleMap = element.attributeStyleMap;
console.log( styleMap.get('font-size') );
// CSSUnitValue {value: 2.5, unit: "em"}

const computedStyleMap = element.computedStyleMap();
console.log( computedStyleMap.get('font-size') );
// CSSUnitValue {value: 25, unit: "px"}

Проблема #2

const x = 50;
const offset = 10;
element.style.setProperty(
	'transform',
	`translate(${x}px, calc(1em + ${offset}px))`
);

• лишняя операция преобразования в строку;
• при неправильном `value` не бросает исключение.

Решение #2

const styleMap = element.attributeStyleMap;
const calcValue = new CSSMathSum(CSS.em(1), CSS.px(5));
const transformValue = new CSSTransformValue([
	new CSSTranslate(
		CSS.px(50),
		calcValue
	)
]);
styleMap.set('transform', transformValue);

Отлов ошибок

try {
	CSSStyleValue.parse(
		'transform',
		'translate4d(bogus value)'
	);
} catch (err) {
	console.err(err);
}

Проверить поддержку

if (window.CSS && CSS.number) {
	// В вашем браузере CSS Typed OM работает
}
		

полифил typed-om

полифил typed-om

Chrome 66+

Где почитать?

• CSS Typed OM Level 1 (W3C Working Draft)
• Working with the new CSS Typed Object Model — Eric Bidelman
• Как CSS Typed OM облегчит жизнь разработчикам? — Людмила Мжачих

CSS Parser API

Идея

const background = window.cssParse.rule("background: green");
background.attributeStyleMap.get("background").value; // "green"

const styles = window.cssParse.ruleSet(
	`.foo {
		background: green;
		margin: 42px;
	}`
);
styles.length; // 5
styles[0].attributeStyleMap.get("margin-top").value; // 42

Асинхронная загрузка

const style = fetch("style.css")
	.then(response => {
		const styles = CSS.parseStylesheet(response.body);
		// применить PostCSS прямо в браузере
		return styles;
	});
style.then(console.log);

CSS Properties and Values API

Проблема #3

:root {
	--sidebar-width: 400px;
}
.closed {
	--sidebar-width: 80px;
}
body {
	transition: --sidebar-width 1s;
}

// JavaScript
CSS.registerProperty({
	name: '--sidebar-width',
	syntax: '<length>',
	inherits: true,
	initialValue: '80px'
});

/* CSS */
@property --sidebar-width {
	syntax: "<length>",
	inherits: true,
	initialValue: "80px"
}

Синтаксис

<length>
<number>
<percentage>
<length-percentage>
<color>
<image>
<url>
<integer>
<angle>
<time>
<resolution>
<transform-function>
<custom-ident>

<length | number>
<length>+
<image>#
small | smaller

• 1 div
• 1 keyframe
• 20 строк CSS
• 5 строк JS

Уже применяют

• thebabydino
• #houdini

Chrome Canary ^*

Worklets

// app.js — псевдокод
window.someWorklet
	.addModule('some-worklet.js')
	.then(_ => {
		console.log('some-worklet — loaded');
	});

// some-worklet.js — псевдокод
registerSomeWorklet('some-worklet-name', class {
	process(arg) {
		// делаем магию
	}
});

Загрузка через Blob. Шаг 1

<script language="javascript+paint">
	registerPaint('circle', class {
		paint(ctx, geom, properties) {
			// worklet implementation
		}
	});
</script>

Загрузка через Blob. Шаг 2

<script>
	function blobWorklet() {
		const src = document
			.querySelector('script[language$="paint"]')
			.innerHTML;
		const blob = new Blob([src], {type: 'text/javascript'});
		return URL.createObjectURL(blob);
	}
	if ('paintWorklet' in CSS) {
		CSS.paintWorklet.addModule(blobWorklet());
	}
</script>

CSS Painting API 🎨

CSS Painting API

Можно применять для отрисовки свойств:

• background-image
• border-image
• list-style-image
• content
• -webkit-mask-image
• cursor

// my-paint.js
registerPaint('my-paint', class MyPaint {
	static get inputProperties() { return ['--foo']; }
	static get inputArguments() { return ['<color>']; }
	static get contextOptions() { return { alpha: true }; }

	paint(ctx, geom, properties, args) {
		// ctx - контекст для рисования, как в canvas
		// geom - размеры доступной для рисования области
		// properties - свойства, на которые реагирует paintWorklet
		// args - переданные в paintWorklet аргументы
		// Можно рисовать почти как на обычном canvas
	}
});

/* style.css */
.my-element {
	--foo: deeppink;
	background-image: paint(my-paint);
}

// app.js
CSS.registerProperty({
	name: '--foo',
	syntax: '<color>',
	inherits: true,
	initialValue: 'black',
});
CSS.paintWorklet.addModule('my-paint.js');

Ограничения контекста для Paint Worklet

• Нельзя полагаться на global scope.
• Только 2D context.
• Нельзя работать с текстом.
• Время отрисовки должно укладываться в 1 frame.
• Нет доступа к хранилищам данных.

Chrome 65+

css-paint-polyfill

Демо image-placeholder

const element = document.querySelector('.my-element');
element
	.getFragmentInformation("direct-fragments-only")
	.then(info => {
		// ...
	});

// Значения фильтра
"direct-fragments-only" | "fragment-hierarchy"

interface DeadFragmentInformation {
	Node node;
	double width;
	double height;
	double top;
	double left;
	boolean isOverflowed;
	FrozenArray<DeadFragmentInformation>? children;
	DeadFragmentInformation? nextSibling;
	DeadFragmentInformation? previousSibling;
	DeadFragmentInformation? nextInBox;
	DeadFragmentInformation? previousInBox;
};

CSS Layout API 🚀

*intrinsicSizes

dictionary IntrinsicSizesResultOptions {
	double maxContentSize;
	double minContentSize;
};

*layout

dictionary FragmentResultOptions {
	double inlineSize = 0;
	double blockSize = 0;
	double autoBlockSize = 0;
	sequence<LayoutFragment> childFragments = [];
	any data = null;
	BreakTokenOptions breakToken = null;
};

/* CSS */
.layout-example {
	--foo: 5;
	display: layout(my-layout);
}

.layout-example .child {
	--bar: 200px;
}

// JavaScript
window.layoutWorklet.addModule('my-layout.js');

Демо masonry

Идеи

• masonry
• subgrid
• container query
• анимация переходов layout
• line by line layout (круглые экраны)
• aspect ratio layout

CSS Animation Worklet API

Web Animations

// JavaScript
const element = document.querySelector('.my-element');
element.animate([
	{'--some-color': 'red',  'opacity': 0 },
	{'--some-color': 'blue', 'opacity': 1 },
], {
	direction: 'alternate',
	duration: 5000,
	iterations: 10, // Infinity
});

Polyfill

// worklet.js
registerAnimator(
	'scroll-position-animator',
	class {
		constructor(options) {
			this.options = options;
		}

		animate(currentTime, effect) {
			effect.localTime = currentTime;
		}
	});

// app.js

const frames = [
	new KeyframeEffect(
		document.querySelector('.scroll-to-top'),
		[
			{ 'transform': 'translateY(100px)', 'opacity': '0' },
			{ 'transform': 'translateY(0)', 'opacity': '1' }
		],
		{ duration: 10, iterations: 1, fill: 'both' }
	)
];

// app.js

const timeline = new ScrollTimeline({
	timeRange: 10,
	scrollSource: document.querySelector('.page-wrapper'),
	orientation: 'vertical',
	startScrollOffset: '200px',
	endScrollOffset: '300px',
});

// app.js

CSS.animationWorklet.addModule('worklet.js').then(() => {
	const animation = new WorkletAnimation(
		'scroll-position-animator',
		frames,
		timeline
	);
	animation.play();
});

Полифил anim-worklet

Демо scroll-animation

Демо parallax-animation

Где использовать?

• Анимации, привязанные к скроллу.
• Свои timing-функции для анимаций.
• Синхронизация анимаций.
• Отслеживание позиции скролла.

Font Metrics API

const element = document.querySelector('.my-element');
	document.measureElement(element);

interface FontMetrics {
	double width;
	sequence<double> advances;
	double boundingBoxLeft;
	double boundingBoxRight;
	double height;
	double emHeightAscent;
	double emHeightDescent;
	double boundingBoxAscent;
	double boundingBoxDescent;
	double fontBoundingBoxAscent;
	double fontBoundingBoxDescent;
	Baseline dominantBaseline;
	sequence<Baseline> baselines;
	sequence<Font> fonts;
};

Почему Houdini хорош?

1. Производительность;
2. Удобство использования;
3. Возможность написания полифилов для CSS;
4. Меньше различий между браузерами;
5. Полный контроль.

Недостатки Houdini

1. Еще несколько спецификаций, которых нужно долго ждать;
2. Не решает проблему поддержки старых браузеров;
3. Для эффективной разработки нужно еще больше знаний;
4. Асинхронная природа Worklets — моргание стилей.

Is Houdini ready yet‽

DasSurma

GoogleChromeLabs

houdini.glitch.me

css-houdini.rocks

Демо от Виталия Боброва

Спасибо за внимание!

@dark_mefody
n.a.dubko@gmail.com