Things you can do with CSS that used to need JS

Rhiana Heath

SydCSS

Oct 2019

vs

A.K.A

Why use CSS for functionality?

Users that Disable JS*

JS Enabled

JS Disabled

* Average result, numbers vary by country and device

All your users are non-JS while they’re downloading your JS.

Jake Archibald, Google

No-JS Fallbacks

<noscript>
  <p>
    This can be added to your HTML and 
    only show if there is no JS
  </p>
</noscript>

Have Everything show by default

Hide & Toggle with JS not CSS

Progressive Enhancement

Use CSS for as much functionality as possible

:target

History

OK

Example

.Modal {
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  &:target {
    opacity: 1;
    pointer-events: auto;
    z-index: 999;
  }
}
<a class="btn" href="#open-modal">
  Open Modal
</a>
<div class="Modal" id="open-modal">
  ...
</div>

Pros

  1. Supported in all desktop browsers 
    1. Even IE9!
  2. No JS library required

Cons

  1. Modifies the URL and browser history
  2. Less support in mobile browsers

Future

<dialog open>
  ...
</dialog>
  1. Still requires some JS
  2. Isn't well supported yet
  3. Baked in a11y

Columns

History

2018

Multi column layout officially added to CSS 3​ spec

2016

Brick.js Masonry library

Example

.Masonry {
  column-count: 3;
  column-gap: 20px;
  &_object {
    // Otherwise will wrap like a newspaper
    break-inside: avoid;
    margin-bottom: 20px;
  }
}

Pros

  1. Supported in all browsers
    1. Just remember prefixes!
  2. Easy to make responsive, just adjust the number of columns

Cons

  1. Not much flexibility in how elements are positioned
    1. Order is up->down, left -> right

Accessibility

  • Pros:
    • Can make it more robust and quicker to load
  • Cons
    • Can't update dynamic attributes

Thanks!

Slides: slides.com/rhianaheath

Twitter: @RhianaHeath

WebDirections: 31st at 3:15pm Engineering 

 

Things you can do with CSS that used to need JS

By Rhiana Heath

Things you can do with CSS that used to need JS

SydCSS October 2019

  • 131
Loading comments...

More from Rhiana Heath