[css-mediaqueries] Proposal: "navigation-controls" #4187
Description
Overview
This API is being proposed as a way to eliminate the "double back button" problem (seen here, on Twitters PWA in the Microsoft store). This problem arises because developers of "standalone" , "fullscreen" , and "minimal-ui" apps have no way of determining whether a back button will be provided by the user agent (the browser, OS, or hardware), and so, are forced to implement their own, to ensure that their app is functional without the browser's UI.
This will allow apps to avoid the "double back button" problem by letting them conditionally display a back button depending on whether the user agent is already displaying one. Adding a standard way to detect this means that we can avoid user-agent and viewport-size workarounds, which are not ideal for web compatibility.
Example Usage
/* Hide the back button if the browser provides any navigation controls. */
@media (navigation-controls) {
#back-button {
display: none;
}
}
/*
* Make the back button green if the browser is not showing any navigation controls.
* Note: This will not match unless the user agent understands the media query, even
* if no controls are being shown.
*/
@media (navigation-controls: none) {
#back-button {
background: green;
}
}
/*
* Make the back button red if the browser is showing one too.
* Note: If this query matches then @media (navigation-controls)
* will too.
*/
@media (navigation-controls: back) {
#back-button {
background: red;
}
}Relevant Links:
Initial Issue (from @mgiuca)
Explainer
Discourse Thread