CSS programming language
Photo by Pankaj Patel on Unsplash

CSS can probably do that

In the not too distant past, web developers would almost instinctively reach for jQuery when starting out a new project. The features and capabilities it opened up were immense and were simply not present in native JavaScript at that time.

Fast forward to today, and a lot of the things we once used jQuery for are now easily done with modern JavaScript. This is a huge performance win, being one less library for the browser to download, parse and execute. Check out You Might Not Need jQuery to see what's now possible.

Using JavaScript still comes at a cost

But JavaScript still puts a heavy burden on the browser, especially to compile and execute it. By using CSS whenever possible we can remove that burden from the browser, keeping the main thread free to handle other tasks.

  • Smooth scrolling
  • Lazy-loading content
  • Keeping elements stuck in the viewport while scrolling
  • Smoothly scrolling in & snapping elements into place

All the tasks listed above were once only capable of using JavaScript, and or jQuery. They're now all things that modern browsers can handle natively with CSS. In the case of lazy-loading content, there is actually a native HTML attribute for that.

Over on CSS Tricks, Håvard Brynjulfsen has a very slick demonstration of creating a shrinking sticky site header entirely controlled with CSS. This was definitely a case where once JavaScript would have been required to keep track of the user's scroll position and apply classes to change the header.

Even cooler stuff coming up

Scroll-linked animations is an upcoming CSS addition that will open up a world of even more amazing page effects, all without having to run any JavaScript. It will replace a lot of the things we might normally use IntersectionObserver for, such as scroll-triggered animations. There's still a way to go before we get support for it in browsers, but Bramus Van Damme has been playing around with it on his blog.

Resources

Related content

Photo by Pixabay on Pexels.

A quick guide to easy web performance wins

This post stems from a conversation I had with a good friend of mine last week. We were talking about how to boost website traffic, and conversions. As I explained to him, and as we'll get to in this post, there's more to the game than just fresh, keyword laden content.