CSS can do that

I've been doing a fair bit of work in Svelte lately. If you've never heard of it, it's a JavaScript framework just like React or Vue. It allows you to build rich, reactive web experiences with little bloat. Since Svelte is a compiler, it can remove unused code and only ship what's required for a site/page. What I like most about Svelte is that it leans very heavily on pure HTML, CSS and JavaScript rather than creating a new syntax or way of working.

Using pure HTML and CSS as much as possible is the theme of this week's issue. Let's get into some of the native CSS and HTML APIs which can be used instead of JavaScript.

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 images
  • 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-timeline 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.

Meanwhile there's also a lot of work being done to make CSS Container Queries possible. Currently, responsiveness in front-end website design is based entirely around the browser (also called 'viewport') width. Container queries makes responsive web design more granular. It will allow for the look of individual components to be adjusted based on the width of their parent container. For example, this would allow a card component to have a wider layout if used in the main content block of a website, while switching to a stacked layout if it's placed inside a narrow sidebar. Container queries are currently available in Chrome behind flags, but hopefully the work going on to make them possible goes smoothly and we can start seeing wider support.



Building a resilient frontend using progressive enhancement
Not an article this week, more of a guide. This one is from the Gov.uk team, and provides a service manual for their design and development teams to reference when building out new pages and features.

The next issue of Optimised will be in your inbox on September 3rd. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.

As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.