color-mix()
Function is Cool!
color-mix()
Have Support??
Mozilla Developer Network
Not identical, but equivalent
There is a difference between support and optimization.
— Brad Frost, support vs optimization (2011)
- Identify core functionality.
- Make that functionality available using the simplest possible technology.
- Enhance!
— Jeremy Keith, Resilient Web Design
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, Intro to Resilient CSS
;
and (matched) }
; [present, debug]h2 {
color: myFakeColor;
}
color
)myFakeColor
.example {
--yes: calc(3em * 2);
--no: calc(3em * 2px);
}
0
when you mean something like 0
degreesAnd parse-time validation
h2 {
color: green;
/* discarded by old browsers before cascade */
/* wins cascade when read as valid syntax */
color: oklch(0deg 50% 50%);
}
.ಠ_ಠ {
--(╯°□°)╯: ︵┻━┻;
}
.ಠ_ಠ {
--(╯°□°)╯: ︵┻━┻;
}
(otherwise discarded at parse-time)
.ಠ_ಠ {
--(╯°□°)╯: ︵┻━┻;
color: var(--(╯°□°)╯);
}
.ಠ_ಠ {
color: ︵┻━┻;
}
var()
output…
Not Validated .ಠ_ಠ {
--(╯°□°)╯: ︵┻━┻;
color: var(--(╯°□°)╯);
}
button {
--fancy-color: oklch(0.8 0.1 0);
color: pink;
color: var(--fancy-color);
}
button {
--fancy-color: oklch(0.8 0.1 0);
/* color: pink; DISCARDED by cascade */
color: var(--fancy-color);
}
button {
--fancy-color: oklch(0.8 0.1 0);
/* color: pink; DISCARDED by cascade */
/* color: var(--fancy-color); INVALID */
}
var()
become…
Invalid At Computed Value Time
@supports
when setting variablesif()
function, etc@supports
:has()
[present, debug]:is()
and :where()
Are Forgiving Selector Lists
But Not Nesting
light
| dark
| no-preference
low
| high
| no-preference
reduce
| no-preference
reduce
| no-preference
The real advance in accessibility, is providing options and adapting to user preferences.
— Kate Kalcevich
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.
— Håkon Lie, Cascading HTML style sheets – a proposal
People don’t think of themselves as disabled, so they don’t think the accessibility preference area applies to them.
— Eric W Bailey, Accessibility preference settings, information architecture, and internalized ableism
prefers-reduced-motion
]@media (hover: none) { }
@media (pointer: coarse) { }
It’s just the job we do
Content should be viewable and accessible by default.
— W3C, Platform Design Principles