Don’t bother with JavaScript if you can do it with CSS

Preface

Any application that can be written in JavaScript will eventually be written in JavaScript. ——Atwood’s Law

Although everything can be JavaScript, to a certain extent, the operating efficiency of CSS is higher than that of JavaScript, so the author believes that if it can be achieved with CSS, there is no need to bother with JavaScript.

Both languages ​​have different uses. As browsers gain more features and properties, CSS is becoming a powerful language capable of handling functions that we previously relied on JavaScript to implement.

Smooth scrolling

There was a time when we had to rely on JavaScript's window.scrollY implementation to do this, and if we wanted smooth scrolling we had to rely on a timer to add an animation. With the addition of the scroll-behavior property, we can now handle smooth scrolling on our website with just one line of CSS! Browser support is about 75%, so the compatibility is pretty good.

html {
  scroll-behavior: smooth;
} 

Complete code[1]

Rolling capture

Slideshows and image galleries are also frequently used functions on the front end. The previous generation of CSS has limited capabilities, so we have to rely on JavaScript to complete these functions. Now this functionality can be achieved with just a few lines of code. In a way it works similarly to Flexbox or CSS Grid in the sense that you need a container element on which you set scrolln-snap-type and multiple child elements that have scroll-snap-align set for them, like this:

<main class="parent">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
</main>

.parent {
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
} 

Complete code[2]

CSS Animation

There was a time when most developers used JavaScript (or jQuery) to animate elements in the browser. It's very simple to fade this and expand that. As interactive projects become more complex and the number of mobile devices increases, performance becomes increasingly important. Flash was abandoned, and talented animation developers used HTML5 to achieve effects that had never been possible before. They needed better tools to develop complex animation sequences and achieve the best performance. JavaScript (or jQuery) can't do that. As browsers mature, they also begin to provide some solutions. The most widely accepted solution is to use CSS animations.

Complete code[3]

Form Validation

HTML5 enriches form elements and provides form element attributes such as required, email, tel, etc. Similarly, we can use :valid and :invalid to validate HTML5 form attributes.

• The :required pseudo-class specifies form elements that have the required attribute.
• The :valid pseudo-class specifies that a form element is valid by matching the required
• The :invalid pseudo-class specifies a form element that does not match the specified requirements.

Using CSS's content attribute attr to grab data

I guess everyone thinks of the pseudo-element after, but how do you get the text? You can't use JavaScript.

CSS pseudo-elements are very powerful. We can use them for many purposes. Usually, in order to create some effects, content:" " will mostly be left blank, but in fact, you can write attr in it to capture information!

<div data-msg="Here is the content to get content">  
hover
</div>

div{
width:100px;
border:1px solid red;  
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
} 

Display on mouse hover

Mouse hovering is very common, such as navigation menus:

Generally, hidden things such as menus should be placed as child elements or adjacent elements of the hover target to facilitate CSS control. For example, the menu above is placed as an adjacent element of the navigation:

<!--menu is adjacent li-->
<li class="user">User</li>
<li class="menu">
    <ul>
       <li>Account Settings</li>
       <li>Log out</li>
    </ul>
</li>

The menu is hidden in normal state:

.menu{
  display: none;
}

When the navigation is hovered, it shows:

/*Using adjacent selectors and hover*/
.user:hover + .menu{
  display: list-item;
}

Note that an adjacent selector is used here, which is why it is written as adjacent elements as mentioned above. The position of the menu can be absolutely positioned.

At the same time, the menu itself should also be displayed when it is hovered, otherwise the menu will disappear as soon as the mouse leaves the navigation:

.menu:hover{
    display: list-item;
}

There will be a small problem here, that is, the menu and navigation need to be next to each other, otherwise if there is a gap in the middle, the menu hover added above will not work. However, in actual situations, from an aesthetic point of view, there should be a certain distance between the two. This is actually easy to solve. Just draw a transparent area on the menu, like the blue square below:

This can be achieved using the before/after pseudo-classes with absolute positioning:

ul.menu:before{
    content: "";
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    height: 20px;
    /*background-color: rgba(0,0,0,0.2);*/
}

If I write CSS hover and listen to mouse events, and use the mouse to control display and hiding, what will happen with the double effect? ​​If I follow the normal routine and add a display: block style when hovering in the mouse event, it will overwrite the CSS settings. In other words, as long as you hover once, the CSS code will be useless because the priority of inline styles will be higher than that of external links. However, in actual situations, unexpected things may happen. That is, on a mobile iPhone, touch will trigger CSS hover, and this triggering will most likely precede the touchstart event. In this event, it will be determined whether the current state is displayed or hidden. Since CSS hover plays a role, it is judged to be displayed, and then it is hidden. In other words, if it doesn’t work when you click once, you have to click twice. So it’s best not to write both at the same time. The second scenario, using child elements, is simpler. Treat the hover target and the hidden object as child elements of the same parent container, and then write the hover on this parent container. You don’t need to write a hover for the hidden element as above:

.marker-container .detail-info{
    display: none
}

.marker-container:hover .detail-info{
   display: block
}

at last

The functions shown here are just some commonly used functions. In fact, there are many functions that can be implemented through CSS. Interested students can continue to study more CSS functions that do not rely on JavaScript.

This is the end of this article about not bothering with JavaScript when you can use CSS. For more relevant CSS smooth scrolling content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!