Any web designer knows that having a site look good on all browsers can be a great challenge… let alone making it look good on old, out of date browsers with Internet Explorer being a main cluprit… Even though we all wish that users would get with the times and update their browsers to take advantage of the web as we enter the year 2013, I took a look and found that still up to 16% of users are on old versions of IE…
This is problematic because I did a great looking theme for Chelle Beautiful Entertainment Group recently with a very modern, yet vintage, theme. This theme has great functionality but was built to only work on modern browsers. I knew that but had no idea how terrible it would render on an older version of IE and when I finally took a look, I was hugely disappointed. It’s still not what we would love to have that 16% of users see, but it is much cleaner than it was so all in all, I am happy with the hack. It was my own fault for missing the fact that the theme was built for IE9 and newer so… I got stuck with coming up with a custom stylesheet for IE8 and lower and figuring out how to properly enqueue that stylesheet reliably.
So after much digging, I found a solution that really worked… I still had to write a bunch of custom CSS but the enqueueing method worked really well for me.
Credit and thanks to Chip Bennett and his post about WordPress enqueueing for conditionals.
To avoid making you dig… here is the code that I finally implemented in the functions.php file. Customize as you need to and, if confused, CSS-Tricks.com offers a great resource for understanding the conditional commenting method for CSS and how to code for the versions that are giving you trouble:
/*-----------------------------------------------*/
/* Dealing with Old IE
/*-----------------------------------------------*/function sweetpweb_enqueue_ie_css() {
// Register stylesheet
wp_register_style( 'sweetp-ie', get_template_directory_uri() . '/sweetp-old-ie.css' );
// Apply IE conditionals
$GLOBALS['wp_styles']->add_data( 'sweetp-ie', 'conditional', 'lt IE 9' );
// Enqueue stylesheet
wp_enqueue_style( 'sweetp-ie' );
}
add_action( 'wp_enqueue_scripts', 'sweetpweb_enqueue_ie_css' );
Have questions, I will try to help. I am no code expert so use this at your own discretion and always backup your files and site before playing with the funcitons.php file… We are not responsible if you mess something up… Happy coding.
