Following TPAC Devices and Sensors WG discussion, this explainer explores a declarative approach for allowing web developers to ask the browser to increase the screen brightness.
An element attribute proposal was suggested. Let's call it increaseBrightness
for now. Naming is hard. 🚲
[Exposed=Window]
partial interface Element {
[Reflect] attribute boolean increaseBrightness;
}
<div id="my-qr-code" increasebrightness>
<img src="qrcode.png" width="256" height="256">
</div>
You can check for this element attribute support with:
const supported = Element.prototype.hasOwnProperty("increaseBrightness");
When an element with the increaseBrightness
attribute becomes visible to the user, the browser would take care of boosting the screen region that matches the element bounds OR increasing the overall screen brightness level if the device does not support partial screen brightness boosting.
Only elements with the increaseBrightness
attribute would trigger this behaviour. This way, web pages such the Wikipedia QR code article, would not suffer from automatic detection.
Based on the following signals, the browser MAY choose to proactively brighten an area of the screen or the whole screen, provide an affordance for the user to brighten the screen, or ignore the increaseBrightness
attribute:
- The website is in a secure browsing context.
- The element is displayed fullscreen (or the display mode of the active document is "fullscreen").
- The element is visible.
- The element is "scannable" (e.g. QR code, barcode).
Based on the following signals, the browser MAY choose to restore screen brightness automatically:
- The element is not visible anymore.
- The element is not "scannable" anymore (e.g. QR code, barcode).
- The website abuses of the
increaseBrightness
attribute and fires too many requests.
To avoid possible user fingerprinting issues, a website is not able to detect when screen brightness is increased.
Further, exiting full screen, or the "fullscreen" display mode is no longer applying, returns the screen brightness to its default state.
The following issues (on top of the existing ones) remain open for discussion:
- Unlike other proposals, the screen brightness can be increased without a user gesture. Shall we require one?
- What happens when there are multiple elements with the
increaseBrightness
attribute? Shall we boost both partial screen regions or one only?