Things you can do with CSS that used to need JS

Rhiana Heath

WebDirections Summit

Oct 2019

vs

A.K.A

Content

Style

Functionality

Why use CSS for functionality?

Users that Disable JS*

JS Enabled

JS Disabled

Search engine survey 2010

Yahoo Survey 2010

Webaim survey 2012

Blockmetry Survey 2016

* Average result, numbers vary by country and device

Why Disable JS?

Speed & Bandwidth
Usability & Accessibility
Platform Support
Security
By Accident

Stack exchange

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

Jake Archibald, Google

Source

No-JS Fallbacks

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

Easy to test

Chrome: Quick JS switcher extension
Firefox: JavascriptSwitcher addon
Opera: Javascript Switcher extensions

Have Everything show by default

Hide & Toggle with JS not CSS

Increase JS performance

Remove JS not being used

Progressive Enhancement

Use CSS for as much functionality as possible

:focus-Within

History

1998-2002
- CSS 2
- :focus, :hover &
  child selector >
2017
- Working draft of CSS4
- :focus-within

1995
- JS onclick
2006
- jQuery
  - toggleClass()
2009
- jQuery UI
  - focus()

CSS

Example

Pros

Usable by keyboard and mouse users
Add custom animations and transitions

Cons

Can be a little fiddly to activate

&_submenu {
   &:hover {
    > .Nav_dropdown {
      display: block;
    }
  }
}

 &_toggle {
   &:focus, &:focus-within {
     + .Nav_dropdown {
       display: block;
     }
   }
 }

:target

History

2008
- Jquery UI Dialog
  - Version 1.5
2012
- Bootstrap modals
  - Version 2

2018
- :target css selector
  - CSS 3

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

Supported in all desktop browsers
1. Even IE9!
No JS Library needed

Cons

Modifies the URL and browser history
Less support in mobile browsers

Future

<dialog open>
  ...
</dialog>

Still requires some JS
Isn't well supported yet
Baked in a11y
1. ```
aria-model="true"
```

:checked

History

:checked css selector officially added to CSS 3 spec

2018

2012

Bootstrap collapse accordions added to version 2

Accordions are in jQuery UI version 1.5

2008

Example

Pros

Supported in all desktop browsers
1. Even IE9!
Can use radio buttons as well for one open at a time

Cons

Less support in mobile browsers
Doesn't work for nested inputs
1. Children or siblings only

<input type="checkbox"
       id="toggle-1"
       class="Accordion_input"
       name="accordion"
       value="0"/>

<label for="toggle-1"
       class="Accordion_label">
   Toggle 1
</label>

&_input {
  // Not display: none; for sr a11y
  @include hiddenInput;
  &:checked {
    ~ .Accordion_body {
      display: block;
    }
  }
}

<details>
  <summary>
    Accodion Title
  </summary>
  Accordion Body text
</details>

Future?

New HTML element
Not very well supported
Can't really be styled yet

Details reference

Bonus Round

CSS Tic Tac Toe

Columns

History

2018

Multi column layout officially added to CSS 3 spec

2016

David DeSandro JS Masonry library

2015

Macy.js Masonry library

2016

B rick.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

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

Cons

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

transitions

History

2019

transition is in CSS4 working draft

2006

.fadeIn() added in jQuery

2010

Scriptaculous animation library

Example

.Transition {
  background-color: #BF55EC;
  transition: background-color 0.3s;
  &:hover {
    background-color: #007A7C;
  }
}

Pros

Supported in all browsers
1. Background image bug for Safari
In the same place as the styles

Cons

Only works on certain CSS properties
If not optimised can be very slow
1. transition: all;

Can

background
color
width | height: npx
margin, padding
opacity
transform

Can't

display
position
width | height: auto

List of animated properties

Bonus Round!

Responsive CSS only Carousel

What can't CSS do?

Won't work

<label>
  <input type="radio"/>
</label>

Accessibility

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

Accessible component demos

Won't Update

<div aria-expanded="false">
  ...
</div>

Accessibility with JS

$('input[type="checkbox"]').on('change', function() {
  var $content = $(this).siblings('.content')
  var $is_checked = $(this).prop('checked')
  
  $content.attr('aria-expanded', $is_checked)
})

Thanks!

Slides: https://slides.com/rhianaheath/deck-11

Twitter: @RhianaHeath

Things you can do with CSS that used to need JS

By RhianaH

Things you can do with CSS that used to need JS

MelbCSS September 2019, WebDirections Summit October 2019

1,572

RhianaH

Rhiana is a front end developer specialising in making web sites and applications accessible for people with disabilities. Combining her background in educational psychology and a love of computers.

Things you can do with CSS that used to need JS

vs

A.K.A

Why use CSS for functionality?

Users that Disable JS*

Why Disable JS?

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

Jake Archibald, Google

No-JS Fallbacks

Easy to test

Have Everything show by default

Hide & Toggle with JS not CSS

Increase JS performance

Remove JS not being used

Progressive Enhancement

Use CSS for as much functionality as possible

:focus-Within

History

Example

Pros

Cons

:target

History

Example

Pros

Cons

Future

:checked

History

Example

Pros

Cons

Future?

Bonus Round

Columns

History

Example

Pros

Cons

transitions

History

Example

Pros

Cons

Can

Can't

Bonus Round!

What can't CSS do?

Won't work

Accessibility

Won't Update

Accessibility with JS

Thanks!

Things you can do with CSS that used to need JS

More from RhianaH