Dachang Technology Advanced Front-end Node Advanced
Click on the top programmer's growth guide, pay attention to the public number
Reply 1, join the advanced Node exchange group
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 mainly use to stroke-dasharraycontrol the style of the solid and dashed lines, and then use the animation effect to stroke-dashoffsetchange the , so as to realize the displacement of the starting point of the line and achieve the effect of "drawing" the line, and the css style is valid for the path drawn by 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 hoverwhen setting the transformattribute can make the element offset, 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 inside the sidebar, you should also let the sidebar come out, which can be :focus-withinachieved . If you need to delay the display after hover, you can use the transition-delayattribute .
sticky position
Use position: stickyto stick an element:
.square {
position: sticky;
top: 2em;
}This way the element will always be displayed within its parent container, but once it is in the viewport, it will become positioned and stay in place 2emwhen top exceeds .fixed
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
A simple folded accordion can be achieved using <details>tags :
<details>
<summary>title</summary>
<p>1</p>
<p>2</p>
</details><details>The content of the label in the <summary>label will always be displayed, and when clicked, it will toggle the display and hide <details>of other elements in the . 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, selector1 ~ selector2when selector1, selector2sets the style for the sibling nodes that satisfy the condition after the selector.
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 sub-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 mandatorythe vertical scrolling behavior can be accurately captured, and the sub-element can be completely scrolled to the visible 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
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：
1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持❤️