KilianValkhof.com Mastodocon @kilian@mastodon.social

It's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose.

Custom Switches (genial)

• Checkbox wird per CSS zu einem Schieberegler
• appearance: none = geil
• input checkbox wird grauer Hintergrund
• ::before wird little white dot
• :checked { background: green }
• :checked::before { transform: translateX(1rem); }

Datalist, a native autosuggest

A color picker that does more <label> <input type="color" /> Color </label>

Accordions Dialog modals

There are dozens more examples I could've added into this article, here are just some you can look into:

• Native smooth scrolling with scroll-behavior: smooth (but only when prefers-reduced-motion: no preference matches!),
• Native carousels with scroll-snap,
• "In-view" elements with position: sticky

…Not to name the whole concept of container queries.

And if we look into the future, we're getting even more cool things:

• Scroll driven animations
• Masonry layouts with grid-template-rows: masonry
• A fully stylable select with the new selectlist element (where you can style each part of a select without destroying all the native functionality it comes with)
• The :has() selector that's going to eliminate a whole class of JS selection