关于css @import url（）总结

今天在群里无意间谈论到了`@import url()`的使用情况，这个指令虽然不常出现，但其引发的争论颇为激烈。原本是因为一个简单的兼容性问题而引发了这场讨论：一个简单的`@import url(/css/a.css)`在Firefox浏览器下无法正确加载样式，大家纷纷以为是`@import`惹的祸。但在尝试使用``标签后，问题依然存在。经过一番，我们发现问题的根源在于Firefox对绝对路径的不识别。

关于`@import url()`，我们可以进行如下

1. `@import url()`与``标签的加载机制不同。``标签会在页面加载前将CSS加载完毕，而`@import url()`则是在文档完全读取后才会加载。可能会出现页面初加载时缺少CSS样式，稍后会闪现出样式的情况，特别是在网络速度较慢的情况下。

2. `@import`是CSS2中的指令，因此不支持古老的IE5浏览器。

3. 当使用JavaScript控制DOM来更改样式时，只能使用``标签，因为`@import`并非DOM可控制的范围。

4. ``标签除了能加载CSS外，还能定义RSS和rel连接属性，而`@import`只能用于加载CSS。值得注意的是，使用`@import url(x.css);`时存在最大次数的限制。经过测试，IE6浏览器中的最大次数为31次。超过这个数量后，第32个及以后的`@import`指令将不再生效。例如：

```css

@import url(1.css);

@import url(2.css);

... (以此类推至31个)

@import url(32.css); / 此处导入将不会生效 /

```

尽管`@import`的最大次数有限，但它不会影响CSS中的其他规则。例如，即使超过了最大导入次数，像`body{color:333}`这样的定义仍然可以正常显示。值得注意的是，Firefox浏览器并未发现有关于`@import`的最大值限制。既然横向导入存在最大次数限制，我们可以通过垂直导入来继续扩展样式表。最后要注意的是，尽管存在争论和限制，但CSS的`@import`语句仍具有一定的用途和灵活性，我们可以根据实际情况选择是否使用它。对于前端开发者来说，理解这些细微差别并知道如何在实际应用中调整是非常重要的。一些特定的设计和布局可能需要利用这些特性来实现独特的效果。尽管存在一些限制和挑战，但CSS的丰富性和灵活性仍然为我们提供了无尽的创意空间。同时我们也应注意到，随着技术的不断进步和浏览器的更新迭代，未来的浏览器可能会对这些问题进行改进和优化。