Things you can do with CSS that used to need JS

CSS has come a long way in recent years, bringing style and interaction to the web. For example just look at all the cool things you can do now with CSS animations!

However there are some common components that people are still reaching to JS to solve when they can achieve the same thing with CSS. Things like: Modals, tooltips, mobile menus, accordions and carousels.

What if I told you that each of these can now be done with CSS alone? That way the functionality renders at the same time as the design and makes it usable by more people.

Rhiana Heath – Things you can do with CSS that used to need JS

Why use CSS for functionality? We’ve already got HTML and JavaScript… why would we replace that with CSS when it’s just meant to be for styling?

One big reason is 2% of people have JavaScript disabled. That’s a big number across the web. They do this due to speed and bandwidth; usability and a11y; security; or simply by accident.

All of your users are non-JS users while they’re downloading your JS. – Jake Archibald

CSS makes great no-JS fallbacks… don’t forget the humble NOSCRIPT element. Disabling JS is very easy, there are extensions for most browsers to make it very easy to test. Just remember when you’ve turned them on, or you can get a bit of a surprise when you go and open the next website!

Some tips:

  • Have everything show by default, then hide/toggle with JS not CSS.
  • Increase JS performance by removing JS you don’t need.
  • Progressive enhancement – use CSS for as much functionality as possible. If CSS doesn’t load people usually refresh to get it working.

Specific techniques

:focus-within is great for things like dropdown navigation. Focus within tracks keyboard focus, so you can do dropdown navigation with little or no JS (the JS is required for accessibility, to reveal the state of your dropdown using ARIA). The selector scheme can be a little complex so you’ll probably copy and paste this one.

:target can create CSS-only modals, noting you will need to include aria-modal="true" for a11y. Pros are huge desktop support and no JS; main cons are that it modifies browser URL history, and isn’t supported so well on mobiles. Future – somewhere in the future this may be replaced by the DIALOG element, although that doesn’t seem to be gaining a lot of traction.

:checked has a lot of popular hacks associated with it, using the checked state of checkboxes to show and hide other content. You can build up things like expanders and accordions. Pros are wide browser support; cons are that it doesn’t support nested inputs, and mobile support. Future – DETAILS/SUMMARY. Currently support isn’t complete and it’s hard to style.

column-count and column-gap are great for masonry layout, where the order of content doesn’t really matter. Supported in all major browsers so long as you have all your prefixes in order; main con is the lack of control over content placement.

transition can replace a lot of expensive JS libraries used for animations. CSS is great for subtle UI animation. Avoid using transition on all as it tends to create really weird effects and performance problems. Browser support is generally great apart from background images in Safari which just don’t work. Cons are the possible performance issues and it only supports specific properties.

So what can’t CSS do?

  • Just like Batman, it has no parents. There is no :parent selector. This makes us all sad.
  • Radio button hacks don’t work if you wrap the label around them.
  • Accessibility can be impacted, eg. radio buttons aren’t meant to be used for carousels.
  • Accessibility can also be an issue because CSS can’t transition dynamic properties like aria-hidden, be careful what you do and test in assistive tech

It’s good to take a step back and ask whether you really need a whole library, and look at what CSS can do.

@RhianaHeath | Rhiana’s slides | code demos