Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "sample analysis of CSS custom attributes", which is easy to understand and clear, hoping to help you solve your doubts. Let the editor lead you to study and study the "sample analysis of CSS custom attributes" this article.

Compatibility

The first question is: what is the use of CSS custom property performance? The information obtained from Can I use shows that the latest versions of major browsers except Edge already support this feature, and Edge will also support this attribute.

This shows that the CSS custom property can now be used in real projects, and developers will soon rely heavily on this feature. But please check Postcss's support for CSS custom properties in the appendix to this article before using it for compatibility.

Set a value, any value is fine

So. What are custom properties? To put it simply, it is a CSS attribute that developers can name and use independently. When dealing with attributes such as color and position, browsers need to receive specific attribute values, while custom attributes are meaningless until developers assign them attribute values. So how do you assign values to CSS custom properties? This is no different from habit:

.foo {

Color: red

-- theme-color: gray

}

The definition of custom elements starts with-- so that browsers can distinguish between custom and native attributes, thus dealing with the two separately. If only a custom element and its attribute value are defined, the browser will not react. As in the code above, the font color of .foo is determined by color, but-- theme-color has no effect on .foo.

You can use the CSS custom element to store any valid CSS attribute value:

.foo {

-- theme-color: blue

-- spacer-width: 8px

-favorite-number: 3

Greeting: "Hey, what's up?"

-- reusable-shadow: 0 3px 1px-2px rgba (0,0,0.85)

}

Use

If custom properties can only be used to set values, that is too useless. At the very least, browsers have to be able to get their property values.

You can do this by using the var () method:

.button {

Background-color: var (--theme-color)

}

In the following code, we assign the background-color property value of .button to the value of-- theme-color. This example doesn't seem like a big deal for custom attributes, but it's a hard-coded case. Do you realize that the property value of theme-color can be used on any selector and attribute? This is awesome.

.button {

Background-color: var (--theme-color)

}

.title {

Color: var (--theme-color)

}

.image-grid > .image {

Border-color: var (--theme-color)

}

Default value

What if the developer has not defined the variable-- theme-color? var () can accept the second parameter as the default:

.button {

Background-color: var (--theme-color, gray)

}

Note: if you want to use another custom attribute as the default, the syntax should be background-color: var (--theme-color, var (--fallback-color))

It is a good habit to always pass in a default value when passing parameters, especially when building web components. In order for your page to display properly on browsers that don't support custom attributes, don't forget to add compatible code:

.button {

Background-color: gray

Background-color: var (--theme-color, gray)

}

Scope and cascading

When do you want to define these attributes? Before using it? Custom properties follow the standard scope and cascading rules, developers according to the usual habits on it!

You may want to set-- theme-color as a global variable, which is available everywhere. The easiest way is to use: root pseudo element:

: root {

-- theme-color: gray

}

After this definition, theme-color can be used for buttons, captions, picture grids and even the entire document.

But what if you want different modules to use different-- theme-color values? The same as initializing custom attributes, you only need to reassign the attributes in the scope of the module, and the new colors will take effect in different modules, without the need for developers to reset the properties that use-- theme-color one by one.

Section.about {

-- theme-color: darkblue

}

Section.contacts {

-- theme-color: darkred

}

Section.news {

-- theme-color: teal

}

Of course, you can also define complex selector rules that apply specific property values:

Section.news > .sidenote {

-- theme-color: gray

}

The above is all the content of the article "sample Analysis of CSS Custom attributes". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.