How to pass parameters to JS via CSS

1. Background that needs to be passed through CSS

There are many uses of media queries in CSS, such as device size determination, whether mouse behavior is supported, whether it is dark mode, whether it is power saving mode, etc.

For example, the dark mode and dark theme that are often mentioned recently:

@media (prefers-color-scheme: dark) {
    /* Dark mode, dark theme*/
}
@media (prefers-color-scheme: light) {
    /* Light theme */
}

CSS can be detected automatically, but sometimes, in JS, we also need to implement different interaction logic or render different content according to different system themes.

what to do? It seems that there is no ready-made JS API to detect the system mode for the time being, so I can only rely on passing parameters in CSS. This is a typical scenario, and there are many similar scenarios.

For example:

1. CSS and JS border width consistency

When we are doing responsive layout, we often need to set a critical width value. For example, when the width of the device is less than 640 pixels, we consider it to have entered the mobile terminal; or when the width is less than 480 pixels, we use the mobile terminal layout, etc.

At this time, the JavaScript code also needs to implement different interaction effects based on this critical width. When it is greater than a certain value, it is the interaction under the PC layout, and when it is less than a certain value, it is the interaction under the mobile layout.

Many people make conventions on CSS code and JS code during actual development, for example:

@media screen and (max-width: 480px) {
    /* Responsive layout for small screen widths*/
}
if (screen.width < 480) {
    /* Interaction behavior under small screen width*/
}

If there is a problem with this convention, after a period of time in the project, it is found that there is a problem with this critical width. For example, when the mobile phone is in landscape mode, its width is greater than 480px, which should also be the layout method for mobile terminals, so the developer changed it to 640px.

@media screen and (max-width: 640px) {
    /* Responsive layout for small screen widths*/
}

As a result, if you forget that there is also this judgment in the JS code, a bug will occur.

If the screen judgment in our JavaScript code was based on CSS parameters when it was originally implemented, there would be no such maintenance problems.

2. Does the browser support the :hover pseudo-class interaction?

We will develop some UI components, hoping to be common on desktop, mobile, and IoT devices.

Some components on the desktop are very good and convenient when we use mouseenter or mouseover events to achieve the experience. But if these things are used on mobile devices and other touch-screen devices, there will be problems with the world, because there is no such thing as hover.

Fortunately, there is a media query in the CSS code to determine whether the browser supports the :hover pseudo-class interaction (this query has a special article introduction, click here):

@media (any-hover: none) {
    /* The device does not support hover events*/
}

Unfortunately, there is no such API in JS for direct judgment. Many people probably make this judgment by determining whether the browser supports events such as touchstart. Unfortunately, this method of judgment is inaccurate. Because many touch devices can also be connected to mouse devices, hover events should also be well supported.

Therefore, the final method is to use CSS media query to make the judgment, and then pass the judgment result to js as a parameter.

Okay, now the question is, given these three cases, how do we pass our parameters to JS code through CSS?

2. How to pass CSS parameters to JS

Usually I use the following two methods to pass parameters from CSS to JS.

1. Content pseudo-element content parameter passing

For example:

@media (any-hover: none) {
    body::before {
        content: 'hoverNone';
        display: none;
    }
}

At this point, you can use JS code to get the information passed by the body pseudo-element:

var strContent = getComputedStyle(document.body, '::before').content;
// If the result of strContent is 'none', it means hover is supported
// strContent result is '"hoverNone"', which means hover is not supported, and needs to be replaced with click event

This article pre-buries the above CSS code. Therefore, in the Chrome browser, open the console, enter the mobile preview mode, enter the JS test, and you can see that the string information passed by our CSS is obtained by JS.

At this point, we can get the information passed in CSS based on the ::before and ::after pseudo-elements in conjunction with the content attribute.

The advantage of this parameter passing method is that it has relatively good compatibility, but its disadvantage is also obvious, that is, the number of parameter values ​​we pass is limited. If we want to pass multiple values ​​at one time, it will be a bit difficult. At this time, you can try the following method with the help of CSS custom attributes.

2. CSS custom properties (CSS variables) parameter passing

Let’s get straight to the code. With CSS custom properties (CSS variables), the development and maintenance of dark mode and light mode becomes relatively easy. In addition, we can also use this CSS custom property to do pattern recognition for JS.

:root {
    --mode: 'unknown';
}
@media (prefers-color-scheme: dark) {
    /* Dark Mode */
    :root {
         --mode: 'dark';
         --colorLink: #bfdbff;
         --colorMark: #cc0000;
         --colorText: #ffffff;
         --colorLight: #777777;
    }
}
@media (prefers-color-scheme: light) {
    /* Light theme */
    :root {
         --mode: 'light';
         --colorLink: #34538b;
         --colorMark: #cc0000;
         --colorText: #000000;
         --colorLight: #cccccc;
    }
}

JS detection code:

var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// If the mode result is '"dark"', it means night theme, dark mode, dark style, eye protection mode.
// mode result is other than default mode

For example, the result of running on my computer is as follows:

Other values ​​should be displayed on Mac OS X or mobile devices. Feel free to test and send me a screenshot so I can update it in the article.

The advantage of using traditional CSS custom properties is that they are very flexible and we can define many, many variables. And in fact, there is no need for us to worry about compatibility issues. Why? Because any device browser that supports night mode must support CSS custom properties.

Therefore, on the whole, using CSS custom properties to pass parameters is the best implementation in the dark mode scenario. However, if the scenario is based on the responsive layout of the device width, it is better to use the CSS content attribute to pass parameters.

Summarize

The above is the method of passing parameters to JS through CSS that I introduced to you. I hope it will be helpful to you. Thank you very much for your support of the 123WORDPRESS.COM website!