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*
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
- 2008
- Jquery UI Dialog
- 2012
- Bootstrap modals
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
- Supported in all desktop browsers
- Even IE9!
- No JS library required
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
Columns
History
2018
Multi column layout officially added to CSS 3 spec
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
- Just remember prefixes!
- Easy to make responsive, just adjust the number of columns
Cons
- Not much flexibility in how elements are positioned
- Order is up->down, left -> right
Accessibility
- Pros:
- Can make it more robust and quicker to load
- Cons
- Can't update dynamic attributes
Thanks!
Things you can do with CSS that used to need JS
By RhianaH
Things you can do with CSS that used to need JS
SydCSS October 2019
