以编程方式包含条件（特定于浏览器）样式表答案

【问题标题】：Programmatic inclusion of conditional (browser-specific) stylesheets以编程方式包含条件（特定于浏览器）样式表
【发布时间】：2011-04-08 21:10:31
【问题描述】：

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

长话短说，我有一个包含非常具体的样式规则的模块，我希望仅将其包含在使用该模块的页面上。

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

【问题讨论】：

标签： php css drupal-6

【解决方案1】：

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

预处理函数是允许您添加/减去将在页面上呈现的内容的钩子。在您的情况下，您希望使用适当的 *_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) 部分的函数。

【讨论】：

这似乎是最完整的答案。

【解决方案2】：

您可以使用条件 cmets。

这是一篇关于它的文章：

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

这是一个sn-p：

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

请参阅所提供链接中的文档。

【讨论】：

【解决方案3】：

你说的是哪个版本的IE？

您可以在不包含单独样式表的情况下执行以下操作：

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

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

【讨论】：

*property 也适用于 IE7 及以下版本。你确定 #property 只影响 IE7 还是像 *property 一样影响 IE6？
我从来不需要使用 *property。
我认为这没有回答我的问题。 :)

【解决方案4】：

为了跟进这一点，Drupal 7（我刚刚发现）确实支持以编程方式包括条件 css as referred to in their documentation here:

来电：

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 是否是一个好主意的问题根本没有帮助，我认为仍然开放。

【讨论】：