Кроссбраузерные программы рисования и Houdini.how

Улучшить свой CSS с помощью инструментов рисования Houdini можно всего за несколько кликов.

Una Kravets

CSS Houdini — это общий термин, описывающий серию низкоуровневых API-интерфейсов браузера, которые дают разработчикам гораздо больше контроля над стилями, которые они пишут.

Houdini обеспечивает более семантический CSS с помощью модели типизированных объектов . Разработчики могут определять расширенные пользовательские свойства CSS с синтаксисом, значениями по умолчанию и наследованием через API свойств и значений .

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

Понимание рабочих модулей Houdini

Рабочие модули Houdini — это инструкции браузера, которые выполняются вне основного потока и могут вызываться при необходимости. Рабочие модули позволяют вам писать модульный CSS для выполнения конкретных задач, а для импорта и регистрации требуется одна строка JavaScript. Подобно сервис-воркерам в стиле CSS, рабочие программы Houdini регистрируются в вашем приложении, и после регистрации их можно использовать в CSS по имени.

Записать файл ворлета Зарегистрировать модуль ворлета ( CSS.paintWorklet.addModule(workletURL) ) Использовать ворлет ( background: paint(confetti) )

Реализация собственных функций с помощью CSS Painting API

API рисования CSS — это пример такого рабочего модуля (рабочего модуля Paint), который позволяет разработчикам определять пользовательские функции рисования, подобные холсту, которые можно использовать непосредственно в CSS в качестве фона, границ, масок и т. д. Существует целый мир возможностей использования CSS Paint в ваших собственных пользовательских интерфейсах.

Например, вместо того, чтобы ждать, пока браузер реализует функцию наклонных границ, вы можете написать свой собственный рабочий файл Paint или использовать существующий опубликованный рабочий модуль. Затем вместо использования border-radius примените этот ворлет к границам и обрезке.

В приведенном выше примере для достижения этого результата используется одна и та же программа рисования с разными аргументами (см. код ниже). Демо о глюке .

.angled {
  --corner-radius: 15 0 0 0;
  --paint-color: #6200ee;
  --stroke-weight: 0;

  /* Mask every angled button with fill mode */
  -webkit-mask: paint(angled-corners, filled);
}

.outline {
  --stroke-weight: 1;

  /* Paint outline */
  border-image: paint(angled-corners, outlined) 0 fill !important;
}

CSS Painting API в настоящее время является одним из наиболее поддерживаемых API Houdini, его спецификация является кандидатской рекомендацией W3C. В настоящее время он включен во всех браузерах на базе Chromium, частично поддерживается в Safari и рассматривается для Firefox.

API CSS Painting в настоящее время поддерживается в браузерах на базе Chromium.

Но даже без полной поддержки браузера вы все равно можете проявить творческий подход с помощью API Houdini Paint и увидеть, как ваши стили работают во всех современных браузерах с помощью CSS Paint Polyfill . И чтобы продемонстрировать несколько уникальных реализаций, а также предоставить библиотеку ресурсов и рабочих листов, моя команда создала houdini.how .

Гудини.как

Скриншот с домашней страницы Houdini.how .

Houdini.how — это библиотека и справочник по рабочим модулям и ресурсам Houdini. Он предоставляет все, что вам нужно знать о CSS Houdini: поддержку браузера, обзор различных API-интерфейсов, информацию об использовании , дополнительные ресурсы и примеры рабочих программ с живой заливкой. Каждый пример на Houdini.how поддерживается CSS Paint API, что означает, что каждый из них работает во всех современных браузерах. Дайте ему шанс!

Использование Гудини

Рабочие программы Houdini необходимо запускать либо через локальный сервер, либо по протоколу HTTPS в рабочей среде. Чтобы работать с рабочимлетом Houdini, вам необходимо либо установить его локально, либо использовать сеть доставки контента (CDN), например unpkg, для обслуживания файлов. Затем вам нужно будет зарегистрировать ворлет локально.

Есть несколько способов включить витрины Houdini.how в ваши собственные веб-проекты. Их можно либо использовать через CDN для создания прототипов, либо вы можете управлять рабочими модулями самостоятельно с помощью модулей npm. В любом случае вам также понадобится включить CSS Paint Polyfill, чтобы обеспечить кросс-браузерную совместимость.

1. Прототипирование с помощью CDN

При регистрации из unpkg вы можете напрямую ссылаться на файл worklet.js без необходимости локальной установки ворлета. Unpkg разрешит worklet.js как основной скрипт, или вы можете указать его самостоятельно. Unpkg не вызовет проблем с CORS, поскольку он обслуживается через HTTPS.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

Обратите внимание, что при этом не регистрируются пользовательские свойства для синтаксиса и резервных значений. Вместо этого у каждого из них есть резервные значения, встроенные в рабочий лист.

Чтобы дополнительно зарегистрировать пользовательские свойства, включите также файл Properties.js.

<script src="https://unpkg.com/<package-name>/properties.js"></script>

Чтобы включить CSS Paint Polyfill в unpkg:

<script src="https://unpkg.com/css-paint-polyfill"></script>

2. Управление рабочими листами через NPM

Установите ваш ворлет из npm:

npm install <package-name>
npm install css-paint-polyfill

Импорт этого пакета не приводит к автоматическому внедрению программы рисования. Чтобы установить ворлет, вам необходимо сгенерировать URL-адрес, который соответствует файлу worklet.js пакета, и зарегистрировать его. Вы делаете это с помощью:

CSS.paintWorklet.addModule(..file-path/worklet.js)

Имя пакета npm и ссылку можно найти на каждой карточке ворлета.

Вам также потребуется включить CSS Paint Polyfill через скрипт или импортировать его напрямую, как если бы вы использовали фреймворк или сборщик.

Вот пример того, как использовать Houdini с полифилом Paint в современных сборщиках:

import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';

CSS.paintWorklet.addModule(workletURL);

Примечание. Более подробные инструкции для каждого комплекта см. на странице использования Houdini.how.

Способствовать

Теперь, когда вы поигрались с некоторыми образцами Houdini, ваша очередь добавить свои собственные! Houdini.how сам не размещает никаких рабочих модулей, а вместо этого демонстрирует работу сообщества. Если у вас есть работа или ресурс, который вы хотели бы отправить, посетите репозиторий GitHub с рекомендациями по участию. Нам бы хотелось посмотреть, что у вас получится!