css @import url加载样式应用深入分析

Scarlett ·

更新时间:2024-11-13

· 685 次阅读

一直以来写CSS的时候都没有过多的考虑使用@import的方式，最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式。其实对于这个问题在很早以前网络上就有相关的资料做了介绍这篇《don’t use @import》，英文的哦 (^。^)y-~~ ，不过不用担心，前端观察站点上有中文的翻译《高性能网站设计：不要使用@import》，同时在蓝色理想论坛上也有相关的讨论《@import 调用样式表的优势是什么呢？》，这个帖子的讨论是在2010年3月份的，大家可以看看。

为什么大家会关注这个@import呢，或许是因为它也是可以让页面加载样式，而且XHTML标签中<link />标签也是把我们的外部样式加载到页面中，于是就有朋友得到“不知道如何选择”的选择性综合症了。( # ▽ # )
咱也不是啥权威机构，更不是啥权威人士，但手中有权威指南和CSS手册，翻开查阅，发现这两样法宝上面提到的内容大致是相同的，简单概括一下：
@import像link一样，链接一个外部样式表到文档；
@import会影响到一些低端的浏览器（这个低端相信大家都懂，比如IE4，呃，不知道现在还有人在用这个没 -_”）；
@import必须是在<style>标签内，或者一个CSS文件中，并且是要在样式定义之前使用；
导入的外部样式定义会被文档中的定义覆盖（这个也就是加载顺序的东西了）；
可以在加载样式的同时定义为哪些设备显示，这个跟link方式是一样的；
这么一点概括内容如果有遗漏的大家继续补充一下哈。 < (￣︶￣)>
我的废话似乎多了一点，入正题，先看一下平时大家对于@import方式聊得最多的一个话题，加载顺序。既然有加载顺序，那么就肯定会有demo啦，主要的文件和代码如下所示：

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>诡异的@import</title>
<link rel="stylesheet" href="link_a.css" media="screen" />
<style type="text/css">
@import url(import_b.css);
</style>
<link rel="stylesheet" href="link_b.css" media="screen" />
</head>
<body>
<p class="linxz">ctrip.com linxz</p>
</body>
</html>

link_a.css

代码如下:
@charset "utf-8";
@import url(import_a.css);/*===== 红色 =====*/.linxz {color:#FF0000;}

import_a.css

代码如下:
@charset "utf-8";/*===== 绿色 =====*/.linxz {color:#00FF00;}

link_b.css

代码如下:
@charset "utf-8";/*===== 蓝色 =====*/.linxz {color:#0000FF;}

import_b.css

代码如下:
@charset "utf-8"; /*===== 黑色 =====*/.linxz {color:#000000;}

有了代码，然后这个时候不知道大家有没有兴趣猜一下页面最终显示的是什么颜色的文字呢。我是没兴趣，至于你们信不信我不知道，反正我信了。所以我直接看最终的页面效果，别惊讶，颜色都是一样的。

效果是一样了，但问题也跟着来了，就是大家所说的使用@import方式导入样式之后，会出现闪屏的情况，如果网速过慢样式过大导致页面被渲染延迟。这个情况到目前为止我似乎还真没碰到过，谁让我平时写页面的时候都是用link方式引入样式文件呢，罪过啊罪过，各位看� ��如果有兴趣的话，请自行尝试，这个不在本次测试范围内，但我相信这是有证可寻的。回归话题，目前这四个样式文件在各个浏览器中出现的情况是怎么样的呢，看下面的截图：

嗯，大概瞄了一下，似乎每个浏览器的表现还是存在着不少的差异，import_a.css和import_b.css出现的位置几乎没几个是相同的，再来一个图，这样或许会看得清晰一点，看不清楚那只能说明我不做设计是对的，看清楚的话，或许我可以考虑转行去做设计了。

回顾一下前面代码中需要注意的几点：
import_a.css这个文件是从link_a.css中@import进去的；
import_b.css这个是在link_b.css之前的<style>标签导入的；
页面中可以看到三个样式文件顺序是link_a.css、import_b.css、link_b.css；
再回到刚看到的页面加载瀑布流图中，我们可以发现import_a.css这个鸟货始终不在一个位置，不是在最后就是在前面一点，比较会倒腾啊；import_b.css这个文件也不赖，位置也是常变化。
import_a.css的位置变化

IE 6	IE 7	IE 8	FirFox 8	Safari 4	Chrome 15	Opera 11.11
在link_a.css加载之后立即加载import_a.css	在所有的link加载之后开始加载import_a.css	将页面中的出现的三个样式按出现的次序引入加载完之后，加载link_a.css中的import_a.css	在将页面中的link加载完之后，再加载页面中的@import，最后按照link中出现的@import加载样式	同IE 7	同IE 8	同FireFox 8

嗯，import_a.css作为存放在CSS样式文件中导入的代表，表现的让人有点迷糊，搞不清楚这到底是为什么。而import_b.css这鸟货就相对乖多了，如果不是根据@import出现的位置来加载样式，那么就是在link的样式文件加载完之后开始加载@import的样式（这个时候或许就是在页面dom全部加载完之后再加载样式的关键了，不过目前我现在测试的demo中并没有更多的加载元素，有兴趣的同学要不试试看？）
以上的一些内容主要描述的一点就是@import出现的方式不同，也间接着影响着页面加载次序。但无论是怎么样的一个加载情况，最终被浏览器解析后的渲染页面的样式情况十分一致，也就是为什么我们看到页面效果是一致的关键因素了。

嗯，终于把这篇内容写完了，不晓得这个东西大家能否理解，写在最后就一句话：@import导入的样式虽然会影响页面加载的瀑布流，但是不会影响CSS对页面的渲染结果；对页面渲染结构有影响的仅仅只是CSS出现的位置。

想到一点，其实对于@import这个东西可以在项目前期的时候将页面分割成多个模块，然后通过@import导入样式，这样便于管理和维护，最终在项目发布的时候可以通过JS或者JAVA等一系列的程序来完成CSS合并，将@import的样式直接引入到样式文件中，目前我知道的工具有鬼哥的mergeCSS和涛哥的CSSgaga（这个东西我具体没用过，但听说可以，如果不可以的话，别拿鸡蛋砸我，直接拿鸡蛋给我，我做蛋饼吃。）

import url CSS

1024 个赞