Автор оригинала: Brett Jephson.
Фото Рондака родной Флок Флоклонский художник на Unsplash
Вы когда-нибудь хотели по-настоящему углубиться в то, что делает CSS? Вы когда-нибудь хотели настроить, как браузер оказывает фоном или маске-образ? Вероятно, нет, но есть веские причины, по которым вы можете захотеть.
CSS Paint API будет доступен в предстоящем выпуске Chrome 65 [1] Отказ Это первый пример спецификации, разработанного CSS-Tag Houdini Целевая группа появляясь в производственной версии основного браузера.
В этой статье я надеюсь дать краткий обзор того, что такое CSS Paint API, как мы можем использовать его, и какие проблемы он предназначен для решения.
CSS Houdini Group
CSS Houdini Group дала себе интересную цель – открыть замкнутую коробку, которая является стилей и макетом в Интернете. Другими словами, чтобы раскрыть трюки за магией, который является рендерингом браузера.
CSS Paint API является одним из нескольких API, которые они развиваются. Некоторые по-прежнему по-прежнему черновики, некоторые едва и идеи, но все они относятся к разным частям конвейера рендеринга браузера ( Houdini Specs ).
CSS Paint API
В специфицированном виде на API CSS Paint API, у нас теперь есть контекст 2D-рендеринга, который мы можем программно покрасить с JavaScript и применять к любому свойству CSS, которое принимает изображение в качестве значения, то есть фоновое изображение, пограничное изображение, маска-изображение.
Чтобы создать этот контекст рендеринга, мы создаем рабочую точку краски. Рабочая точка аналогична работнику, в котором он работает параллельно главной нити, но он имеет очень ограниченный функционал для дальнейшей оптимизации.
Давайте посмотрим, как это работает на практике.
Анатомия краской
У самой простой простейшей рабочей подлеткой краски является классом с одним методом – действие выполнится рабочая таблица. В случае CSS Paint API, единственное действие – это краску.
Так, например, чтобы нарисовать красный фон наполнить элемент, у нас будет файл краски-красного файла.
/**
* The Paint Worklet is a simple class that must provide a paint method.
* This is the action the worklet does.
**/
class RedFillPaintWorklet {
/**
* @param ctx - 2D Rendering Context
* @pararm geom - dimensions (width, height) of the element
**/
paint(ctx, geom) {
// We can draw the context using most of the Canvas context apis
// e.g. fill, stroke, rect, arc, etc.
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, geom.width, geom.height);
}
}
// We then register the paint worklet. This makes it available in CSS.
registerPaint('red-fill', RedFillPaintWorklet);
2D-контекст рендеринга очень похож на CanvasrenderingContext2D , хотя это упрощенная версия этого API. Согласно Спец , Это означает, что нет Canvashitregion, canvasimagedata, canvasuserinterface, canvastext или canvastextdrawingstyles apis. Другими словами, нет текста, нет зоны попадания или прямоугольника фокусировки, а не управление PER-PIXEL.
Чтобы использовать рабочую табличку, мы загружаем его и используем Краска Функция в нашей таблице стилей:
Приведенный выше пример очень прост. Он просто заполняет полные размеры элемента с твердым красным прямоугольником. Это эквивалентно: Фон: красный; Отказ
А также 2D-контекст рендеринга и размеры элемента, вы можете пройти еще несколько аргументов функции краски.
class FillPaintWorklet {
// Register input properties to make them available to the paint method.
static get inputProperties() { return ['--fill-colour']; }
paint(ctx, geom, properties) {
const colour = properties.get('--fill-colour');
ctx.fillStyle = colour;
ctx.fillRect(0, 0, geom.width, geom.height);
}
}
registerPaint('colour-fill', ColourFillPaintWorklet);
Интересно, что у вас есть контекст холста, который вы можете нарисовать любые 2D-изображения, в котором вы хотите, именно интегрировано с CSS.
Например, у вас может быть одна рабочая подставка для краски и изменение переменных CSS, чтобы отрегулировать ее. Вы также можете использовать несколько рабочих элементов краски и несколько фоновых изображений для создания чего-то более сложного. Мы можем использовать предыдущую рабочую поддоном краски несколькими способами:
Сценарии использования
Taskforce Houdini предложил несколько случаев использования для своих API, в том числе:
- CSS Polyfills.
- Режущий край/эксперименты.
- Повышение производительности и упрощение DOM.
Примеры
Уже есть несколько действительно хороших примеров в сети того, что CSS Paint API может и сможет сделать.
Конический градиент Polyfill – Хороший пример того, где API может заменить JavaScript Polyfills неподдерживаемых функций CSS. Показав главной поток, производительность должна быть значительно улучшена.
Пульсация кнопки – хороший пример упрощения DOM. Там, где этот эффект обычно создается с элементами DOM Mutliple или, по меньшей мере, некоторых псевдоэлементов, эффект теперь может быть достигнут в одном элементе DOM и, снова отображаемый в рабочей таблице и от основной нити.
Кнопка PARALLAX – аналогична эффекту кнопки пульсации, используя некоторые простые эффекты холста и интеграцию их с переменными CSS для взаимодействия пользователя, мы можем создать некоторые интересные эффекты в одном элементе DOM.
class ParallaxPainter {
static get inputProperties() { return ['--x-position']; }
constructor() {
this.layers = [
{x: -0.1, y: 0.5, size: 0.3, speed: 0.15, colour: '#838C8D'},
{x: 0.1, y: 0.5, size: 0.25, speed: 0.20, colour: '#9EA5A7'},
{x: 0.8, y: 0.5, size: 0.3, speed: 0.15, colour: '#838C8D'},
{x: 0.1, y: 1.0, size: 0.6, speed: 0.95, colour: '#DEE1E3'}
];
}
paint(ctx, geom, properties) {
const gradient = ctx.createLinearGradient(0, 0, 0, geom.height);
gradient.addColorStop(0, '#444B4D');
gradient.addColorStop(0.5, '#545B5D');
gradient.addColorStop(0.501, '#838C8D');
gradient.addColorStop(0.75, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, geom.width, geom.height);
const xPosition = parseInt(properties.get('--x-position').toString());
this.layers.forEach(item => this.drawMountain(ctx, geom, xPosition, item));
}
drawMountain(ctx, geom, xPosition, {x, y, size, speed, colour}) {
const xModifier = xPosition * speed;
x = x * geom.width;
y = y * geom.height;
size = size * geom.width;
ctx.fillStyle = colour;
ctx.beginPath();
ctx.moveTo(x + xModifier, y - size);
ctx.lineTo(x + xModifier + size, y);
ctx.lineTo(x + xModifier - size, y);
ctx.lineTo(x + xModifier, y - size);
ctx.closePath();
ctx.fill();
}
}
registerPaint('parallax-paint', ParallaxPainter);
Этот эффект параллакса может использоваться с кнопкой и параллаксом, управляемым из движения мыши, обновляя --x-Position Переменная.
И вот конечный результат:
Ограничения
По мере того, как эта статья о потенциале API, которая не совсем достигла производства в одном крупном браузере, вы можете представить, что поддержка браузера ограничена.
Вы можете следить за прогрессом поддержки браузера для API CSS Paint API и остальной части семейства API Houdini в HTTPS://ishoudinireadyyet.com/.
Команда Chrome определенно, кажется, ведет путь, но какое-то развитие происходит в Firefox, и есть намерение от Safari, Chrome и Firefox для разработки нескольких API, в том числе: CSS набрал OM , Макет API и Анимационные рабочие места Отказ
Свойства CSS и значения API будет действительно дополнить и улучшать API CSS Paint. Это позволит набрать напечатанные аргументы (изображение, цвет, длину и т. Д.), которые будут переданы функции краски, что означает, что можно сделать намного больше.
Заключение
CSS Paint API находится в первые дни. Чем больше мы видим увеличение поддержки браузера, и тем более другие спецификации Houdini начинают появляться в современных браузерах, тем больше мы увидим потенциал этих API для ускорения разработки CSS и улучшения производительности CSS, и чем больше будет больше доступа и управлять по трубопроводом рендеринга браузера для экспериментальных и творческих целей.
Это начало захватывающего путешествия для тех, кто заинтересован в том, как браузеры оказывают веб-страницы, которые они разрабатывают и разрабатывают.
дальнейшее чтение
- Случайная статья Magazine дает пробежку различных API-APIS Houdini
- У Винсента де Оливера есть несколько отличных экспериментов с использованием различных API на Houdini ( и это означает, что они в основном работают только в Chrome Canary )
- Houdini API поддерживает прогресс
- Chrome 65 Выпуск Информация о CSS Paint API
В то время была написана статья, в середине февраля 2018 года Chrome 65 был в бета-версии и должен выйти в марте. ↩︎.