As front-end developers, when we’re adding a feature it’s a common solution to just use JavaScript. I mean, why not? The project you’re working on probably already uses React, Vue, Ember or even vanilla JS, so you should just go for it. But what seems like an obvious choice, might not be so great after all. Why?
Using Javascript as your one-solution-fits-all way of solving problems can have a serious negative impact on the experience your users get on the website. The most common issues are:
- calculation-heavy logic that makes scrolling or interaction laggy
- using complex plugins for simple cases, increasing loading times especially on mobile
- custom solutions might weight less than a plugin, but can be more prone to errors
You can of course write a custom JS solution that will be well tested, but the CSS version is still smaller, as it comes in one or a couple lines of code. So most of the time it will be also much faster (and cheaper) to develop.
The following pure CSS solutions have a very good adoption rate. Of course, it’s impossible to get it to 100%, but a lot of these techniques have already been used on our client’s sites. And the outcome? Especially when using the first two optimisations I got a massive boost in performance, making the initially laggy website smoothly reach 60fps. Better performance means better User Experience and finally a happier user! But always make sure to know which browsers you need to support, as not all of these will work on older browsers. So, what can we do with CSS instead of JS ?
Table of Contents
1. Sticky sections
See the Pen Sticky sections by Arek Janik (@ArekJanik) on CodePen.
A sticky section stays in the viewport as you scroll, overlapping it’s sibling elements (this is a must, it will not work if there are no siblings to it). You have to specify from which direction it will stick and with how much offset.
So if you set it to top: 100px it will start sticking when you scroll down 100px and it will stay there until you scroll to the end of its parent element. It’s possible to use it not only from the top but from any direction.
Support: 92.78%
2. Getting viewport height and height calculation
A pretty handy trick for making, for example, a hero section on your homepage span across the whole height of the screen (viewport height). It’s the simplest way for an element to adapt to its height.
height: 100vh;
You can also mix it with calc
height: calc(100vh - 100px);
Or use vmin/vmax to get the smaller/bigger value of viewport height or width.
height: 50vmin;
Support: 96.16%
3. Lazy loading
Although not so widely adopted (yet), this is especially exciting! It will allow native lazy loading of both images and iframes. It’s not actually CSS, but an HTML attribute loading that’s passed to an img. Accepts 3 values:
- eager - should be loaded immediately
- lazy - load when the user is about to see it
- auto - let the browser decide (same as not setting it at all)
The great thing about it is that it degrades gracefully, so unsupported browsers will just get the regular experience, not a broken layout.
Support: 62.19%
4. Smooth scrolling
Linking to an element with an id on a page is a neat trick, but there’s a major drawback to it. After clicking it just jumps to the target, which might be confusing for the users. Well, not anymore! With scroll-behavior: smooth; you get this nice animation, without any JS or jQuery. If you’d like it to work on the whole website, add it to the html tag styles. Or if you’re targeting an element, just place it where the overflow is. Please note that currently it only works on Chromium based browsers and Firefox.
See the Pen Smooth scrolling by Arek Janik (@ArekJanik) on CodePen.
Support: 71.52%
5. Text truncation
Shortening text can be achieved in 2 ways. The first option is to cut it at the end of the first line, it is widely supported and uses “normal” CSS:
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;Support: 98.03%
The other cuts off at a given number of lines. It’s unofficial and undocumented, yet it is supported in almost every browser except IE. And it’s just weird, I mean, look at that old flexbox syntax:
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
//number of visible lines
display: -webkit-box;
overflow: hidden;Support: 94.18%
6. Scroll snapping
Scroll snapping allows you to define “snap points”, to which the scrolling will stick to. For example, let’s say you have a couple of sections each below the other.
Each has a height of 100vh. Once you stop scrolling down, the snap point will scroll a bit further, revealing the whole section. The experience is much more pleasant than in most JS solutions that hijack or scrolljack the default behaviour.
See for yourself:
See the Pen Scroll snap by Arek Janik (@ArekJanik) on CodePen.
To make the basic example work, you need to define the wrapper with the direction and type of the snapping:
.container {
scroll-snap-type: y mandatory;
}And the snapping alignment on the child elements:
.element {
scroll-snap-align: start;
}`There is much more to it, which can be discovered here https://css-tricks.com/practical-css-scroll-snapping/
Support: 90.4%
7. Scrollbars
Finally, a CSS solution for styling scrollbars is back! I think I used to do it on IE6 maybe, so it’s been a while. Now, although the support for this one is impressive, the way it is implemented is pretty chaotic.
Webkit browsers allow you to change pretty much everything, by using pseudo-selectors. Firefox uses properties and will not allow a direct number for scrollbar width, just a keyword. IE works on properties as well, but different ones than Firefox. Still, if you don’t need your scrollbars to look exactly the same across different browsers, it’s a good solution.
Support: 93.74%
Did you know about these pure CSS solutions? Or maybe you know and use other CSS instead of JS tricks? Let me know in the comments!
I’m sure there will be a lot more of these features in the coming years. Sure, JS allows for more flexibility and sometimes for more complex features it might be the only way. But keep in mind that a simple CSS solution might be just what you need!
Maybe you can even keep your site JS-free with these tricks?
In the meantime, you need help with your CSSing our UX team would love to help you!
