I have multiple IE specific stylesheets that I need to add to my theme (combining them is not an option at this time), in addition to the standard ones. I am able to get this to work using the wp_enqueue_style and $wp_styles->add_data but each are output in it’s own conditional block. Is there a way to combine them all into one?
Example Code
wp_enqueue_style('styles','//mydomain.com/assets/styles/build/screen.css',array(),'1.0','screen and (min-width:1px)');
wp_enqueue_style('screen-medium','//mydomain.com/assets/styles/build/screen_medium.css',array(),'1.0','screen and (min-width:768px)');
wp_enqueue_style('styles-ie8','//mydomain.com/assets/styles/build/screen.css',array(),'1.0','screen');
wp_enqueue_style('screen-medium-ie8','//mydomain.com/assets/styles/build/screen_medium.css',array(),'1.0','screen');
$wp_styles->add_data('styles-ie8', 'conditional', 'lte IE 8');
$wp_styles->add_data('screen-medium-ie8', 'conditional', 'lte IE 8');
outputs:
<link rel="stylesheet" id='styles-css' href="https://mydomain.com/assets/styles/build/screen.css?ver=1.0" type="text/css" media="screen and (min-width:1px)" />
<link rel="stylesheet" id='screen-medium-css' href="https://mydomain.com/assets/styles/build/screen_medium.css?ver=1.0" type="text/css" media="screen and (min-width:768px)" />
<!--[if lte IE 8]>
<link rel="stylesheet" id='styles-ie8-css' href="https://mydomain.com/assets/styles/build/screen.css?ver=1.0" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" id='screen-medium-ie8-css' href="https://previewext.3m.com/3m_theme_assets/themes/3MTheme/assets/styles/build/screen_medium.css?ver=1.0" type="text/css" media="screen" />
<![endif]-->
where what I would like is…
<link rel="stylesheet" id='styles-css' href="https://mydomain.com/assets/styles/build/screen.css?ver=1.0" type="text/css" media="screen and (min-width:1px)" />
<link rel="stylesheet" id='screen-medium-css' href="https://mydomain.com/assets/styles/build/screen_medium.css?ver=1.0" type="text/css" media="screen and (min-width:768px)" />
<!--[if lte IE 8]>
<link rel="stylesheet" id='styles-ie8-css' href="https://mydomain.com/assets/styles/build/screen.css?ver=1.0" type="text/css" media="screen" />
<link rel="stylesheet" id='screen-medium-ie8-css' href="https://previewext.3m.com/3m_theme_assets/themes/3MTheme/assets/styles/build/screen_medium.css?ver=1.0" type="text/css" media="screen" />
<![endif]-->
I tried using an array for the $wp_styles->add_data(array('styles-ie8', 'screen-medium-ie8-css'), 'conditional', 'lte IE 8') but that didn’t work and errored out the page.
Any example I’ve found searching only uses one stylesheet per conditional block. I need to add about 5 or 6 with the same condition, so would ideally like to combine them, yet still use wp_enqueue_style.
