W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2020

[csswg-drafts] [css-mediaqueries] device body colour (#5826)

From: Gordon Smith via GitHub <sysbot+gh@w3.org>
Date: Tue, 29 Dec 2020 09:42:22 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-775798867-1609234941-sysbot+gh@w3.org>
electric-skeptic has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-mediaqueries] device body colour ==
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;
<img width="300" alt="P20 Pro - Front View" src="https://user-images.githubusercontent.com/17473696/103271984-cbdaa180-4a0f-11eb-899e-d268986d768a.png">

## 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](https://drafts.csswg.org/mediaqueries-5) is a work in progress, but the closest existing section might be [Environment Blending](https://drafts.csswg.org/mediaqueries-5/#environment-blending)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5826 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 29 December 2020 09:42:24 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:24 UTC