Detailed explanation of sample code for the improvement and changes brought by CSS variables to JS interactive component development

1. Qualitative changes brought by CSS variables

The improvements brought by CSS variables are more than just saving CSS code and reducing CSS development and maintenance costs.

More importantly, many interactive developments in components are transferred from the original JS to CSS code, making the component code more concise and the visual expression more flexible.

We use several cases to illustrate this change.

2. Simplified JS intervention in DOM settings

Case 1: Loading progress effect

For example, to achieve the variable effect shown in the figure below:

There is a background layer outside, and then there is a progress bar and a progress value inside.

In the past, two layers of div elements were used, and JS was used to change the width of the color bar inside and set the progress value at the same time.

That is, the progress effect and progress value of loading are all set directly by JS, and JS corresponds to multiple HTML information at the same time.

Now, with CSS variables, the work done by JS is very simple. It only needs to set the loading progress value on the container element. Nothing else needs to be done. As for the style performance, or how the progress value is displayed, it is all CSS's business.

The relevant code is as follows:

<label>Image 1:</label>
<div class="bar" style="--percent: 60;"></div>
<label>Image 2:</label>
<div class="bar" style="--percent: 40;"></div>
<label>Image 3:</label>
<div class="bar" style="--percent: 20;"></div>

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

As you can see, we only need one layer of div tags, the DOM hierarchy is simple, and the only HTML change that needs to be modified is the --percent custom attribute.

Seeing is believing, you can click here: CSS percentage variables and progress bar demo

3. CSS variables become the CSS API

In the past, effects such as prompts and switches on clicks required JS to set styles for specific elements. Now with CSS variables, we only need a general and very simple global JS, and JS can play by itself, and all other effects are handled by JS.

This JS is as follows:

/**
 * @author zhangxinxu(.com)
 * @description Click anywhere on the page to mark the coordinates*/
document.addEventListener('mousedown', function (event) {
    var target = event.target;
    var body = document.body;
    var html = document.documentElement;

    // Set custom property value body.style.setProperty('--pagex', event.pageX);
    body.style.setProperty('--pagey', event.pageY);

    html.style.setProperty('--clientx', event.clientX);
    html.style.setProperty('--clienty', event.clientY);
    html.style.setProperty('--scrolly', window.pageYOffset);

    target.style.setProperty('--offsetx', event.offsetX);
    target.style.setProperty('--offsety', event.offsetY);
    target.parentElement.style.setProperty('--target-width', target.clientWidth);
    target.parentElement.style.setProperty('--target-height', target.clientHeight);
    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
    target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

It can be seen that the JavaScript code is no longer responsible for any logic related to interactive behavior, but directly becomes a tool, a tool that simply transmits the click coordinate position, as well as the offset and size information of the click element.

What did CSS get?

Got a huge treasure, a treasure that can be used at any time.

I want some fancy feedback when I click a button, or a creative interactive prompt when I click a blank page. It's no problem at all. I can use it whenever I want. It's extremely convenient and free.

It can be said that the above JS, or similar JS code, is the standard for future web development.

Let's see what the above code can achieve.

Case 2: Button click circle effect

When you click the button, there is a circle-enlarging effect, and the center point of the enlarged circle is the click position.

The effect is shown in the following GIF:

The core CSS code is as follows:

.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: var(--x, 0); top: var(--y, 0);
    pointer-events: none;
    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

:active and set the transition time to 0. So, when you click and release, there will be a transition effect.

You can visit this address to experience it: https://xy-ui.codelabo.cn/docs/#/xy-button

Case 3: Text effect appears when clicking on the page

For another example, clicking anywhere on this page will display the prompt message shown in the figure below.

It is implemented by the universal tool JS above and the following CSS:

body:active::after {
    transform: translate(-50%, -100%);
    opacity: 0.5;
    transition: 0s;
    left: -999px;
}
body::after {
    content: 'zhangxinxu.com';
    position:fixed;
    z-index: 999;
    left: calc(var(--clientx, -999) * 1px);
    top: calc(var(--clienty, -999) * 1px);
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

Case 3: The underline effect of two buttons sliding back and forth

In the past, it was very difficult to achieve the effect of clicking the tab button and then the underline sliding around and changing size, as shown in the figure below, using pure CSS. Almost 99.99% of the development relied on JS to query the corresponding DOM elements and then set the width, height and position to achieve the interactive effect.

Now, with the tool JS, all we need is a piece of CSS to get it done. Even the highlight switching of text can be done with pure CSS. It's so magical.

The effect here is the real-time effect achieved (if there is no effect, please visit the original article Zhang Xinxu https://www.zhangxinxu.com/wordpress/?p=9477):

Click on any tab element and you can see the underline slide to the corresponding position with a highlighted effect.

The relevant code is as follows:

<div class="yw-tab-tab"> 
  <a href="javascript:" class="yw-tab-a">QQ Reading</a>
  <a href="javascript:" class="yw-tab-a">Starting Point Reading</a>
  <a href="javascript:" class="yw-tab-a">Red Sleeves Reading</a>
  <a href="javascript:" class="yw-tab-a">Feidu Free Novels</a>
</div>

.yw-tab-tab {
    position: relative;
    display: flex;
    max-width: 414px;
    justify-content: space-between;
    border-bottom: 1px solid #717678;
    background-color: #fff;
    margin: 30px auto;
}
.yw-tab-tab::before,
.yw-tab-tab::after {
    position: absolute;
    width: calc(var(--target-width, 0) * 1px);
    left: calc(var(--target-left, -299) * 1px);
    color: #2a80eb;
}
.yw-tab-tab[style]::before,
.yw-tab-tab[style]::after {
    content: '';
}
.yw-tab-tab::before {
    background-color: currentColor;
    height: calc(var(--target-height) * 1px);
    mix-blend-mode: overlay;
}
.yw-tab-tab::after {
    border-bottom: solid;    
    bottom: -2px;
    transition: left .2s, width .2s;
}
.yw-tab-a {
    color: #717678;
    padding: 10px 0;
}

If it is accessed from a mobile device, mousedown event needs to be changed to touchstart , but I am too lazy to adjust it.

4. Many API interfaces of web components can be said goodbye

In the past, if a web component had a function, they would just add an API interface, which seemed very powerful. But in fact, as time went by, more and more APIs were added, the components became heavier, and the learning cost became higher and higher. In the end, it reached a dead end, became cumbersome, and met its demise.

Now, it's time to change your thinking.

In fact, for those functions that are closely related to interactive performance, it is only necessary to pass CSS custom properties on the component container element. There is no need to be responsible for specific positioning, visibility, or style changes. All can be left to CSS.

Because the design expression is high-level, flexible, and personalized, it is reasonable and matching to control it at the CSS level.

For example, the loading component mentioned above, whether it is a bar or a pie, has the same processing logic. It is only responsible for transmitting the progress value and the style does not need to be concerned.

For example, a slider box (such as the slider position and prompt effect in Ant Design in the figure below) and a pop-up prompt box can all be completed through a CSS custom attribute. JS only passes parameters and is not responsible for the UI style.

It's really too late, it's already 0:56, so I won't show the demo, just understand the gist.

V. Conclusion

Conclusion: What the hell, I can’t even open my eyes.

In short, the idea of ​​interactive development can be transformed. CSS variables are really good!

Thanks for reading, and feel free to share!

I wrote this in a hurry and typed the words in a daze. If there are any mistakes, please point them out.

This article address: https://www.zhangxinxu.com/wordpress/?p=9477

This concludes this article about the improvements and changes that CSS variables bring to JS interactive component development, with detailed sample code. For more relevant CSS variables and JS interactive component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!