This will change the web forever!
Web Development is constantly changing, and this time Houdini will change it forever. Developers from Google, Microsoft, Mozilla, Opera, HP, Intel and Apple are working on CSS Houdini which is basically a set of low-level APIs exposing the CSS engine to the developers. This means that now developer can directly tell the browser how to interpret the code, without using the built-in functions. This will change everything.
Currently, this is at its very early stages of development and only the CSS properties has been introduced. This has given power to CSS variables. Instead of declaring variables like this
:root {
--myVariable: 1;
--myVariable: blue;
}
Now the variable can be declared this way.
@properties --myVariable {
syntax: '<number>';
initial-value: 1;
inherits: false;
}
You might have seen something like this in JavaScript
CSS.registerProperty({
name: '--myVariable',
syntax: '<number>',
initialValue: '1',
inherits: false
});
But now all of this will be in CSS.
Looking at these advancements in CSS, I am planning a CSS animations course, here on my blog. It will be on the basics of web animations and so you can proudly display your front-end skills. I have also started a GitHub repository which will have all the code that I have taught here on my blog. I have also added comments in the source codes, which explain the code line by line.
Please do follow me on Blogger and star the repository on GitHub. It means a lot to me.
Additional links:
- My GitHub Repository - https://github.com/Shubhkarman-Singh-Sandhu/Blog-Projects
- More on Houdini
- Is Houdini Ready Yet - https://ishoudinireadyyet.com/
- Houdini: Demystifying CSS - https://developers.google.com/web/updates/2016/05/houdini
- @property: giving superpowers to CSS variables - https://web.dev/at-property/
- Houdini Demo - https://glitch.com/~houdini-gradient-borders
Comments