Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-mediaqueries] Proposal: "navigation-controls" #4187

Open
fallaciousreasoning opened this issue Aug 12, 2019 · 4 comments

Comments

@fallaciousreasoning
Copy link

commented Aug 12, 2019

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

CC

@mustjab

@tabatkins

This comment has been minimized.

Copy link
Member

commented Aug 12, 2019

Sounds good to me.

The explainer's note about a positive value always assuming the presence of a back button is interesting, tho. I suppose it's reasonable that the Back button is the primary control that must always be offered; everything else is secondary and will never show up without the back button being there as well.

I probably wouldn't name a future value testing for the Forward button "back-and-forward", tho; that implies we'd need "back-and-reload"/etc too. At that point I'd just make a note in the feature that it's expected that, if the MQ is positive at all, 'back' will always match in addition to whatever other button keywords match.

@mgiuca

This comment has been minimized.

Copy link

commented Aug 16, 2019

I probably wouldn't name a future value testing for the Forward button "back-and-forward", tho; that implies we'd need "back-and-reload"/etc too. At that point I'd just make a note in the feature that it's expected that, if the MQ is positive at all, 'back' will always match in addition to whatever other button keywords match.

Sounds reasonable. Or, for more future-proofing, we could just drop the whole idea of it being used in a Boolean context, and say "you must explicitly check for "back"."

@fallaciousreasoning

This comment has been minimized.

Copy link
Author

commented Aug 19, 2019

Or, for more future-proofing, we could just drop the whole idea of it being used in a Boolean context, and say "you must explicitly check for "back"

This seems pretty reasonable to me.

@ewilligers ewilligers added the Agenda+ label Aug 19, 2019

@ewilligers

This comment has been minimized.

Copy link
Contributor

commented Aug 19, 2019

There is interest in implementing this behind a flag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.