Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

When I came across a video about introducing CSS Houdini, I immediately decided to temporarily stop typing and collect information coding to experience the unprecedented pleasure of Houdini breaking free of CSS.

CSS Houdini provides a series of apis for browser parsing processes. With these apis, developers can call on the CSS engine to implement more and more exciting styles.

I’m going to write Hello Houdini.

The preparatory work

  • Create a folder as the project directory
  • Create an index. HTML, style. CSS and vars.js folder under the folder

CSS properties and values API

What we’re going to demonstrate today is an easy way to get started. Define a custom property. Using the Properties and Values API, developers can explicitly define CSS Properties that support property type checking, default Values, and Properties that inherit or don’t inherit their Values.

The HTML file

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="stylesheet" href="style.css">
    <title>Houdini</title>
</head>
<body>
    <div class="container"></div>
    <script src="vars.js"></script>
</body>
</html>
Copy the code

In the HTML file, define a div tag for easy observation, give a style container, and then use the style.css style sheet and vars.js to customize some

vars.js

CSS.registerProperty({
    name: '--stop-color'.syntax: '<color>'.initialValue: 'orangered'.inherits: false,})Copy the code

Pass an object as a parameter to css. registerProperty, the object

An attribute name prefixed with –, such as –example-name, denotes a custom attribute. The value of the attribute is obtained through the var() function.

style.css

.container{
    height: 600px;
    width: 600px;
    background: linear-gradient(yellow, var(--stop-color));
    transition: --stop-color 1s;
}

.container:hover{
    --stop-color:blue
}
Copy the code

Results the following

The code is not difficult, and I’m sure you’ll understand it at first. This is just the beginning, but as we move forward we hope to share more about Houdini.