Twenty Twenty-One: WordPress (5.6) site displays without style in MS IE-11

[t-p]

No style displayed in MS IE-11.

However, no such problem in FF, Chrome, Edge

I have tried in both (1) twenty twenty-one and (2) a Child theme of twenty twenty-one.

[poena]

Hi!
Thank you for reporting this.

You are right, the two stylesheets used for IE11 does not include the correct styles:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

Twenty Twenty-One uses SCSS and CSS variables that IE11 can not read.

One of the configuration files that is used to create styles for IE11 is missing, namely ​https://github.com/WordPress/twentytwentyone/blob/trunk/postcss.config.js.

This file needs to be added back and new files for Internet Explorer needs to be created.

[poena]

In these two updated CSS files you should be able to see that the CSS variables have been replaced.
The styles are not going to be identical to other browsers, but I will attach a screenshot from IE11.

[poena]

Screenshot after: Styles are loaded

[ryelle]

Patch is good. Just noting that the build:ie* commands should have errored with no PostCSS config, but it doesn't actually fail the build process so it's easy to miss.

Also, I noticed that the version in 01-settings/file-header.scss is still 1.0.0, so it makes changes in the other .css files — it should be 1.0. Doesn't seem worth opening another ticket for, does it? I think that could be done here too…?

[poena]

There is another ticket for the versioning, but the patch there would need to be remade after this either way.
https://core.trac.wordpress.org/ticket/51958

[t-p]

Instead of waiting for 5.6.1, is there some place from where I can download these missing components? or, best yet may be to update just the theme to 1.1

[poena]

@t-p You can download and apply the patch file that is attached to the ticket.

But if you are unable to update the browser, or if you rely on visitors that are using IE11, perhaps consider another theme, it is not built primarily for IE11.

[poena]

The version in file-header.scss is fixed here: #52044

[ryelle]

In 49800:

Twenty Twenty-One: Bring back PostCSS config.

Twenty Twenty-One uses PostCSS to convert the custom properties for Internet Explorer. Without a config file, the postcss command does nothing, causing issues in IE. This brings back the config from GitHub, which replaces all custom properties with the default values.

Props t-p, poena.
Fixes #52040.

[ryelle]

Reopened for backporting to the 5.6 branch.

[desrosj]

In 49824:

Twenty Twenty-One: Bring back PostCSS config.

Twenty Twenty-One uses PostCSS to convert the custom properties for Internet Explorer. Without a config file, the postcss command does nothing, causing issues in IE. This brings back the config from GitHub, which replaces all custom properties with the default values.

Props t-p, poena, ryelle.
Merges [49800] to the 5.6 branch.
Fixes #52040.

[desrosj]

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.