Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof

If you've been building websites for a while you ""know"" that some things require JS and that's just the way it is. Turns out, spec writers and browser makers both are working hard to find common JS patterns and implementing them in CSS and HTML. Things like accordions, auto-suggest, smooth scrolling, dialogs are all available without JS. Looking a little ahead, things like parallax scrolling, styleable selects and component-dependent styling are expected to make their CSS-debut as well.

In this talk I go through common patterns, explain how they can be implemented in CSS and HTML, how that's better and what accessibility implications they have, both for features available today and feature available soon™️.

Kilian is a front-end developer with over 20 years of experience that switched from building websites to building apps to build websites with. He is interested in modern web development, desktop app development and new technologies, and regularly speaks about topics like responsive websites, design systems and Electron. Kilian is a frequent open source contributor.

[danielvega]

Okay, the scroll driven animation being just three lines of css insted of three boattled files is purely art.

[zig]

This felt like a somewhat quick summary of the past 6 months of kevin powell YT, and i liked it !

[SSTSparkz]

I like how summary/details is still considered a new thing 10 years after it got released

[codecruz]

JS should always be the sprinkle on top for functionality you can't accomplish with HTML + CSS. That said, there was stuff in here that was new to me! Well done!

[fernandolunadev]

AMAZING KEYNOTE! 👏👏👏 (standing ovation!)

As a web development professor deeply involved and focused in JS, I started a couple of years ago to encourage students to research and track the evolution of CSS and HTML, so that they can take responsibility away from JS in certain design situations.

I explain that this, in turn, helps to make JS cleaner and simpler to understand when other people should read your code, but also contributes to the rendering processing speed since all HTML and CSS handled from JS will always be slower.

Congrats for the keynote!

[qodesmith]

Absolutely amazing. I love JavaScript and it feels good to let html and css do more of the work.

[ggsheet]

Wish the audience had gotten the hang of how cool and important this is in order to make pages more performant and save devs a lot of time writing code and debugging

[Tarabass]

This is like telling my coworkers that you can submit and validate forms without libraries and style them using pseudo classes in css. They have no idea 😅

[tonymorin]

Wow, that was good! Really interesting! CSS & HTML has evolved. Checkboxes (used to hate checkboxes!), the accordian, modal, in fact all of it. Fairly straightforward too in these simple demos. It's making me realise I need to get out of my old ways & do some research & updating to make life easier, faster & nicer too. Great job Killian! thanks 👍

[PedroS-nvsl]

20 minutes of this video has just saved me about 2 hours of research and implementation 😅

[berthold]

Underrated talk, less javascript is better

[idahosanosa]

My rule is to always keep it as simple as possible and this is just a great example of it

[rrd_webmania]

I used half of these, the other half is new for me. I can't wait try them.

[nustaniel]

position: sticky; top: 0; on that stuck-to-the-top header for 20:30 will typically do the trick fine and you don't need to figure out some arbitrary pixel value to set as a scroll margin.

[therussianfederation]

field-sizing: content was the thing I really needed!

[cscnmhmt]

I think the audience was heavily backend developers :/

[codehan]

The dialog got me..
Great stuff, thanks for that!

[antonzhylenko]

Tough crowd, they are probably in awe bc this is incredible

[Tubeytime]

The more you brute force something, the worse it performs. Pretty straightforward philosophy.

[digitaldevigner]

This is precisely why as a React Native developer I never really felt React for web was a good idea. We as a community try to force the creation of what is a really simple concept of HTML and CSS with an overly complex layer of JavaScript.

I also love JS and sometimes React has a purpose but I wish we would all go back to more pure standards. Even on the server side I just don’t see Node ever taking off with 99% of users the way PHP did. Node is nice but the fact that free shared hosting is a lot more complex and expensive means it will likely never replace something like PHP.

I’m now trying to put as little JS into websites as possible.