Using CSS Houdini with Progressive Enhancement & Final Thoughts
Tags: javascript, webdev, css, tutorial
Published: 2020-07-22 05:46:50

<small>This post has been [originally published on Smashing Magazine](https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/) and I decided to split it into parts to make it more digestible. This is the last part in the series. If you've followed this series up to this point, thank you and I hope you found it useful and insightful!</small>

<hr/>

<h2>Houdini And Progressive Enhancement</h2>
<p>Even though CSS Houdini doesn’t have optimal browser support yet, it can be used today with progressive enhancement
    in mind. If you are unfamiliar with Progressive enhancement, it would be worth to check out <a
        href="https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/">this handy
        article</a> which explains it really well. If you decide on implementing Houdini in your project today, there
    are few things to keep in mind:</p>
<ul>
    <li><strong>Use feature detection to prevent errors.</strong><br>Each Houdini API and Worklet offers a simple way of
        checking if it’s available in the browser. Use feature detection to apply Houdini enhancements only to browsers
        that support it and avoid errors.</li>
    <li><strong>Use it for presentation and visual enhancement only.</strong><br>Users that are browsing a website on a
        browser that doesn’t yet support Houdini should have access to the content and core functionality of the
        website. User experience and the content presentation shouldn’t depend on Houdini features and should have a
        reliable fallback.</li>
    <li><strong>Make use of a standard CSS fallback.</strong><br>For example, regular CSS Custom Properties can be used
        as a fallback for styles defined using Custom Properties &amp; Values API.</li>
</ul>
<p>Focus on developing a performant and reliable website user experience first and then use Houdini features for
    decorative purposes as a progressive enhancement.</p>
<h2>Conclusion</h2>
<p>Houdini APIs will finally enable developers to keep the JavaScript code used for style manipulation and decoration
    closer to the browser’s rendering pipeline, resulting in better performance and stability. By allowing developers to
    hook into the browser rendering process, they will be able to develop various CSS polyfills that can be easily
    shared, implemented and, potentially, added to CSS specification itself. Houdini will also make developers and
    designers less constrained by the CSS limitations when working on styling, layouts, and animations, resulting in new
    delightful web experiences.</p>
<p>CSS Houdini features can be added to projects today, but strictly with progressive enhancement in mind. This will
    enable browsers that do not support Houdini features to render the website without errors and offer optimal user
    experience.</p>
<p>It’s going to be exciting to watch what the developer community will come up with as Houdini gains traction and
    better browser support. Here are some awesome examples of Houdini API experiments from the community:</p>
<ul>
    <li><a href="https://css-houdini.rocks/">CSS Houdini Experiments</a></li>
    <li><a href="https://houdini.glitch.me/">Interactive Introduction to CSS Houdini</a></li>
    <li><a href="https://googlechromelabs.github.io/houdini-samples/">Houdini Samples by Google Chrome Labs</a></li>
</ul>
<h3>References</h3>
<ul>
    <li><a href="https://drafts.css-houdini.org/">W3C Houdini Specification Drafts</a></li>
    <li><a href="https://www.youtube.com/watch?v=lK3OiJvwgSc">State of Houdini (Chrome Dev Summit 2018)</a></li>
    <li><a href="https://developers.google.com/web/updates/2018/10/animation-worklet">Houdini’s Animation Worklet -
            Google Developers</a></li>
    <li><a href="https://houdini.glitch.me/">Interactive Introduction to CSS Houdini</a></li>
</ul>

<hr/>
These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

<a href="https://www.buymeacoffee.com/ubnZ8GgDJ" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.