Intensive reading "5 things you no longer need JS to do"

If you focus on JS for too long, you will develop the habit of implementing any function with JS, and forget that HTML and CSS also have certain functional characteristics. In fact, some functions are thankless to implement with JS. We need to use technical tools comprehensively instead of relying only on JS.

5 things you don't need Javascript for This article starts with 5 examples and tells us which functions do not have to be done with JS.

Overview

control svg animation with css

The original text draws an example of setting off fireworks, which essentially uses css to control svg to produce animation effects. The core code:

 .trail {
  stroke-width: 2;
  stroke-dasharray: 1 10 5 10 10 5 30 150;
  animation-name: trail;
  animation-timing-function: ease-out;
}

@keyframes trail {
  from,
  20% {
    stroke-width: 3;
    stroke-dashoffset: 80;
  }
  100%,
  to {
    stroke-width: 0.5;
    stroke-dashoffset: -150;
  }
}

It can be seen that stroke-dasharray is mainly used to control the style of the solid and dashed lines, and then the animation effect is used to change the stroke-dashoffset , so as to realize the displacement of the starting point of the line and realize the "drawing" of the line. effect, and the css style is valid for the path drawn by the svg.

sidebar

The sidebar that only appears when hover can be implemented entirely using css:

 nav {
  position: 'absolute';
  right: 100%;
  transition: 0.2s transform;
}

nav:hover,
nav:focus-within {
  transform: translateX(100%);
}

The core is that when hover is set, the transform attribute can offset the element, and translateX(100%) can shift the position of the current element width.

Another interesting thing is that if you use the TABS button to focus on the elements in the sidebar, you should also let the sidebar come out, you can directly use :focus-within to achieve. If you need to delay the display after hover, you can use the transition-delay attribute.

sticky position

Use position: sticky to stick an element:

 .square {
  position: sticky;
  top: 2em;
}

This way the element will always be displayed within its parent container, but once it appears in the viewport, when the top exceeds 2em it will become fixed positioned and held in place.

Judging with JS is quite complicated, you have to try to monitor the scroll of the parent element, and there may be some jitter when the positioning is switched, because the execution of JS and CSS are asynchronous. But when we only describe this behavior in CSS, browsers have a way to deal with jitter on transitions.

Accordion Menu

Using the <details> tag can achieve a similar simple folding accordion effect:

 <details>
  <summary>title</summary>
  <p>1</p>
  <p>2</p>
</details>

In the <details> tag, the <summary> tag content will always be displayed, and after clicking, it will switch to display and hide other elements in the <details> . Although this can't do special animation effects, if it's just for a normal expand-collapse function, it's enough to use HTML tags.

dark theme

Although intuitively the dark theme seems to be a custom business logic, in fact, because the dark theme is so common that both the operating system and the browser have built-in implementations, and CSS also implements the corresponding method to determine whether the current system theme is a bright color Still dark: prefers-color-scheme .

So if the system wants to implement a dark theme, it is best to keep it consistent with the operating system settings, so that the user experience will be better:

 @media (prefers-color-scheme: light) {
  /** ... */
}
@media (prefers-color-scheme: dark) {
  /** ... */
}
@media (prefers-color-scheme: no-preference) {
  /** ... */
}

If you use Checkbox to check whether to enable the dark theme, you can also use only CSS variables to judge. The core code is:

 #checkboxId:checked ~ .container {
  background-color: black;
}

~ This symbol indicates that when selector1 ~ selector2 , set the sibling style for the selector selector1 and then satisfy the condition of selector2

intensive reading

In addition to the above examples, the author adds a few more examples.

Slide scroll

Slide scrolling means that each scroll has a fixed step size, and the sub-elements are completely displayed in the visible area. It is impossible to "split" the upper and lower or left and right sub-elements.

In addition to using browsers to implement slideshows, this scenario is also frequently used on the homepage of many websites. For example, the homepage is divided into 5 vertical scrolling blocks, and each block displays a product feature. At this time, the scrolling is no longer continuous. , but a complete switch from one block to another.

In fact, this effect does not require JS to achieve:

 html {
  scroll-snap-type: y mandatory;
}
.child {
  scroll-snap-align: start;
}

In this way, the page is set to accurately capture the scroll position of the child element. When the scroll wheel is triggered, the mouse clicks the scroll bar, or the keyboard is pressed up and down, scroll-snap-type: y mandatory can accurately capture this vertical scrolling behavior and scroll the child element completely to the viewable area.

color picker

Color pickers can be implemented natively using HTML:

 <input type="color" value="#000000">

The advantage of this selector is that the performance and maintainability are very, very good, and it can even capture the color of the desktop. The downside is that the color picker cannot be customized.

Summarize

There are many good articles about what CSS can do that would otherwise require JS to do, such as:

• youmightnotneedjs .
• You-Dont-Need-JavaScript .
• And the 5 things you don't need Javascript for in the introduction to this article.

But instead of reading these articles, we're going to try to do everything we can with CSS, and that's not necessary. Because CSS is a descriptive language, it can precisely control the style, but it is difficult to precisely control the interaction process. For standard interactive behaviors such as slide slides and animations, CSS can be used, and for non-standard interactive behaviors, such as custom position pop-up Modal, use svg To draw a fully custom path animation, try to use JS.

In addition, if the state in the interaction process needs to be passed to other elements for response, try to use JS to implement it. Although CSS pseudo-classes can help us achieve most of these capabilities, if we want to monitor state changes and send a request, CSS can't do anything, or we need to use CSS very tricky to implement, which also violates CSS technology selection the original intention.

Finally, whether you can choose a CSS solution in a suitable scenario is also a kind of technical selection ability. Don't forget the fields where CSS is applicable, and don't use JS to implement all functions.

The discussion address is: Intensive Reading "5 Things You Don't Need JS To Do Anymore" Issue #413 dt-fe/weekly

If you'd like to join the discussion, click here , there are new topics every week, with a weekend or Monday release. Front-end intensive reading - help you filter reliable content.

Follow Front-end Intensive Reading WeChat Official Account

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

Copyright notice: Free to reprint - non-commercial - non-derivative - keep attribution ( Creative Commons 3.0 license )