Skip to content

Styles: Remove or update workaround for CSS4 selectors #465

Open
@ryelle

Description

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?)

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    • Status

      🛑 Pending discussion

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions