[css-env] device body colour

[electric-skeptic]

The diversity of device body colours currently available is something which could be taken into consideration during user interface design.

Proposal

Where available, a device body colour could be employed in page background or border design decisions (or even whether a border need be included for a given device at all).

Although the device body does form part of the aesthetic, there probably aren't any accessibility benefits.

Apple's iOS and watchOS operating systems certainly make this value available to application developers already (it may exist on macOS or other manufacturer's systems), but web browsers don't have a way to expose it to web developers.

Example

.body {
  border-style: solid;
}

@media device-body-color: red {
  .body {
    border-color: white;
    background-color: auto;
  }
}

Advantages

• Seamless page display experiences which compliment user hardware choices.
• An opportunity for developer experimentation with new page boundary effects or image transparency.

Disadvantages

Device fingerprinting, possibly, subject to implementation

Reference

Media queries Level 5 is a work in progress, but the closest existing section might be Environment Blending

[Crissov]

This would make more sense as an environment variable inside env(), because vendors could want to be arbitrarily precise with the color specification, i.e. simple keywords that an MQ could match would not suffice.

[electric-skeptic]

This would make more sense as an environment variable inside env(), because vendors could want to be arbitrarily precise with the color specification, i.e. simple keywords that an MQ could match aussinnst would not suffice.

Excellent idea! I forgot about env(), but this is exactly what they should be used for. Thank you @Crissov

[svgeesus]

We used to have this in CSS Color 3, flavor which dated to the time when iMacs had brightly colored cases. It was dropped for lack of implementor interest.

(Not an argument against this proposal, just a point of reference)

[svgeesus]

This is entirely unrelated to environment blending, by the way.

[svgeesus]

I agree it makes sense as part of env()

[electric-skeptic]

We used to have this in CSS Color 3, flavor which dated to the time when iMacs had brightly colored cases. It was dropped for lack of implementor interest.

(Not an argument against this proposal, just a point of reference)

Oh wow thanks! This is interesting, and you're right, I remember it well - the majority of web-capable devices were beige or iMac G3s then. I poured over every possibly-related discussion I could find, but obviously didn't encounter this 'flavor' system colour

[jonjohnjohnson]

Just wanna bring up references to similar requests/cases previously brought to the group.

Webkits initial proposal for user agent properties - https://github.com/w3c/csswg-drafts/issues/1693

user-background-color: User's requested background color user-foreground-color: User's requested foreground color

Request for access to document-specific metadata via env() - https://github.com/w3c/csswg-drafts/issues/575

<meta name="theme-color" content="#F00B42"> h1 {color: meta("theme-color" color, red;)}

Can we solve all these together?

[electric-skeptic]

Just wanna bring up references to similar requests/cases previously brought to the group.

Can we solve all these together?

Thank you for gathering these. They seem to be related properties. Not sure if they can be consolidated into a neat collection with smart defaults or inheritance under any one of the functions without complicating some use case, but it should be an advantage for developers if they can