Go to content

CSS Houdini - from CSS variables to JavaScript and back - Serg Hospodarets

CSS Custom Properties are supported in all the major browsers and provide the ability to use the native CSS variables power, but still, have some restrictions- they are not animatable and cannot be used everywhere. What if we have an ability to register the new CSS Custom property and set the behavior for it- from acceptable values to the inheritance behavior etc.? It can be done with the new CSS Houdini spec “CSS Properties and Values API”, which already is implemented in some browsers. Using this API, developers can easily register new CSS Custom Properties for the browser and it will be processed absolutely as any other property with the same performance and abilities. This will mostly solve the problem of polyfilling the new properties and open the way to animate CSS Custom Properties. Using this and other Houdini specs Chrome shipped the Sticky Header and CSS Scroll Snap Points, which shows how powerful and performant they are. All this brings CSS to the next level and is one of the important steps to the bright future with CSS Houdini. (the talk will be covered by a number of demos and examples). Target audience: Middle and Expert Front-End developers Takeaways The auditory will know how to use CSS custom properties (aka native CSS variables) and the current state of the game. Also, they will learn how to register new CSS Custome properties for the browser with JavaScript and animate them using CSS or Web (native JavaScript) Animations. Prerequisite knowledge Middle CSS and JavaScript knowledge should be enough

June 12, 2017