preface

Any application that can be written in JavaScript will be written in JavaScript. That the laws of Atwood

Everything can be JavaScript, but to some extent CSS is more efficient than JavaScript, so I think that if you can do it with CSS, you don’t have to bother with JavaScript.

Both languages have different uses As browser version features and properties increase, CSS is becoming a powerful language that can handle functions we used to rely on JavaScript for.

Smooth scrolling

There was a time when we had to rely on JavaScript’s window.scrolly implementation to do this, or on the timer to add an animation for smooth scrolling. With the addition of the Scroll-Behavior property, we can use a single line of CSS code to handle smooth scrolling on the site! Browser support is around 75% and compatibility is good.

html {
  scroll-behavior: smooth;
}

The complete code

Scroll to catch

Slides, photo galleries, etc., are also frequently used features on the front end. The previous generation of CSS had limited capabilities and we had to rely on JavaScript to do this. This can now be done in just a few lines of code. In a sense, it works in a similar way to Flexbox or CSS Grid, where you need a container element on which you set scrolln-snap-type and multiple child elements with scroll-snap-align, as follows:

<main class= "parent" >< section class= "child" ></section> <section class= "child" ></section> <section >< section Class = "child" > < / section > < / main >
.parent {
  scroll-snap-type: x mandatory;
}

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

The complete code

CSS animations

There was a time when most developers used JavaScript(or jQuery) to animate elements in the browser. Let this fade, let that expand, easy. With the increasing complexity of interactive projects and the proliferation of mobile devices, performance is becoming increasingly important. Flash was abandoned, and talented animation developers were using HTML5 to do things that had never been done before. They need better tools to develop complex animation sequences and get the best performance. JavaScript(or jQuery) doesn’t do that. Browsers are starting to offer solutions as they mature. The most widely accepted solution is to use CSS animation.

The complete code

Form validation

Html5 enrichs the form elements with attributes such as Required, Email, and tel. Similarly, we can use :valid and :invalid to validate html5 form attributes.

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

Use CSS content attribute attR to capture data

You’re probably thinking about the pseudo-element after, but how do you get the text? You can’t use JavaScript.

CSS pseudo-elements are a very powerful thing, we can use them to do a lot of things, usually to do some effect, content:” “will probably leave it blank, but you can actually say attr to capture the data!

Hover </div> 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;
}

Displayed when the mouse hover

Hover scenarios are common, such as navigating menus:

Generally to hide things such as the menu as the hover target child elements or adjacent elements, it is convenient to use CSS control, such as the above menu, is the menu as a navigation of an adjacent element:

<! - the menu for the adjacent li - > < li class = "user" > user < / li > < li class = "menu" > < ul > < li > account Settings < / li > < li > log out < / li > < / ul > < / li >

Menu is hidden under normal conditions:

.menu{
  display: none;
}

While navigating hover displays:

/* hover*/.user:hover +.menu{display: list-item; }

Notice that we use an adjacent selector, which is why we wrote adjacent elements. The position of menu can be located with absolute.

At the same time the menu itself hover when also to show, otherwise the mouse left the navigation, the menu will disappear:

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

Here will be a small problem, that is, menu and navigation need to be next to each other, otherwise there is a gap in the middle, the above added menu hover can not play a role, but in fact from the aesthetic point of view, the two are to have a little distance. This is actually a good solution, as long as the menu above the draw a transparent area, as follows blue square:

You can use the before/ After pseudo-class to locate the implementation with absoute:

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 the hover event in the CSS, and listen to the mouse event, with the mouse control show hidden, what will happen to the double effect, if the mouse event hover, add a display: block style, will override the CSS Settings. In other words, as soon as you hover once, your CSS code doesn’t work because inline styles take precedence over external ones. But in fact, there will be an accident, that is, on the mobile iPhone, touch will trigger the hover of CSS, and this trigger will be high probability before the Touchstart event, in this event will judge the current state is shown or hidden, because the hover of CSS plays a role, So it’s shown, and then it’s hidden. That is to say, click once, click twice. So it’s best not to write both at the same time. The second scenario, using child elements, is simpler. The hover’s target and the hidden object are children of the same parent, and then the hover can be written on the parent, instead of the above, the hidden element should also be a hover:

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

The last

These are just some of the common functions shown here. In fact, there are many other functions that can be achieved through CSS. Interested students continue to explore more CSS functions that do not rely on JavaScript.