I haven’t translated for a long time. I saw this article recently
Getting Hardboiled with CSS Custom Properties. I think so. Translate it for you. With all the new CSS features such as Flex, CSS Grid, etc., can we use this idea instead of using preprocessing tools?

Custom Properties is an attractive new CSS feature that is widely supported by modern browsers. But what do we do with outdated browsers that don’t support CSS Custom Properties? Wait for these browsers to die before supporting them, or arm CSS with preprocessing? Or get tough and laugh at them?

Instead of using variables in styles with preprocessing tools like LESS or Sass, Custom Properties implement native support for variables in CSS.

How do I use custom attributes? In fact, it is very simple, in the style rule money add — can:

--color-text-default: black;
Copy the code

Prefer underlining? The following is also ok:

--color_text_default: black;
Copy the code

In attribute names, dashes and underscores are acceptable, but Spaces are not.

–color-text-default is not the same as –color-text-default.

Using the var() function, you can get the value of a custom attribute so that you can use the custom attribute in a style rule. In the following example, the browser takes the –color-text-default value black and applies it to the body element.

body {
    color: var(--color-text-default);
}
Copy the code

Like variables in LESS or Sass, CSS Custom Properties avoid repeating styles such as colors, fonts, or sizes in a stylesheet; Cascading CSS Custom Properties can be modified using media Query queries depending on the platform; Even better, JavaScript can modify the values of custom attributes.

Custom Properties are essentially Custom Properties added before CSS Properties
-
That is, custom properties; Using CSS
var()
Function to use these custom properties. Such as:Var (- the header - color). Custom properties have three more features than the variable features provided by the preprocessor: cascading/cascading, runtime, and JavaScript apis.

Serg Hospodarets has written an excellent article introducing CSS Custom Properties with detailed examples and exploring the various possible uses.

Browser support

How is browser support? So let’s take a look. The latest versions of Chrome, Edge, Firefox, Opera and Safari are supported. IE 11 and before, Opera Mini is not so good.

It’s always like this, right?

But don’t worry, you can use the @support directive to check if your browser supports custom attributes:

--color-text-default: black; body { color: black; } @supports((--foo: bar)) { body { color: var(--color-text-default); }}Copy the code

In the Demo, set the body text color to black at first, and then override it with a custom property value if the browser supports the foo variable we forged.

The default alternative

What happens if the variable used is undefined? No problem, browsers ignore this rule. If you want to be sure, specify an alternate value using substitution.

body {
    color: var(--color-text-default, black);
}
Copy the code

Substitution is a bit like the font definition in CSS, a comma-separated list. If the custom property has no value, the browser ignores it and uses the next value in the list.

This is not accurate.var( <custom-property-name> [, <declaration-value> ]? )Anything after the first comma is considered an alternate value. For example,var(--foo, red, blue), the alternative value is
red, blue. Reference:CSS Custom Properties for Cascading Variables Module Level 1

The preprocessor

We can use the preprocessor to convert Custom Properties into compatible CSS code, but hold on, brother.

Have we done it this way before? In the past, how many tricks did we engineers use to use the “advanced” features of CSS3, such as border-radius, CSS Columns, Flexbox, etc.? The problem was solved, but the code was disgusting.

I think there’s a better way — use CSS Custom Properties in supported browsers to provide a slightly different experience for those that don’t. How to? We’ve done this before!

This approach is called “incremental enhancement”Web Design for Incremental EnhancementThere are a lot of incremental enhancement design techniques. Translated quite a lot of chapters, but the quality of translation was bi by people’s posts and telecommunications press, :).


Stuff & Nonsense in two shades

Stuff & Nonsense is the original author’s site.

In the infamous days of IE6, I provided two sets of designs for my site.

For the modern browsers of that era, the site was filled with trendy colored arrows and targets. I used CSS property selection, which was an advanced feature at the time:

[class="banner"] {
    background-colour: red;
}
Copy the code

IE6 ignores non-resolvable selectors, so if the user accesses the site using IE6, they will see a predominantly black and white) site. These are the styles I implemented using class selectors:

.banner {
    background-colour: black;
}

[class="banner"] {
    background-colour: red;
}
Copy the code

Needless to say, I’m going to sound crazy for doing this, but Microsoft has used my site as a reference for IE7 support property selectors. And they did, as I said: “Make a better browser!” .

Outdated browser, go away

Ok, what does this example have to do with the fact that browsers don’t support CSS Custom Properties? How can you take advantage of these advanced features? You don’t have to worry about browsers not supporting it, you don’t have to implement complex alternatives, and you don’t have to spend hours trying to keep the alternatives consistent with the design.

The answer lies in CSS itself, and as always, browsers simply ignore what they don’t know.

We simply specify a value that is completely different from our design, and then override it with CSS custom properties.

body{
    color: black;
    color:var(--color-text-default, black);
}
Copy the code

All browsers understand the first value (black), and if the browser is smart enough to understand the second value (var(–color-text-default)), it will override the first value. Outdated browsers don’t understand and pretend they don’t see. There’s no problem, and no death.

Do this for all custom attributes. Provide simpler alternatives to design into styles for users with outdated browsers, as I do on Stuff & Nonsense.

conclusion

I’m sure no one wants to see a site go bad or be disliked by others – I don’t want to – but there’s no need to demand consistency across every browser. We can provide a relatively simple design alternative to using outdated browsers.

When deciding whether or not to enable new CSS features, don’t be overly technical, and sometimes you may need to change your attitude to support all browsers. Don’t go soft on old browsers, accept the benefits of CSS Custom Properties and stick with them!

More resources:

  • It’s Time To Start Using CSS Custom Properties — Smashing Magazine
  • Using CSS variables correctly – Mike Riethmuller
  • Developing Inspired Guides with CSS Custom Properties (Variables) — Andy Clarke