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