DEV Community

Cover image for Solutions and components, usually managed with javascript, built in pure css
Tamer
Tamer

Posted on

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);
})
Enter fullscreen mode Exit fullscreen mode

You can then write:

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

<a href="#top">To top</a>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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 {
  ...
}
Enter fullscreen mode Exit fullscreen mode

Oldest comments (2)

Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

This is spectacular! The web needs more of this.

Collapse
 
eduardonwa profile image
Eduardo Cookie Lifter

Modal one great , i learnt that from Jeffrey Way, the one for smooth scroll is often overlooked. 👍