{"id":16902,"date":"2019-09-09T08:02:31","date_gmt":"2019-09-09T06:02:31","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=16902"},"modified":"2025-08-21T07:09:07","modified_gmt":"2025-08-21T05:09:07","slug":"houdini-future-of-css","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/","title":{"rendered":"Houdini and the Future of CSS [State of the Web]"},"content":{"rendered":"<p>CSS is the styling language used to define the appearance of web contents. As web developers we rely on the existing implementation of CSS features across major browsers. Sometimes we face constraints that come with it, when a feature cannot be used in production because not every browser supports it. But with CSS Houdini this is about to change. Houdini&#8217;s goal is to enable web developers to <strong>extend the capabilities of CSS<\/strong> by providing APIs that make it possible to create <strong>custom CSS features<\/strong> and <strong>modify the browser rendering pipeline<\/strong>.<!--more--><\/p>\n<p>Houdini is a task force which consists of engineers from Google, Mozilla, Apple, Microsoft and others who work together on creating specification drafts that will be standardised by the W3C. These specifications define several APIs which contribute to the goal of making CSS more extensible. These APIs are usually referred to when spoken of Houdini.<\/p>\n<p>This article will give you a brief overview of the Houdini specifications and their goal together with the current state of development.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Houdini-Who\" >Houdini Who?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#The-Specs\" >The Specs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Web-Worklets\" >Web Worklets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#CSS-Paint-API\" >CSS Paint API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#CSS-Layout-API\" >CSS Layout API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#CSS-Animation-API\" >CSS Animation API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#CSS-Typed-OM\" >CSS Typed OM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Properties-and-Values-API\" >Properties and Values API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#CSS-Parser-API\" >CSS Parser API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Whats-Next\" >What&#8217;s Next?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Further-Resources\" >Further Resources<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Image-sources\" >Image sources<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#Read-on\" >Read on<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Houdini-Who\"><\/span>Houdini Who?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we begin with the technical part, let&#8217;s take a brief look into the historical background. Harry Houdini (1874-1926) was a great american-hungarian illusionist and stunt performer, known best for his escape acts. He became famous for his handcuff-escapes including chains, straight jackets and escapes from under water while holding his breath.<\/p>\n<p>The CSS Houdini Task Force took up his name, as their goal is to create a technology that enables developers to explore and understand the &#8222;magic&#8220; behind CSS styling and layouting algorithms.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17015\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini_0-1.jpg\" alt=\"\" width=\"255\" height=\"380\" \/>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17014\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini_2.jpg\" alt=\"\" width=\"253\" height=\"380\" \/>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17013\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini_1.jpg\" alt=\"\" width=\"253\" height=\"380\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"The-Specs\"><\/span>The Specs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Houdini specifications consist of several browser APIs that are shipped separately, where each one in its own right contributes to making CSS more extensible. Whereas some APIs have already shipped in some of the modern browsers, others are more of a <em>summary of interesting ideas<\/em>. But all of them help us gain perspective of what the future of CSS will look like and the general direction in which the web platform is developing.<\/p>\n<p>Unfortunately Houdini still is in early stages of development. At the time of writing this article the APIs are available mainly in Chrome and other Chromium-based browsers including Opera and soon Microsoft Edge as well. Other browser vendors are yet to implement Houdini.\u00a0ishoudinireadyyet offers a handy overview of the development stages of the Houdini API in major modern browsers.<\/p>\n<p>The following sections cover the core features of each of the Houdini APIs with a brief description.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Web-Worklets\"><\/span>Web Worklets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/worklets\/\" target=\"_blank\" rel=\"noopener\">Web Worklets<\/a> are not very useful alone, they are more of a technical concept that is necessary in order to create hooks inside of the browser&#8217;s rendering engine and provide custom functionality. Worklets are JavaScript execution environments that can be spawned across multiple threads and run concurrently to the main thread. This allows for better performance and isolation.<\/p>\n<p>Web Worklets are similar to Web Workers, however they are more lightweight. Which they <em>must be<\/em> considering that in some cases they have to be executed <em>every single frame<\/em>. Web Worklets have a much <em>smaller scope<\/em>, which is usually limited to the exact purpose of the specific worklet type. In order for the browser to be able to execute the worklet code, it must be registered on the JavaScript main thread. Once the worklet is registered, it can be called by the browser whenever it parses a CSS property that uses this worklet. Then the rendering engine will trigger the appropriate worklet thread. The browser also decides how many worklet threads are spawned in order to optimize the resources depending on their usage.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Paint-API\"><\/span>CSS Paint API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/css-paint-api\/\" target=\"_blank\" rel=\"noopener\">CSS Paint API<\/a> (a.k.a The Paint Worklet) allows you to programmatically draw anything where CSS expects an <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/image\" target=\"_blank\" rel=\"noopener\">image<\/a>. Similar to loading an image via <code>url()<\/code> it is now possible to <em>generate an image<\/em> using the <code>paint<\/code> function and a paint worklet. For example to draw a custom background image: <code>background-image: paint(customPaint)<\/code>. The paint worklet must provide an algorithm, which defines which graphics will be drawn, using an API similar to the rendering context in HTML Canvas. The browser will run the worklet algorithm whenever it is used in CSS and then render its output for the according elements on the page. The worklet code will be executed independently from the main thread, thus relieving the main thread from having to run these computations and allowing it to handle user input and run other scripts faster.<\/p>\n<p>For a more in-depth introduction and step by step example I recommend reading this <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/01\/paintapi\" target=\"_blank\" rel=\"noopener\">article<\/a> by\u00a0 Surma. The Paint API is very flexible and allows developers to draw practically anything including svg-like graphics, gradients and things like multiple borders (that are not yet supported natively in CSS). Which leads to probably the most exciting feature of Houdini in general: the possibility of efficient &#8222;native&#8220; polyfilling of CSS features, as worklets are being hooked directly into the rendering pipeline.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Layout-API\"><\/span>CSS Layout API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/css-layout-api-1\/\" target=\"_blank\" rel=\"noopener\">Layout API<\/a> (a.k.a Layout Worklet) makes it possible to create custom layouting algorithms that can be applied via the CSS <code>display<\/code> property to an element and its children. The browser will handle the worklet the same way it does with the standard display modes (such as <em>flexbox, css grid <\/em>or <em>table<\/em> mode) however here it will use the algorithm provided by the web developer to determine the position and offset of the element.<\/p>\n<p>Similar to the Paint API, the Layout API also relies on layouting logic being provided via a worklet. The Layout Worklet will be hooked into the layouting stage of the rendering pipeline and called whenever the browser parses a display property which uses this worklet <code>display: layout(myFancyLayout)<\/code>.<\/p>\n<p>Probably the most anticipated example using the Layout API is to create a masonry layout using a worklet, which currently is only possible via (main-thread) JavaScript.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16921 aligncenter\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/mansonry-small.gif\" alt=\"\" width=\"640\" height=\"344\" \/><\/p>\n<p>The example shows the masonry layout <a href=\"https:\/\/googlechromelabs.github.io\/houdini-samples\/layout-worklet\/masonry\/\" target=\"_blank\" rel=\"noopener\">demo<\/a> implementation from GoogleChromeLabs.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Animation-API\"><\/span>CSS Animation API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/css-animationworklet\/\" target=\"_blank\" rel=\"noopener\">Animation API<\/a> (a.k.a Animation Worklet) creates another hook into the rendering pipeline, this time into the compositing step. The Animation API enables developers to implement highly performant animation effects that are tied to user input events such as scrolling. The main goal is to create a method for low-latency visual feedback. The response time is crucial for good user experience, because even a slight delay is perceived by users as slow and janky.<\/p>\n<p>In order to create smooth animations in direct sync with user input the worklet is executed independent from the main thread to make the compositor generate frames at the highest frame rate possible (hopefully 60fps). The Animation API uses the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Animations_API\" target=\"_blank\" rel=\"noopener\">Web Animations API<\/a> to describe the animations&#8216; behaviour.<\/p>\n<p>For an in depth description of the core mechanics of the Animation API I highly recommend reading this <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/10\/animation-worklet\" target=\"_blank\" rel=\"noopener\">article<\/a>. It does a great job in explaining how exactly user input can be translated into animation timeline seamlessly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17020 alignnone\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/scroll-60fps.gif\" alt=\"\" width=\"422\" height=\"264\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Typed-OM\"><\/span>CSS Typed OM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/css-typed-om\/\" target=\"_blank\" rel=\"noopener\">CSS Typed OM<\/a> is a successor of the previous string-based API for querying and modifying CSS properties of an element in JavaScript. As the name suggests the new Typed CSS Object Model exposes the style information, where the values are represented in the form of typed JavaScript objects instead of strings which allows usage with less performance loss due to string manipulation. My colleague Sven Lindauer wrote an <a href=\"https:\/\/www.inovex.de\/blog\/css-typed-object-model\/\" target=\"_blank\" rel=\"noopener\">article<\/a> about the CSS Typed OM where he compared it to the older string-based CSSOM, so head over there for examples.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Properties-and-Values-API\"><\/span>Properties and Values API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>So far CSS variables were kind of like placeholders and could carry only string values. <a href=\"https:\/\/drafts.css-houdini.org\/css-properties-values-api\/\" target=\"_blank\" rel=\"noopener\">The Properties and Values API<\/a> lets us not only specify a custom CSS property but also tell the CSS parser how it should interpret its value using the syntax description with the type of the property whether it is supposed to be inherited by the child elements and its default value. This is a JavaScript API and there is a proposal to include support for a declarative CSS API.<\/p>\n<p>The following code sample illustrates usage of the JavaScript API to register a custom CSS property &#8211;my-color. The custom property can then be used in regular CSS.<\/p>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von jsfiddle.net zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyMDAiIHNyYz0iLy9qc2ZpZGRsZS5uZXQvdnNwZTNhMWcvZW1iZWRkZWQvanMvIiBhbGxvd2Z1bGxzY3JlZW49ImFsbG93ZnVsbHNjcmVlbiIgYWxsb3dwYXltZW50cmVxdWVzdD0iIiBmcmFtZWJvcmRlcj0iMCI+PC9pZnJhbWU+PC9wPg==<\/div><\/div>\n<div class=\"BorlabsCookie\"><div class=\"_brlbs-content-blocker\"> <div class=\"_brlbs-default\"> <p>Klicken Sie auf den unteren Button, um den Inhalt von jsfiddle.net zu laden.<\/p> <p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p> <\/div> <\/div><div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PHA+PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNTAiIHNyYz0iLy9qc2ZpZGRsZS5uZXQvdnNwZTNhMWcvMS9lbWJlZGRlZC9jc3MvIiBhbGxvd2Z1bGxzY3JlZW49ImFsbG93ZnVsbHNjcmVlbiIgYWxsb3dwYXltZW50cmVxdWVzdD0iIiBmcmFtZWJvcmRlcj0iMCI+PC9pZnJhbWU+PC9wPg==<\/div><\/div>\n<p>The most exciting feature of this specification is that it can be used in combination with worklets to create an <em>input parameter<\/em> for the worklet function. In worklets we can query the elements <em>style map <\/em>which contains all computed CSS properties, containing both native and custom CSS properties.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS-Parser-API\"><\/span>CSS Parser API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/drafts.css-houdini.org\/css-parser-api\/\" target=\"_blank\" rel=\"noopener\">CSS Parser API<\/a> will allow web developers to use the browser-internal CSS parser to parse strings containing CSS into a typed JavaScript object representation. Currently the single option to parse strings into CSS and vice versa is through a third-party library. This feature is most interesting in the context of polyfilling, as it will offer significant performance improvements for processing CSS.<\/p>\n<p>Polyfills allow developers to use features, that aren&#8217;t (yet) natively supported by the browsers. A polyfill would modify the stylesheets by replacing the unsupported syntax using analogies that the browser can understand. A polyfill script would query every style definition on a web page found in stylesheets, &lt;style&gt; tag and inline style-attributes, modify these definitions and then insert them back into the DOM. In order for a polyfill to be able to modify the stylesheets they first need to be serialized. Polyfills rely on third-party libraries to parse these string-based style definitions into JavaScript objects.<\/p>\n<p>This is one of the reasons why CSS polyfilling is bound to have poor performance at runtime. In his <a href=\"https:\/\/www.smashingmagazine.com\/2016\/03\/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of\/\" target=\"_blank\" rel=\"noopener\">article<\/a> Philip Walton describes the biggest pains of CSS polyfills in browsers and how Houdini can help improve them. The article is already a couple of years old, but it&#8217;s still highly informative for anyone who wants to gain a deeper understanding of CSS polyfilling in browser and the challenges associated with it.<\/p>\n<p>These were a lot of APIs! But we haven&#8217;t even mentioned Font Metrics or Box Tree API yet\u2014that is because those are in very early stages of development. If you are looking for the newest updates on the spec make sure to visit the <a href=\"https:\/\/drafts.css-houdini.org\" target=\"_blank\" rel=\"noopener\">CSS-TAG Houdini Editors Drafts<\/a> homepage.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Whats-Next\"><\/span>What&#8217;s Next?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We have looked into the CSS Houdini task force and got to know its APIs. Houdini&#8217;s aim is to provide a low level access to CSS processing and the browser rendering pipeline, and by that allowing us to modify and extend CSS functionality. So where does that leave us today?<\/p>\n<p>Some see Houdini as the most exciting development in CSS for its potential to greatly influence the way new features are introduced into CSS by allowing people to invent their own features, adressing many pain points of the CSS we know today.<\/p>\n<p>But still we are not there yet. The APIs are currently just experimental browser features implemented mostly in Chrome and other Chromium-based browsers such as Opera and future versions of Edge. Firefox and Safari have both shown an intent to implement\u00a0them, but it is yet unclear how long it will take them to fully implement the features. It will take a long time for Houdini to become ready for production use.<\/p>\n<p>However having these APIs in Chrome means that we can experiment and try out these features today and I highly encourage everybody to do so. Houdini APIs are very fun to play with and because they are very low level you are most certainly learning a lot about internal browser\u00a0 functionality doing so.<\/p>\n<p>When Houdini becomes available in all browsers, because of its low level nature, you are most likely not going to use these APIs directly when developing a web application. The same way you probably wouldn&#8217;t start building a layouting library from scratch, you are most likely not going to implement a custom layouting system using a Layout Worklet, but instead use an existing one and import it in your project. This is where Houdini will come to use. It will open up great possibilities for libraries and polyfills authors, by allowing them to register custom hooks directly into the rendering pipeline and let the browser take care of these computations independent from the main thread and create polyfills that perform at render engine speed. Houdini will enable web developers to invent brand new CSS features and spread them as installable worklets. The possibilities are almost endless.<\/p>\n<p>I hope this article was helpful and offered some new insights into the extravaganza that is CSS Houdini. You will find additional resources attached below. Please feel free to contact me here or on twitter <a href=\"https:\/\/twitter.com\/tanja_uli\" target=\"_blank\" rel=\"noopener\">@tanja_uli<\/a> if you have any questions or want to share your thoughts on Houdini or simply to say hi.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Further-Resources\"><\/span>Further Resources<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=lK3OiJvwgSc\" target=\"_blank\" rel=\"noopener\">State of Houdini (Chrome Dev Summit 2018)<\/a> talk by Surma<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=GhRE3rML9t4\" target=\"_blank\" rel=\"noopener\">CSS Houdini &amp; The Future of Styling<\/a> by Una Kravets<\/p>\n<p><a href=\"https:\/\/github.com\/nucliweb\/awesome-css-houdini\" target=\"_blank\" rel=\"noopener\">A Curated List of Houdini Resources<\/a> on github<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Image-sources\"><\/span>Image sources<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>[<a href=\"https:\/\/images.app.goo.gl\/AaE6F3GHpBfJMMuu9\" target=\"_blank\" rel=\"noopener\">1<\/a>],[<a href=\"https:\/\/images.app.goo.gl\/WZoLAC9PgqY59nPA9\" target=\"_blank\" rel=\"noopener\">2<\/a>],[<a href=\"https:\/\/images.app.goo.gl\/9u1GYBLJK5FC3JqA6\" target=\"_blank\" rel=\"noopener\">3<\/a>]<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Read-on\"><\/span>Read on<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Find out more about our <a href=\"https:\/\/www.inovex.de\/en\/our-services\/web\/\">web services<\/a> or consider joining us as a <a href=\"https:\/\/www.inovex.de\/de\/karriere\/stellenangebote\/\">web dev<\/a> yourself!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS is the styling language used to define the appearance of web contents. As web developers we rely on the existing implementation of CSS features across major browsers. Sometimes we face constraints that come with it, when a feature cannot be used in production because not every browser supports it. But with CSS Houdini this [&hellip;]<\/p>\n","protected":false},"author":125,"featured_media":17043,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[444],"coauthors":[{"id":125,"display_name":"Tanja Ulianova","user_nicename":"tulianova"}],"class_list":["post-16902","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Houdini and the Future of CSS [State of the Web] - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Houdini&#039;s goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Houdini and the Future of CSS [State of the Web] - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Houdini&#039;s goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-09T06:02:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-21T05:09:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tanja Ulianova\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tanja Ulianova\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Tanja Ulianova\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/\"},\"author\":{\"name\":\"Tanja Ulianova\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/98d5b9bcd58bbb358c500abe8102bf21\"},\"headline\":\"Houdini and the Future of CSS [State of the Web]\",\"datePublished\":\"2019-09-09T06:02:31+00:00\",\"dateModified\":\"2025-08-21T05:09:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/\"},\"wordCount\":2151,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/houdini.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/\",\"name\":\"Houdini and the Future of CSS [State of the Web] - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/houdini.png\",\"datePublished\":\"2019-09-09T06:02:31+00:00\",\"dateModified\":\"2025-08-21T05:09:07+00:00\",\"description\":\"Houdini's goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/houdini.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/houdini.png\",\"width\":1920,\"height\":1080,\"caption\":\"Houdini and the future of CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/houdini-future-of-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Houdini and the Future of CSS [State of the Web]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/98d5b9bcd58bbb358c500abe8102bf21\",\"name\":\"Tanja Ulianova\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g578b5dd6e916dc6018f079fc673d090f\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g\",\"caption\":\"Tanja Ulianova\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/tulianova\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Houdini and the Future of CSS [State of the Web] - inovex GmbH","description":"Houdini's goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/","og_locale":"de_DE","og_type":"article","og_title":"Houdini and the Future of CSS [State of the Web] - inovex GmbH","og_description":"Houdini's goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.","og_url":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2019-09-09T06:02:31+00:00","article_modified_time":"2025-08-21T05:09:07+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png","type":"image\/png"}],"author":"Tanja Ulianova","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Tanja Ulianova","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten","Written by":"Tanja Ulianova"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/"},"author":{"name":"Tanja Ulianova","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/98d5b9bcd58bbb358c500abe8102bf21"},"headline":"Houdini and the Future of CSS [State of the Web]","datePublished":"2019-09-09T06:02:31+00:00","dateModified":"2025-08-21T05:09:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/"},"wordCount":2151,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png","keywords":["Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/","url":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/","name":"Houdini and the Future of CSS [State of the Web] - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png","datePublished":"2019-09-09T06:02:31+00:00","dateModified":"2025-08-21T05:09:07+00:00","description":"Houdini's goal is to enable web developers to extend the capabilities of CSS by providing APIs that make it possible to create custom CSS features and modify the browser rendering pipeline. This article will give you a brief overview of its specifications and goals together with the current state of development.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/08\/houdini.png","width":1920,"height":1080,"caption":"Houdini and the future of CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/houdini-future-of-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Houdini and the Future of CSS [State of the Web]"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/98d5b9bcd58bbb358c500abe8102bf21","name":"Tanja Ulianova","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g578b5dd6e916dc6018f079fc673d090f","url":"https:\/\/secure.gravatar.com\/avatar\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed1df64cee1a86575fb606cb545302f58e255e432dac8f1139eb5ed64c9bbb92?s=96&d=retro&r=g","caption":"Tanja Ulianova"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/tulianova\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/16902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=16902"}],"version-history":[{"count":2,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/16902\/revisions"}],"predecessor-version":[{"id":63287,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/16902\/revisions\/63287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/17043"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=16902"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=16902"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=16902"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=16902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}