Unleash the hidden power of HTML and CSS: No JS required 🛡️
If we focus too much on JS for too long 👨💻, we get into the habit of using JS to implement functions and forget that HTML and CSS also have certain functional characteristics. In fact, some features are best implemented in JS. Instead of relying only on JS, you need to make full use of technical tools 🛠️.
5 things you don't need JavaScript for 🖐️🚫
This article begins with five examples that demonstrate functions that don't necessarily need to be executed in JS.
Overview 🌐
- Control SVG animations using CSS 🎨
The original article provides an example of setting off fireworks 🎆. This basically uses CSS to control the SVG and generate animation effects. Core code:
css
.trail {
stroke-width: 2;
stroke-dasharray: 1 10 5 10 10 5 30 150;
animation-name: trail;
animation-timing-function: ease-out;
}@keyframes trail {
...
}
- Sidebar 🤏
Sidebars that only appear on hover can be fully implemented using CSS.
css
nav {
position: 'absolute';
right: 100%;
transition: 0.2s transform;
}nav:hover,
nav:focus-within {
transform: translateX(100%);
}
- Sticky position 🧲
To stick to an element, use position: Sticky.
css
.square {
position: sticky;
top: 2em;
}
- Accordion menu 📂
use<details>This tag allows you to achieve something like a simple folding accordion.
html
<details>
<summary>title</summary>
<p>1</p>
<p>2</p>
</details>
- Dark theme 🌓
Although dark themes look like a type of customized business logic, they are so common that operating systems and browsers have built-in implementations, and CSS also has methods to determine theme settings.
css
@media (prefers-color-scheme: light) {
/** ... */
}
@media (prefers-color-scheme: dark) {
/** ... */
}
@media…
