如果你有足够多的前端经验,你一定知道什么是css reset,你也会知道其作用一般是用于清除浏览器默认的渲染样式。而要达到这一点,通常需要让css reset样式表位于其它样式表的前面。那么问题就来了,drupal主题系统会为页面首先加载系统Css,然后加载模块的CSS最后才会加载主题中的CSS。
我们先不讨论css reset在前端中的优缺点和滥用css reset带来的性能损失,我们只假设某个特殊情况下,有一个reset.css的文件需要被第一个加载进网页,应该怎么做呢?
我们首先应该了解一下drupal_add_css的“gruop”参数,它把drupal7中样式表分为三组,它们由三个数值常量表示如下:
CSS_SYSTEM: 系统提供的css, 值 : -100
CSS_DEFAULT: 模块提供的css,记住不是CSS_MODULE, 值 : 0
CSS_THEME: 主题提供的css, 值 : +100
所有CSS_SYSTEM的样式表会被首先加载,其次是CSS_DEFAULT,最后是CSS_THEME。具体关于group和 weight的说明,请看 https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal…
/**
* Preprocesses the wrapping HTML.
*
* @param array &$variables
* Template variables.
*/
function yourtheme_preprocess_html(&$variables) {
$reset = drupal_get_path("theme", "yourtheme") . "/reset.css";
$options = array(
'group' => CSS_SYSTEM,
'weight' => -10,
);
drupal_add_css($reset, $options);
}
这样,你就把reset.css指定到系统样式表这个组里了,如果你希望它能第一个加载那么还需要对代码进行一处修改:
'group' => CSS_SYSTEM,
改为
'group' => CSS_SYSTEM - 1,
不要忘记, CSS_SYSTEM是一个数值常量,值为-100。这样group的值由-100变成 -101,从而保证reset.css始终是第一个加载。