跳转到主要内容

6.4 用drupal_add_css加载css(下)

如果你有足够多的前端经验,你一定知道什么是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_add_css/7

/**
 
 * 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始终是第一个加载。