Discussion: Methods for including IE specific CSS

[wordpress]

Discussion: Methods for including IE specific CSS

[kjellr]

If that user agent check is good enough for core, I imagine it's good enough for the theme. If it's working as is, I'm not sure it makes sense to invest in a different solution.

[aristath]

Need is a strong word...
As I've said before, the fact that we "support" IE doesn't mean that IE should have the same styles as other browsers. As long as the content is readable in IE I don't think we need to do something.

[jffng]

Considering the small percentage of users still on IE (<2% last I checked), I think conditionally loading IE styles based on the WordPress global / user agent sniffing is still the best approach.

Are there other methods that should be considered?

Conditional comments used to work, but not for IE10+.

The other approach could be feature detection, but I'm not sure it's allowed to load the theme's stylesheet via client side JS?

[aristath]

I agree with @kjellr
Though the $is_IE global is far from perfect (has lots issues with aggressive caching plugins), for the sake of simplicity it's fine to use it here.

The other approach could be feature detection, but I'm not sure it's allowed to load the theme's stylesheet via client side JS?

It's allowed and works fine. Surprisingly it's also extremely easy to do... We can simply add this in functions.php:

add_action( 'wp_footer', function() {
	?>
	<script>
	if ( ! window.CSS || ! CSS.supports( 'color', 'var(--fake-var)' ) ) {
		var style = document.createElement( 'link' );

		style.rel = 'stylesheet';
		style.type = 'text/css';
		style.href = '<?php echo esc_url( get_theme_file_uri( 'assets/css/ie.css' ) ); ?>';
		document.head.append( style );
	}
	</script>
	<?php
} );

The reason I'm suggesting it be added inline is because there's no reason to enqueue yet another script file - especially when it's that small and we need to get the URL via PHP, gzipped that's < 200 bytes.
It's equally possible to add it using wp_enqueue_script() and use wp_localize_script() to pass the file-url as a var from there, but it just adds useless overhead and will force the browser to download yet another asset for the 1-2% of users that will need it.

[carolinan]

But do we need and or want to support IE?