Skip to content

Commit 05e54af

Browse files
joedolsonjoedolson
committed
Twenty Twenty One: Remove support for Internet Explorer.
No version of Internet Explorer is still supported by WordPress or Microsoft. Usage of Internet Explorer has dropped to about 0.1%. Remove IE-specific CSS and polyfills. Props sabernhardt, westonruter, mukesh27, joedolson. Fixes #64590. git-svn-id: https://develop.svn.wordpress.org/trunk@61628 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 3c6777d commit 05e54af

11 files changed

Lines changed: 17 additions & 9264 deletions

File tree

‎src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css‎

Lines changed: 1 addition & 2668 deletions
Large diffs are not rendered by default.

‎src/wp-content/themes/twentytwentyone/assets/css/ie.css‎

Lines changed: 1 addition & 6331 deletions
Large diffs are not rendered by default.

‎src/wp-content/themes/twentytwentyone/assets/css/ie.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wp-content/themes/twentytwentyone/assets/js/polyfills.js‎

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1 @@
1-
/**
2-
* File polyfills.js.
3-
*
4-
* Polyfills for IE11.
5-
*/
6-
7-
/**
8-
* Polyfill for Element.closest() because we need to support IE11.
9-
*
10-
* @since Twenty Twenty-One 1.0
11-
*
12-
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
13-
*/
14-
if ( ! Element.prototype.matches ) {
15-
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
16-
}
17-
18-
if ( ! Element.prototype.closest ) {
19-
Element.prototype.closest = function( s ) {
20-
var el = this;
21-
do {
22-
if ( Element.prototype.matches.call( el, s ) ) {
23-
return el;
24-
}
25-
el = el.parentElement || el.parentNode;
26-
} while ( el !== null && el.nodeType === 1 );
27-
return null;
28-
};
29-
}
30-
31-
/**
32-
* Polyfill for NodeList.foreach() because we need to support IE11.
33-
*
34-
* @since Twenty Twenty-One 1.0
35-
*
36-
* @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
37-
*/
38-
if ( window.NodeList && ! NodeList.prototype.forEach ) {
39-
NodeList.prototype.forEach = function( callback, thisArg ) {
40-
var i;
41-
thisArg = thisArg || window;
42-
for ( i = 0; i < this.length; i++ ) {
43-
callback.call( thisArg, this[i], i, this );
44-
}
45-
};
46-
}
1+
// Polyfills for IE11 have been removed.

‎src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss‎

Lines changed: 1 addition & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1 @@
1-
.is-IE {
2-
3-
&.is-dark-theme {
4-
color: #fff;
5-
6-
*,
7-
a,
8-
.site-description,
9-
.entry-title,
10-
.entry-footer,
11-
.widget-area,
12-
.post-navigation .meta-nav,
13-
.footer-navigation-wrapper li a:link,
14-
.site-footer > .site-info,
15-
.site-footer > .site-info a,
16-
.site-footer > .site-info a:visited {
17-
color: #fff;
18-
}
19-
20-
.sub-menu-toggle svg,
21-
.sub-menu-toggle path,
22-
.post-navigation .meta-nav svg,
23-
.post-navigation .meta-nav path {
24-
fill: #fff;
25-
}
26-
27-
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
28-
background: #000;
29-
}
30-
31-
&.primary-navigation-open {
32-
@include media(mobile-only) {
33-
34-
.primary-navigation > .primary-menu-container,
35-
.menu-button-container {
36-
background-color: #000;
37-
}
38-
}
39-
}
40-
41-
.skip-link:focus {
42-
color: #21759b;
43-
}
44-
}
45-
46-
.navigation .nav-links {
47-
display: block;
48-
}
49-
50-
.post-thumbnail .wp-post-image {
51-
min-width: auto;
52-
}
53-
54-
.wp-block-group {
55-
56-
&:before,
57-
&:after {
58-
content: "";
59-
display: block;
60-
clear: both;
61-
}
62-
}
63-
64-
}
1+
// IE11 styles are removed.

‎src/wp-content/themes/twentytwentyone/assets/sass/style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,3 @@
118118
@import "07-utilities/a11y";
119119
@import "07-utilities/color-palette";
120120
@import "07-utilities/measure";
121-
@import "07-utilities/ie";

‎src/wp-content/themes/twentytwentyone/functions.php‎

Lines changed: 11 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
* as indicating support for post thumbnails.
2424
*
2525
* @since Twenty Twenty-One 1.0
26+
* @since Twenty Twenty-One 2.8 Removed editor stylesheet for Internet Explorer.
2627
*
2728
* @return void
2829
*/
@@ -123,17 +124,8 @@ function twenty_twenty_one_setup() {
123124
add_theme_support( 'dark-editor-style' );
124125
}
125126

126-
$editor_stylesheet_path = './assets/css/style-editor.css';
127-
128-
// Note, the is_IE global variable is defined by WordPress and is used
129-
// to detect if the current browser is internet explorer.
130-
global $is_IE;
131-
if ( $is_IE ) {
132-
$editor_stylesheet_path = './assets/css/ie-editor.css';
133-
}
134-
135127
// Enqueue editor styles.
136-
add_editor_style( $editor_stylesheet_path );
128+
add_editor_style( './assets/css/style-editor.css' );
137129

138130
// Add custom editor font sizes.
139131
add_theme_support(
@@ -390,23 +382,13 @@ function twenty_twenty_one_content_width() {
390382
* Enqueues scripts and styles.
391383
*
392384
* @since Twenty Twenty-One 1.0
393-
*
394-
* @global bool $is_IE
395-
* @global WP_Scripts $wp_scripts
385+
* @since Twenty Twenty-One 2.8 Removed Internet Explorer support.
396386
*
397387
* @return void
398388
*/
399389
function twenty_twenty_one_scripts() {
400-
// Note, the is_IE global variable is defined by WordPress and is used
401-
// to detect if the current browser is internet explorer.
402-
global $is_IE, $wp_scripts;
403-
if ( $is_IE ) {
404-
// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
405-
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
406-
} else {
407-
// If not IE, use the standard stylesheet.
408-
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
409-
}
390+
// The standard stylesheet.
391+
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
410392

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

422-
// Register the IE11 polyfill file.
404+
// Register the handles for unused IE11 polyfill scripts.
423405
wp_register_script(
424406
'twenty-twenty-one-ie11-polyfills-asset',
425-
get_template_directory_uri() . '/assets/js/polyfills.js',
407+
false,
426408
array(),
427409
wp_get_theme()->get( 'Version' ),
428410
array( 'in_footer' => true )
429411
);
430-
431-
// Register the IE11 polyfill loader.
432412
wp_register_script(
433413
'twenty-twenty-one-ie11-polyfills',
434-
null,
414+
false,
435415
array(),
436416
wp_get_theme()->get( 'Version' ),
437417
array( 'in_footer' => true )
438418
);
439-
wp_add_inline_script(
440-
'twenty-twenty-one-ie11-polyfills',
441-
wp_get_script_polyfill(
442-
$wp_scripts,
443-
array(
444-
'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
445-
)
446-
)
447-
);
448419

449420
// Main navigation scripts.
450421
if ( has_nav_menu( 'primary' ) ) {
451422
wp_enqueue_script(
452423
'twenty-twenty-one-primary-navigation-script',
453424
get_template_directory_uri() . '/assets/js/primary-navigation.js',
454-
array( 'twenty-twenty-one-ie11-polyfills' ),
425+
array(),
455426
wp_get_theme()->get( 'Version' ),
456427
array(
457428
'in_footer' => false, // Because involves header.
@@ -464,7 +435,7 @@ function twenty_twenty_one_scripts() {
464435
wp_enqueue_script(
465436
'twenty-twenty-one-responsive-embeds-script',
466437
get_template_directory_uri() . '/assets/js/responsive-embeds.js',
467-
array( 'twenty-twenty-one-ie11-polyfills' ),
438+
array(),
468439
wp_get_theme()->get( 'Version' ),
469440
array( 'in_footer' => true )
470441
);
@@ -630,6 +601,7 @@ function twentytwentyone_the_html_classes() {
630601
* Adds "is-IE" class to body if the user is on Internet Explorer.
631602
*
632603
* @since Twenty Twenty-One 1.0
604+
* @deprecated Twenty Twenty-One 2.8 Removed Internet Explorer support.
633605
*
634606
* @return void
635607
*/
@@ -647,7 +619,6 @@ function twentytwentyone_add_ie_class() {
647619
echo "<script>$script</script>\n";
648620
}
649621
}
650-
add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );
651622

652623
if ( ! function_exists( 'wp_get_list_item_separator' ) ) :
653624
/**

‎src/wp-content/themes/twentytwentyone/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,6 @@
6464
"build:rtl": "rtlcss style.css style-rtl.css",
6565
"build:dark-rtl": "rtlcss assets/css/style-dark-mode.css assets/css/style-dark-mode-rtl.css",
6666
"build:print": "sass assets/sass/07-utilities/print.scss:assets/css/print.css --style=expanded --source-map",
67-
"build:ie": "postcss style.css -o assets/css/ie.css",
68-
"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
6967
"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
7068
"build": "run-s \"build:*\"",
7169
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",

‎src/wp-content/themes/twentytwentyone/style-rtl.css‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5836,58 +5836,3 @@ section,
58365836
footer {
58375837
max-width: none;
58385838
}
5839-
5840-
.is-IE.is-dark-theme {
5841-
color: #fff;
5842-
}
5843-
5844-
.is-IE.is-dark-theme *,
5845-
.is-IE.is-dark-theme a,
5846-
.is-IE.is-dark-theme .site-description,
5847-
.is-IE.is-dark-theme .entry-title,
5848-
.is-IE.is-dark-theme .entry-footer,
5849-
.is-IE.is-dark-theme .widget-area,
5850-
.is-IE.is-dark-theme .post-navigation .meta-nav,
5851-
.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
5852-
.is-IE.is-dark-theme .site-footer > .site-info,
5853-
.is-IE.is-dark-theme .site-footer > .site-info a,
5854-
.is-IE.is-dark-theme .site-footer > .site-info a:visited {
5855-
color: #fff;
5856-
}
5857-
5858-
.is-IE.is-dark-theme .sub-menu-toggle svg,
5859-
.is-IE.is-dark-theme .sub-menu-toggle path,
5860-
.is-IE.is-dark-theme .post-navigation .meta-nav svg,
5861-
.is-IE.is-dark-theme .post-navigation .meta-nav path {
5862-
fill: #fff;
5863-
}
5864-
5865-
.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
5866-
background: #000;
5867-
}
5868-
@media only screen and (max-width: 481.98px) {
5869-
5870-
.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
5871-
.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
5872-
background-color: #000;
5873-
}
5874-
}
5875-
5876-
.is-IE.is-dark-theme .skip-link:focus {
5877-
color: #21759b;
5878-
}
5879-
5880-
.is-IE .navigation .nav-links {
5881-
display: block;
5882-
}
5883-
5884-
.is-IE .post-thumbnail .wp-post-image {
5885-
min-width: auto;
5886-
}
5887-
5888-
.is-IE .wp-block-group:before,
5889-
.is-IE .wp-block-group:after {
5890-
content: "";
5891-
display: block;
5892-
clear: both;
5893-
}

‎src/wp-content/themes/twentytwentyone/style.css‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5884,58 +5884,3 @@ section,
58845884
footer {
58855885
max-width: none;
58865886
}
5887-
5888-
.is-IE.is-dark-theme {
5889-
color: #fff;
5890-
}
5891-
5892-
.is-IE.is-dark-theme *,
5893-
.is-IE.is-dark-theme a,
5894-
.is-IE.is-dark-theme .site-description,
5895-
.is-IE.is-dark-theme .entry-title,
5896-
.is-IE.is-dark-theme .entry-footer,
5897-
.is-IE.is-dark-theme .widget-area,
5898-
.is-IE.is-dark-theme .post-navigation .meta-nav,
5899-
.is-IE.is-dark-theme .footer-navigation-wrapper li a:link,
5900-
.is-IE.is-dark-theme .site-footer > .site-info,
5901-
.is-IE.is-dark-theme .site-footer > .site-info a,
5902-
.is-IE.is-dark-theme .site-footer > .site-info a:visited {
5903-
color: #fff;
5904-
}
5905-
5906-
.is-IE.is-dark-theme .sub-menu-toggle svg,
5907-
.is-IE.is-dark-theme .sub-menu-toggle path,
5908-
.is-IE.is-dark-theme .post-navigation .meta-nav svg,
5909-
.is-IE.is-dark-theme .post-navigation .meta-nav path {
5910-
fill: #fff;
5911-
}
5912-
5913-
.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
5914-
background: #000;
5915-
}
5916-
@media only screen and (max-width: 481.98px) {
5917-
5918-
.is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container,
5919-
.is-IE.is-dark-theme.primary-navigation-open .menu-button-container {
5920-
background-color: #000;
5921-
}
5922-
}
5923-
5924-
.is-IE.is-dark-theme .skip-link:focus {
5925-
color: #21759b;
5926-
}
5927-
5928-
.is-IE .navigation .nav-links {
5929-
display: block;
5930-
}
5931-
5932-
.is-IE .post-thumbnail .wp-post-image {
5933-
min-width: auto;
5934-
}
5935-
5936-
.is-IE .wp-block-group:before,
5937-
.is-IE .wp-block-group:after {
5938-
content: "";
5939-
display: block;
5940-
clear: both;
5941-
}

0 commit comments

Comments
 (0)