Solutions and components, usually managed with javascript, built in pure css

Coding interfaces in which I defined structures, components, css I'm also used to think about animations, micro interactions and functional ones. This phase calls some aspects into question.

In the early years of my career, I didn't pay much attention to performance, on the contrary the designers always pushed me to a massive use of javascript for every type of animation.
Today performance is key as most of the traffic is by far mobile, it would be really silly to use js for some simple animations while in others, sadly, a state class still needs to be added.

I want to share with you some workarounds that I learned from the web, designed and used in some projects.

Back to top

One of the most useless animations via js, used only to exploit the fluid effect of the scroll. It is a simple trivial link!

So if you usually write:

$("#toTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
})

You can then write:

<style>
html {
  scroll-behavior: smooth;
}
</style>

<a href="#top">To top</a>

Dropdown

Usually this component works by clicking its label for open and close its panel in which to select the contents.
To get this construction without js we need to structure the component in such a way that the panel appears on the mobile focus or desktop hover of the component. So the panel must be nested inside the component with the visibility: hidden property.

Scrollsnap

Recently css3 introduced this new specification supported in cross browser mode. https://caniuse.com?search=Scroll%20snap
A nice computational savings for our mobile device!
Defining a few properties the .child flow inside the .parent container in a fluid way, hooking themselves to the beginning of this.

.parent {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

Modal

Yes... it is possible, just without js.
I took a clear example from https://codepen.io/felipefialho which highlights how simple it can be to develop this component.
If with js we would have had to click on the button to add a class of the modal, with only the css we use the button as a link that refer to the modal as target:

.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  ...
}