Skip to content

Remove IE support from Twenty Twenty-One #10857

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.

Sign up for GitHub

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

Open
sabernhardt wants to merge 13 commits into
base: trunk
Choose a base branch
from
Open

Remove IE support from Twenty Twenty-One #10857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cf5fe1b
Update `functions.php` using parts of `64278.diff`
sabernhardt Feb 2, 2026
2b61a47
Remove contents of `polyfills.js`
sabernhardt Feb 2, 2026
bcd02de
Remove contents of `ie.scss`
sabernhardt Feb 2, 2026
67b5c18
Remove IE editor stylesheet from theme setup and deprecate `is-IE` cl…
sabernhardt Feb 2, 2026
102de67
Remove IE stylesheets from `package.json` build process
sabernhardt Feb 2, 2026
6f54fd3
Remove `ie` from `style.scss`
sabernhardt Feb 2, 2026
e302cdc
Remove contents of `ie.css`
sabernhardt Feb 2, 2026
5448d0c
Remove contents of `ie-editor.css`
sabernhardt Feb 2, 2026
ecffacf
Empty contents of `ie.css.map`
sabernhardt Feb 2, 2026
13bdbd5
Update `style.css`
sabernhardt Feb 2, 2026
59fa06f
Update `style-rtl.css`
sabernhardt Feb 2, 2026
f065bf2
Update `style.css.map`
sabernhardt Feb 2, 2026
58a9db8
Merge branch 't21-remove-ie-support' of https://github.com/sabernhard…
sabernhardt Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,669 changes: 1 addition & 2,668 deletions src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View file
Open in desktop

Large diffs are not rendered by default.

6,332 changes: 1 addition & 6,331 deletions src/wp-content/themes/twentytwentyone/assets/css/ie.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/wp-content/themes/twentytwentyone/assets/css/ie.css.map
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 1 addition & 46 deletions src/wp-content/themes/twentytwentyone/assets/js/polyfills.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1 @@
/**
* File polyfills.js.
*
* Polyfills for IE11.
*/

/**
* Polyfill for Element.closest() because we need to support IE11.
*
* @since Twenty Twenty-One 1.0
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
*/
if ( ! Element.prototype.matches ) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}

if ( ! Element.prototype.closest ) {
Element.prototype.closest = function( s ) {
var el = this;
do {
if ( Element.prototype.matches.call( el, s ) ) {
return el;
}
el = el.parentElement || el.parentNode;
} while ( el !== null && el.nodeType === 1 );
return null;
};
}

/**
* Polyfill for NodeList.foreach() because we need to support IE11.
*
* @since Twenty Twenty-One 1.0
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
*/
if ( window.NodeList && ! NodeList.prototype.forEach ) {
NodeList.prototype.forEach = function( callback, thisArg ) {
var i;
thisArg = thisArg || window;
for ( i = 0; i < this.length; i++ ) {
callback.call( thisArg, this[i], i, this );
}
};
}
// Polyfills for IE11 have been removed.
65 changes: 1 addition & 64 deletions src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss
View file
Open in desktop
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shell we remove this file?

Copy link
Author

@sabernhardt sabernhardt Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer not to remove any files, though removing an unused .scss file theoretically should be safe.

Original file line number Diff line number Diff line change
@@ -1,64 +1 @@
.is-IE {

&.is-dark-theme {
color: #fff;

*,
a,
.site-description,
.entry-title,
.entry-footer,
.widget-area,
.post-navigation .meta-nav,
.footer-navigation-wrapper li a:link,
.site-footer > .site-info,
.site-footer > .site-info a,
.site-footer > .site-info a:visited {
color: #fff;
}

.sub-menu-toggle svg,
.sub-menu-toggle path,
.post-navigation .meta-nav svg,
.post-navigation .meta-nav path {
fill: #fff;
}

.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
background: #000;
}

&.primary-navigation-open {
@include media(mobile-only) {

.primary-navigation > .primary-menu-container,
.menu-button-container {
background-color: #000;
}
}
}

.skip-link:focus {
color: #21759b;
}
}

.navigation .nav-links {
display: block;
}

.post-thumbnail .wp-post-image {
min-width: auto;
}

.wp-block-group {

&:before,
&:after {
content: "";
display: block;
clear: both;
}
}

}
// IE11 styles are removed.
1 change: 0 additions & 1 deletion src/wp-content/themes/twentytwentyone/assets/sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,3 @@
@import "07-utilities/a11y";
@import "07-utilities/color-palette";
@import "07-utilities/measure";
@import "07-utilities/ie";
51 changes: 11 additions & 40 deletions src/wp-content/themes/twentytwentyone/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
* as indicating support for post thumbnails.
*
* @since Twenty Twenty-One 1.0
* @since Twenty Twenty-One 2.8 Removed editor stylesheet for Internet Explorer.
*
* @return void
*/
Expand Down Expand Up @@ -123,17 +124,8 @@ function twenty_twenty_one_setup() {
add_theme_support( 'dark-editor-style' );
}

$editor_stylesheet_path = './assets/css/style-editor.css';

// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE;
if ( $is_IE ) {
$editor_stylesheet_path = './assets/css/ie-editor.css';
}

// Enqueue editor styles.
add_editor_style( $editor_stylesheet_path );
add_editor_style( './assets/css/style-editor.css' );

// Add custom editor font sizes.
add_theme_support(
Expand Down Expand Up @@ -390,23 +382,13 @@ function twenty_twenty_one_content_width() {
* Enqueues scripts and styles.
*
* @since Twenty Twenty-One 1.0
*
* @global bool $is_IE
* @global WP_Scripts $wp_scripts
* @since Twenty Twenty-One 2.8 Removed Internet Explorer support.
*
* @return void
*/
function twenty_twenty_one_scripts() {
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE, $wp_scripts;
if ( $is_IE ) {
// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
} else {
// If not IE, use the standard stylesheet.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}
// The standard stylesheet.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );

// RTL styles.
wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );
Expand All @@ -419,39 +401,28 @@ function twenty_twenty_one_scripts() {
wp_enqueue_script( 'comment-reply' );
}

// Register the IE11 polyfill file.
// Register the handles for unused IE11 polyfill scripts.
wp_register_script(
'twenty-twenty-one-ie11-polyfills-asset',
get_template_directory_uri() . '/assets/js/polyfills.js',
false,
array(),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);

// Register the IE11 polyfill loader.
wp_register_script(
'twenty-twenty-one-ie11-polyfills',
null,
false,
array(),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
wp_add_inline_script(
'twenty-twenty-one-ie11-polyfills',
wp_get_script_polyfill(
$wp_scripts,
array(
'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
)
)
);

// Main navigation scripts.
if ( has_nav_menu( 'primary' ) ) {
wp_enqueue_script(
'twenty-twenty-one-primary-navigation-script',
get_template_directory_uri() . '/assets/js/primary-navigation.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
array(),
wp_get_theme()->get( 'Version' ),
array(
'in_footer' => false, // Because involves header.
Expand All @@ -464,7 +435,7 @@ function twenty_twenty_one_scripts() {
wp_enqueue_script(
'twenty-twenty-one-responsive-embeds-script',
get_template_directory_uri() . '/assets/js/responsive-embeds.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
array(),
wp_get_theme()->get( 'Version' ),
array( 'in_footer' => true )
);
Expand Down Expand Up @@ -630,6 +601,7 @@ function twentytwentyone_the_html_classes() {
* Adds "is-IE" class to body if the user is on Internet Explorer.
*
* @since Twenty Twenty-One 1.0
* @deprecated Twenty Twenty-One 2.8 Removed Internet Explorer support.
*
* @return void
*/
Expand All @@ -647,7 +619,6 @@ function twentytwentyone_add_ie_class() {
echo "<script>$script</script>\n";
}
}
add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 Feb 4, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the function is still present as the action get removed?

Got it. Leave this


if ( ! function_exists( 'wp_get_list_item_separator' ) ) :
/**
Expand Down
2 changes: 0 additions & 2 deletions src/wp-content/themes/twentytwentyone/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@
"build:rtl": "rtlcss style.css style-rtl.css",
"build:dark-rtl": "rtlcss assets/css/style-dark-mode.css assets/css/style-dark-mode-rtl.css",
"build:print": "sass assets/sass/07-utilities/print.scss:assets/css/print.css --style=expanded --source-map",
"build:ie": "postcss style.css -o assets/css/ie.css",
"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
"build": "run-s \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
Expand Down
55 changes: 0 additions & 55 deletions src/wp-content/themes/twentytwentyone/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5836,58 +5836,3 @@ section,
footer {
max-width: none;
}

.is-IE.is-dark-theme {
color: #fff;
}

.is-IE.is-dark-theme *,
.is-IE.is-dark-theme a,
.is-IE.is-dark-theme .site-description,
.is-IE.is-dark-theme .entry-title,
.is-IE.is-dark-theme .entry-footer,
.is-IE.is-dark-theme .widget-area,
.is-IE.is-dark-theme .post-navigation .meta-nav,
.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
.is-IE.is-dark-theme .site-footer > .site-info,
.is-IE.is-dark-theme .site-footer > .site-info a,
.is-IE.is-dark-theme .site-footer > .site-info a:visited {
color: #fff;
}

.is-IE.is-dark-theme .sub-menu-toggle svg,
.is-IE.is-dark-theme .sub-menu-toggle path,
.is-IE.is-dark-theme .post-navigation .meta-nav svg,
.is-IE.is-dark-theme .post-navigation .meta-nav path {
fill: #fff;
}

.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
background: #000;
}
@media only screen and (max-width: 481.98px) {

.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
background-color: #000;
}
}

.is-IE.is-dark-theme .skip-link:focus {
color: #21759b;
}

.is-IE .navigation .nav-links {
display: block;
}

.is-IE .post-thumbnail .wp-post-image {
min-width: auto;
}

.is-IE .wp-block-group:before,
.is-IE .wp-block-group:after {
content: "";
display: block;
clear: both;
}
55 changes: 0 additions & 55 deletions src/wp-content/themes/twentytwentyone/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5884,58 +5884,3 @@ section,
footer {
max-width: none;
}

.is-IE.is-dark-theme {
color: #fff;
}

.is-IE.is-dark-theme *,
.is-IE.is-dark-theme a,
.is-IE.is-dark-theme .site-description,
.is-IE.is-dark-theme .entry-title,
.is-IE.is-dark-theme .entry-footer,
.is-IE.is-dark-theme .widget-area,
.is-IE.is-dark-theme .post-navigation .meta-nav,
.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
.is-IE.is-dark-theme .site-footer > .site-info,
.is-IE.is-dark-theme .site-footer > .site-info a,
.is-IE.is-dark-theme .site-footer > .site-info a:visited {
color: #fff;
}

.is-IE.is-dark-theme .sub-menu-toggle svg,
.is-IE.is-dark-theme .sub-menu-toggle path,
.is-IE.is-dark-theme .post-navigation .meta-nav svg,
.is-IE.is-dark-theme .post-navigation .meta-nav path {
fill: #fff;
}

.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
background: #000;
}
@media only screen and (max-width: 481.98px) {

.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
background-color: #000;
}
}

.is-IE.is-dark-theme .skip-link:focus {
color: #21759b;
}

.is-IE .navigation .nav-links {
display: block;
}

.is-IE .post-thumbnail .wp-post-image {
min-width: auto;
}

.is-IE .wp-block-group:before,
.is-IE .wp-block-group:after {
content: "";
display: block;
clear: both;
}
2 changes: 1 addition & 1 deletion src/wp-content/themes/twentytwentyone/style.css.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading