3 replies

CSS color fallbacks

I'm confused by what the 'final' color would be in this instance:

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

source

My understanding is the

lab()

lab()

lab()

lab() will in over the

display-p3

display-p3

display-p3

display-p3 since it is last?
I think the p3 should be last, or behind a media query.

Any best practices?

An extremely fast CSS parser, transformer, bundler, and minifier.