Johannes Raggam: Less JavaScript: Build Modern, Interactive UIs with HTML and CSS

Here are the talk slides.

Using less javascript can be good for performance (less big bundles) and accessibility.

Simple example: lazy image loading:

<img `loading="lazy"` src... 

date, time, datetime-local inputs have good support on mobile without needing extra javascript:

<input type="datetime-local" ...

With javascript it could look nicer though.

In audio and video tags you can specify sources with different types, and have links or other html as fallback.

The details/summary element avoids the need for special accordeon javascript:

<details>
  <summary>More info</summary>
  <p>This is additional information, shown when you click the summary.</p>
</details>

If you give the details the open attribute, it will be shown expanded by default. The details element is for example used in the Plone 6.1 resource registries. Previously, if you did something wrong here, the control panel would be broken and you could not fix it here. Now with the plain html it is no problem. You can also use this for form tabbing.

For a slider/carousel there is a lot you can do with CSS. Coming soon: scroll buttons. And the ::scroll-marker element.

Form validation. Add the required attribute to an input, and use this CSS:

input:invalid {
  border: 2px solid red;
}
input:valid {
  border: 2px solid green;
}

dialog element for modals.

Future: masonry, with nice alignment of images of varying sizes on a page. It is experimental.

Future: maps.