Этот пост был Первоначально опубликовано в журнале Smashing И я решил разделить его на части, чтобы сделать его более усваиваемым. Это последняя часть в серии. Если вы следовали этой серии до этого момента, спасибо, и я надеюсь, что вы нашли это полезным и проницательным!
Гудини и прогрессивное улучшение
Несмотря на то, что CSS Houdini еще не обладает оптимальной поддержкой браузера, его можно использовать сегодня с учетом прогрессивного улучшения. Если вы не знакомы с прогрессивным улучшением, это стоит проверить Эта удобная статья что объясняет это очень хорошо. Если вы решите внедрить Houdini в своем проекте сегодня, есть несколько вещей, которые нужно помнить:
- Используйте обнаружение функций, чтобы предотвратить ошибки. Каждый API и рабочие Houdini предлагает простой способ проверить, если он доступен в браузере. Используйте обнаружение функций, чтобы применить усовершенствования Houdini только к браузерам, которые поддерживают его и избегают ошибок.
- Используйте его только для презентации и визуального улучшения. Пользователи, которые просматривают веб -сайт в браузере, который еще не поддерживает Houdini, должны иметь доступ к контенту и основной функциональности веб -сайта. Пользовательский опыт и презентация контента не должны зависеть от функций Houdini и должны иметь надежный отступление.
- Используйте стандартную запасную сторону CSS. Например, регулярные пользовательские свойства CSS могут использоваться в качестве запасного для стилей, определенных с использованием пользовательских свойств и значений API.
Сначала сосредоточьтесь на разработке эффективного и надежного пользователя веб -сайта, а затем используйте функции Houdini для декоративных целей в качестве прогрессивного улучшения.
Вывод
Houdini API, наконец, позволит разработчикам поддерживать код JavaScript, используемый для манипулирования стилем и украшения ближе к конвейеру рендеринга браузера, что приведет к повышению производительности и стабильности. Позволяя разработчикам зацепиться в процесс рендеринга браузера, они смогут разработать различные полифиллы CSS, которые можно легко обмениваться, реализован и, возможно, добавлять в саму спецификацию CSS. Houdini также сделает разработчиков и дизайнеров менее ограниченными ограничениями CSS при работе над стилем, макетами и анимациями, что приведет к новым восхитительным веб -опыту.
Особенности CSS Houdini могут быть добавлены в проекты сегодня, но строго с учетом прогрессивного улучшения. Это позволит браузерам, которые не поддерживают функции Houdini для отображения веб -сайта без ошибок и предлагать оптимальный пользовательский опыт.
Будет интересно наблюдать за тем, что сообщество разработчиков придумает, поскольку Гудини получит тягу и лучшую поддержку браузера. Вот несколько замечательных примеров экспериментов Houdini API из сообщества:
использованная литература
- W3C Houdini Specization Charcts
- Штат Гудини (Chrome Dev Summit 2018)
- Анимационная рабочие Гудини – разработчики Google
- Интерактивное введение в CSS Houdini
Эти статьи подпитываются кофе. Так что, если вам нравится моя работа и нашли ее полезным, подумайте о покупке мне кофе! Я был бы очень признателен.
Спасибо, что нашли время прочитать этот пост. Если вы нашли это полезным, пожалуйста, дайте ему ❤ или 🦄, поделитесь и комментируйте.
Оригинал: “https://dev.to/adrianbdesigns/using-css-houdini-with-progressive-enhancement-final-thoughts-1615”