Использование возможностей некоторых крутых новых API для раскрытия возможностей Интернета
Что такое Houdini и почему меня это должно волновать?
Целевая группа CSS-TAG Houdini работает над определением спецификаций, которые обеспечат расширяемость CSS. Это даст разработчикам доступ к конвейеру рендеринга CSS в браузере. Это будущее CSS. Есть надежда, что как только Houdini начнет набирать обороты и станет использоваться в большем количестве браузеров, веб-разработчики получат доступ к некоторым API более низкого уровня для создания новых правил стилей. Это может быть что-то простое с использованием CSS Paint API, как в примере, который я показываю сегодня, но в конечном итоге это позволит изменить некоторые фундаментальные свойства сети, которые не менялись в течение длительного времени. Разработчики не только получат более детальный контроль над этапами конвейера рендеринга, но и должны быть производительными. Итак, давайте посмотрим, что вы можете сделать сегодня.
К чему Houdini предоставит мне доступ?
Существует большой потенциал для более сложных веб-стилей при сохранении производительности. Это дает более низкоуровневый контроль над этапами рендеринга, которые выполняются при отображении веб-страницы, и может предоставить новые возможности в Интернете, не дожидаясь поддержки браузера. Возможно, в будущем можно будет определить новые макеты, которые сегодня могут потребовать больших усилий, используя комбинацию нелогичного позиционирования и фреймворков.
Разрешение браузеру обрабатывать задачи, связанные с CSS, будет означать более производительное выполнение. Глядя на направление повышения производительности рендеринга, Mozilla работает над Servo, который использует графический процессор для выполнения задач рендеринга и, таким образом, освобождает ЦП для выполнения скриптов.
Пример использования CSS Paint API
Я сделал простой пример, чтобы показать, как можно использовать CSS Paint API для создания маски squircle.
Если вы что-то делали с помощью Canvas API, у вас уже есть преимущество. Чтобы создать ворклет, мы создаем класс JavaScript с именем squircle. Затем мы можем определить функцию рисования, которая принимает контекст холста, размеры элемента и любые другие свойства, которые мы можем захотеть использовать.
Наконец, мы вызываем registerPaint() с именем и классом, который мы только что создали. Это позволяет нам использовать его в CSS с paint(squircle) и может использоваться везде, где мы обычно используем url() в CSS.
Иконки имеют класс CSS, который использует свойство mask-image для маскировки фонового изображения. Спасибо https://picsum.photos/ за простое в использовании изображение lorem ipsum.
Проверить поддержку браузера можно с помощью простой проверки:
Точно так же с CSS мы можем использовать правило @supports, чтобы проверить, можем ли мы использовать наш ворклет рисования или нам следует просто вернуться к другому методу.
Взгляните на исходный код, он очень краток и является простым способом начать работу. Также доступна демоверсия, не забудьте использовать браузер, поддерживающий Paint API.
Как сегодня можно использовать Houdini, будет ли он работать в моем браузере?
Если ваш браузер Google Chrome, то, вероятно. Houdini находится в стадии разработки, поэтому браузеры все еще решают, как приблизиться к стандартам.
Поддержка браузера почти отсутствует, но это не все плохие новости. По состоянию на ноябрь 2018 года Chrome и Opera лучше всего поддерживают API CSS Paint и CSS Typed Object Model. Chrome Canary — лучший вариант для разработки, так как команда Google Chrome очень быстро реализует проекты стандартов W3C, в то время как другие поставщики, похоже, ждут стабилизации стандартов.
Apple работает над API Paint для Safari, а Mozilla сообщила о намерении реализовать некоторые API в Firefox.
Лучший способ узнать, что делает каждый браузер, проверить https://ishoudinireadyyet.com/ от Surma. Это простая для оценки матрица, показывающая поддержку основных браузеров, и она регулярно обновляется.
Стоит ли мне его использовать?
Я не могу рекомендовать использовать API в продакшене. С этим очень здорово повозиться, однако на https://developers.google.com/web/ есть много отличных материалов, в которых более подробно рассматриваются некоторые API. Как только поддержка браузера улучшится, я думаю, что Houdini может быть полезен для повышения производительности фреймворков и более низкоуровневой оптимизации. Возможности действительно только открываются, и трудно предсказать, что может быть создано, пока у разработчиков не будет больше времени (и причин), чтобы поиграть с этим.
