JS Is Shrinking This Much! The Latest HTML & CSS Techniques for 2026
Parts of the UI that used to rely on JavaScript libraries can now be written in plain HTML and CSS. Using the newer HTML and CSS features, there are more and more situations where you can write simpler code with less of it. This session will introduce the following features:
- dialog, popover, customizable select, CSS carousel
- the command / commandfor attributes
- @starting-style, transition-behavior: allow-discrete
- sibling-index(), attr()
- the :target-current pseudo-class
- anchor positioning
- scroll-driven animation
When you build these things yourself in JavaScript, there's a lot to take care of — accessibility, preventing double-clicks, focus management, open/close state, and so on. The benefit of using browser-standard features is that you can offload some of that handling to HTML/CSS.
■ Why I chose this topic
I've been covering the web's latest features and publishing explainer articles on the owned media site ICS MEDIA. While building original demos for these articles, I was struck by how modal UI development — which used to be a real struggle with things like Vue.js's `<TransitionGroup>` back around 2018 — can now be written straightforwardly using the dialog element, the command attribute, @starting-style, and more. That experience is the starting point for this session.
■ Concrete example
Using a hamburger menu as the subject, I'll introduce an implementation approach centered on the dialog element.
https://ics.media/entry/260527/
I'll explain how, even for UI patterns you see all the time, these new technologies can work together to help.
■ What attendees will take away
- The range of UI you can now build with the latest HTML/CSS
- How to judge which parts you can skip writing JavaScript for, and which parts you still should
- Things to watch out for when combining this with state management in Vue.js, React, and similar frameworks
IKEDA Yasunobu
JS Is Shrinking This Much! The Latest HTML & CSS Techniques for 2026
Parts of the UI that used to rely on JavaScript libraries can now be written in plain HTML and CSS. Using the newer HTML and CSS features, there are more and more situations where you can write simpler code with less of it. This session will introduce the following features:
- dialog, popover, customizable select, CSS carousel
- the command / commandfor attributes
- @starting-style, transition-behavior: allow-discrete
- sibling-index(), attr()
- the :target-current pseudo-class
- anchor positioning
- scroll-driven animation
When you build these things yourself in JavaScript, there's a lot to take care of — accessibility, preventing double-clicks, focus management, open/close state, and so on. The benefit of using browser-standard features is that you can offload some of that handling to HTML/CSS.
■ Why I chose this topic
I've been covering the web's latest features and publishing explainer articles on the owned media site ICS MEDIA. While building original demos for these articles, I was struck by how modal UI development — which used to be a real struggle with things like Vue.js's `<TransitionGroup>` back around 2018 — can now be written straightforwardly using the dialog element, the command attribute, @starting-style, and more. That experience is the starting point for this session.
■ Concrete example
Using a hamburger menu as the subject, I'll introduce an implementation approach centered on the dialog element.
https://ics.media/entry/260527/
I'll explain how, even for UI patterns you see all the time, these new technologies can work together to help.
■ What attendees will take away
- The range of UI you can now build with the latest HTML/CSS
- How to judge which parts you can skip writing JavaScript for, and which parts you still should
- Things to watch out for when combining this with state management in Vue.js, React, and similar frameworks