New Features!
The random()
Function is Cool!
Does random()
Have Support??
Browser Support is Not A Binary
Arbitrary Cutoff? 95% ? 100% ? Last Two ?
Support stats Are Updated Manually
Usage stats Vary Widely
Browser usage table
Which browsers are counted?
⚠️ Warning A11y Support Not Included (yet)
Mozilla Developer Network
More detailed breakdown
File and Follow Browser Issues
- Firefox issues
- Webkit issues (Safari)
- Chromium issues (Chrome/Edge/etc)
How do we do… Progressive Enhancement?
Responsive ➡ Resilient
Not Re-Writing For Every Viewport
If you have to entirely re-engineer for IE… you’re Doing It Wrong.
Consider… Features Not Browsers
Re-Define What ‘Support’ Means
Not identical, but equivalent
There is a difference between support and optimization.
- Identify core functionality.
- Make that functionality available using the simplest possible technology.
- Enhance!
This is… Progressive Enhancement
Testing fallbacks… Comment Out The Code
You can use it and not use it at the same time, because it works and it doesn’t work at the same time. It’s Quantum CSS! It’s Magic!
Jen Simmons Resilient Videos
Some issues… No Fallback Needed
Some issues… ‘Silent’ Fallback
Order of Appearance
And parse-time validation
- We can use this parse-time (syntax) validation
- Along with order-of-appearance
- To silently fall back from one value to another
h2 {
color: green;
/* discarded by old browsers before cascade */
/* wins cascade when read as valid syntax */
color: oklch(0deg 50% 50%);
}- We can use a well-supported value
- And then provide a second declaration with something new
- Old browsers will discard the new syntax as invalid at parse time
- (when filtering declarations)
- But new browsers will keep both values around in the cascade
- And the second one will win
- So order doesn’t matter for old browsers,
- But it does matter for newer browsers
- We talked about this some,
- But I want to go into it a bit more
- Because this Invalid At Computed Value Time behavior
- Is becoming more and more common in CSS
.ಠ_ಠ {
--（╯°□°）╯: ︵┻━┻;
}- It doesn’t do anything
- Unless we make it do something
.ಠ_ಠ {
--（╯°□°）╯: ︵┻━┻;
}- According to CSS syntax rules
- Valid to define
Syntactically Valid
(otherwise discarded at parse-time)
- Declarations must be syntactically valid
- But what’s that mean?
.ಠ_ಠ {
--（╯°□°）╯: ︵┻━┻;
color: var(--（╯°□°）╯);
}- Valid to access on (say) color prop
.ಠ_ಠ {
color: ︵┻━┻;
}- Only becomes invalid
- After we replace the variable
- Color property requires color syntax
var() output…
Not Validated
Until Applied
- Parse-time validation early, before cascade
- We don’t know cascaded value
Variable substitution After Cascade is Complete
- Var substitution has to wait
- Go by syntax alone
.ಠ_ಠ {
--（╯°□°）╯: ︵┻━┻;
color: var(--（╯°□°）╯);
}- Valid, but will fail later
- Will fail after the cascade
- Which is a problem…
Support Queries
Selector Queries
:has(): present, debug
:is() and :where()
Are Forgiving Selector Lists
But Not Nesting
Preference Queries
@media Not Just Print & Viewport Sizes
prefers-color-scheme
light | dark | no-preference
prefers-contrast
low | high | no-preference
prefers-reduced-motion
reduce | no-preference
prefers-reduced-transparency
reduce | no-preference
The real advance in accessibility, is providing options and adapting to user preferences.
- Adapting to preferences isn’t just a fun way
- to play with interactions (but it is fun!)
- Providing options is central to accessibility
While the author (or publisher) often wants to give the documents a distinct look and feel, the user will set preferences to make all documents appear more similar.
- And CSS was designed for it, from the start!
- It’s the whole reason we’re here today
People don’t think of themselves as disabled, so they don’t think the accessibility preference area applies to them.
- All of us use the web
- And all of us have preferences
- And a web that respects us people
- Is a more usable web for everyone
prefers-reduced-motionMedia Features
@media (hover: none) { }
@media (pointer: coarse) { }How do you sell this… To The Boss or Client?
We Don’t
It’s just the job we do
The web Is For People
Those people Rely On Our Services
Our job is Making The Web Usable
We don’t Optimize For Every Situation
We do try to Support Everyone
The details Vary Across Projects
Sort issues By Impact Priority
Content should be viewable and accessible by default.
- another design principle of the w3c
- content should be viewable and accessible by default
- Identify core functionality.
- Make that functionality available using the simplest possible technology.
- Enhance!
Care about people Over Design Purity
First Do No Harm
- This is our job as designers (engineers)
- everything else we do in this workshop
- everything else in CSS
- built around this political vision
- protect the content, protect the user
- First, Do no harm