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

Styles: Remove or update workaround for CSS4 selectors #465

Open
ryelle opened this issue Jul 6, 2024 · 0 comments
Open

Styles: Remove or update workaround for CSS4 selectors #465

ryelle opened this issue Jul 6, 2024 · 0 comments

Comments

@ryelle
Copy link
Contributor

ryelle commented Jul 6, 2024

In #111, CSS was added to fix the layout for browsers that don't support :where selectors.

/*
* Workaround for Gutenberg CSS4 selectors on older browsers.
*
* @link https://github.com/WordPress/gutenberg/issues/43723.
*
* Reproducing gutenberg_get_layout_style() isn't practical, so this just hardcodes the needed values.
*
* Remove this when the above issue is fixed in a stable release.
*/
body .is-layout-constrained > * {
max-width: var(--wp--style--global--content-size);
margin-left: auto !important;
margin-right: auto !important;
}
body .is-layout-constrained > .alignwide {
max-width: var(--wp--style--global--wide-size);
}
body .is-layout-constrained > .alignfull {
max-width: unset;
margin-left: unset !important;
margin-right: unset !important;
}

Since then, GB has continued to use :where frequently, though we haven't updated any other CSS, nor have we added this to any of the other child themes. :where has strong support now:

Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.
MDN

Additionally the styles added by our workaround are impacting other layout options, like aligning content left.

With workaround, centered Without workaround, left
Screen Shot 2024-07-06 at 12 10 48 Screen Shot 2024-07-06 at 12 10 54

I think it would be safe to remove this CSS, though if we need to still support non-:where browsers, we should find a way to update the code (and do we need to add this workaround to other places?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
1 participant