How can I define conditional inline CSS?

<!--[if lte IE 7]>
  <style type="text/css" media="all">'. $styles_ie6 ."</style>
<![endif]-->

Comments

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Active » Postponed (maintainer needs more info)

Looking at core, I see that drupal_add_css() doesn't allow you to add inline CSS.

And, looking at core some more, you can already add inline CSS with drupal_set_html_head().

drupal_set_html_head('<!--[if lte IE 7]><style type="text/css" media="all">'. $styles_ie6 ."</style><![endif]-->');

So any API-level function for this feature that I added to the module would be a duplicate of drupal_set_html_head. With the exception that it would append the contents to $styles instead of $head. And, the location of the inline CSS inside <head> doesn't matter, so drupal_set_html_head() should be sufficient.

I just don't see any reason to duplicate drupal_set_html_head() as conditional_styles_inline($condition, $media, $css). It seems it would just promote confusion on how to use this module and promote CSS usage that went against the CSS aggregation performance feature of Drupal.

hass’s picture

hass commented

Hm... well core doesn't help here much... and drupal_set_html_head() don't work, while I need to add the inline conditional as the very last one :-(. Looks like I'm forced to keep as is. I will try to play something with this module nevertheless it works today. I only don't like

Previously, theme developers had to hard-code these lines inside their page.tpl.php template.

very much... this is simply wrong nevertheless a common used way. I have never seen my YAML for Drupal solution somewhere else, but when I've implemented it - I made this via template.php only to prevent "hardcoding it in page.tpl.php".

hass’s picture

hass commented

I have really wished your module functionality would be part of core for ages :-)

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)

I need to add the inline conditional as the very last one

Actually, you don't need it to be the last one. You could just need to make your inline CSS have a higher specificity than the CSS in the $styles files.

Or you could add conditional comments with inline CSS inside your theme's preprocess_page function.

$vars['styles'] .= '<!--[if lte IE 7]><style type="text/css" media="all">'. $styles_ie6 ."</style><![endif]-->'; would do the trick.

Also, I suspect you might find the $conditional_styles page variable useful. See the project homepage for details.

Lastly, I changed the project homepage to say “Previously, theme developers had to add these lines specifically to their page.tpl.php template or manually append them to the $styles variable.”

hass’s picture

hass commented

I'm using preprocess_page and the order of CSS files is very important and cannot change easily :-)

dealancer’s picture

dealancer commented
Title: Conditional inline CSS? » Try this

Following modules should help you:
Conditional-CSS Integration
Conditional Stylesheets