ie.css

Hello,

ie.css is only loaded when the $is_IE WordPress Global Variable is true …

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' ) );
	}

This variable is set in vars.php of WordPress core as follows …

        if ( ( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], 'Trident' ) !== false ) && strpos( $_SERVER['HTTP_USER_AGENT'], 'Win' ) !== false ) {
		$is_winIE = true;
	} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false && strpos( $_SERVER['HTTP_USER_AGENT'], 'Mac' ) !== false ) {
		$is_macIE = true;
        }

As you can see above, because the variable is only set to true when the user’s browser agent contains MSIE, it’s highly unlikely that using Firefox would allow this to happen.

ie.css is used to make sure that the theme is compatible (to a fashion) with Internet Explorer which isn’t compatible with the var() CSS function used throughout the theme’s CSS.

So … it’s more likely that something is messing with the $is_IE global variable on your site. Perhaps another plugin?

Or perhaps you’ve changed the Twenty Twenty-One theme … ? Have you tried with a fresh copy of Twenty Twenty-One?

Oliver

I notice function twentytwentyone_add_ie_class() in functions.php

That just injects the class is-IE into the body element of the HTML if the JavaScript recognises the user-agent of the browser as containing MSIE.

Just looked at your site though and not seeing ie.css being loaded anymore so looks like you sorted it.

Oliver