以编程方式包含条件(特定于浏览器)样式表


Programmatic inclusion of conditional (browser-specific) stylesheets

如何通过编程方式在Drupal 6中包含特定于浏览器的样式表?

长话短说,我有一个包含非常具体的样式规则的模块,我希望只在使用该模块的页面上包含这些规则。

drupal_add_css()工作得很好,但我可能需要为某些位包含特定于ie的规则,并且我不想将这些规则添加到主站点条件样式表中。主站点的CSS已经很长了,这些更改应该与站点的其他部分分开。

如果您不想为每个页面添加条件样式表,则需要使用预处理函数。

预处理函数是允许您添加/减去将在页面上呈现的内容的钩子。在您的示例中,您希望使用适当的*_preprocess_page函数挂钩到呈现整个页面的点(因此可以访问page.tpl.php)。

在这个预处理函数中,应该像这样添加一个新变量:
<theme_name>_preprocess_page(&$vars) {
  if (condition is met) {
    $vars['my_custom_stylesheet'] = "<markup for adding a conditional stylehseet>";
  }
}

然后在page.tpl.php中添加这个新的my_custom_stylesheet变量,在page.tpl.php的<head>中有CSS样式表声明,如下所示:

<?php print $my_custom_stylesheet; ?>

就是这样。您可以在主题或模块中使用预处理函数,因此使用最有意义且最容易编写上述代码的if (condition is met)部分的方法。

可以使用条件注释

这里有一篇关于它的文章:

http://www.quirksmode.org/css/condcom.html

下面是一个片段:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

你说的是哪个版本的IE ?

你可以做以下的事情,而不包括单独的样式表:

color:#ffffff; /* default value */
_color:#ffff00; /* overwrite for IE6 */
#color:#ff0000; /* overwrite for IE7 */

样式表应该被浏览器缓存。通过将它们添加到代码中,您将阻止此功能。

只是为了跟进这一点,Drupal 7(我刚刚发现)确实支持以编程方式包括条件css,在这里的文档中提到:

电话:

drupal_add_css($directory . 'ie7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'every_page' => TRUE));

,因为它包含在Drupal 7的Zen主题中。

不管它的价值是什么,这对我正在做的项目(那是Drupal 6…)没有任何帮助,而且以编程方式注入条件css是否是个好主意的问题,我认为仍然是开放的。