用SCSS需要小心IE对css的几个限制
2014-02-16 17:23
441 查看
IE对CSS的限制主要有两个:
一个页面中引用的CSS只读前32个
一个CSS文件中只读前4095个选择器
关于这个问题的文章有很多,我就不细讲了。
我想讲的是在用SCSS写CSS的时候非常容易超过这第二个限制。SCSS的继承,MIXIN和其他特性非常好用,我们可能会分成很多个文件,这些文件都互相有关联,但是为了减少浏览器请求文件次数,通常会将多个文件合并压缩成一个文件。那么如果碰到一个样式量大的站点,你可能不得不为了兼容IE而将CSS分成两个以上的文件。
非常蛋疼的是,我在使用Foundation的时候碰到了这件事情。因为Foundation 已经预先提供了非常丰富的样式,我在增加新文件用自定义样式覆盖原样式时发现IE下出现了很奇怪的bug,最终发现IE只读出来了一部分的CSS。
Foundation是一个非常不错的Responsive的框架,但是显然作者们没有考虑到IE的限制问题,他们将mixin和CSS混合在一个文件中,如果在写自定义样式的时候大量引用了这些Foundation提供的mixin,那么就会在分css文件的时候非常头疼。如果不希望自己的CSS分得杂乱无章,或者两个CSS文件中出现同一段样式,那么显然得好好考虑一下怎么做。
我的项目是在后期的时候发现这个问题的。于是我纠结了很久,最终决定将foundation得所有SCSS压缩成一个文件,自定义得样式压缩成另外一个文件。而在自定义样式中再次引用了变量文件和_global.scss,所使用的Mixin除了在Global文件中的,则都拷贝出来使用。这可能是最迅速的一个解决方法。
希望Foundation的下一个版本会将Mixin和CSS彻底地分离开来。
一个页面中引用的CSS只读前32个
一个CSS文件中只读前4095个选择器
关于这个问题的文章有很多,我就不细讲了。
我想讲的是在用SCSS写CSS的时候非常容易超过这第二个限制。SCSS的继承,MIXIN和其他特性非常好用,我们可能会分成很多个文件,这些文件都互相有关联,但是为了减少浏览器请求文件次数,通常会将多个文件合并压缩成一个文件。那么如果碰到一个样式量大的站点,你可能不得不为了兼容IE而将CSS分成两个以上的文件。
非常蛋疼的是,我在使用Foundation的时候碰到了这件事情。因为Foundation 已经预先提供了非常丰富的样式,我在增加新文件用自定义样式覆盖原样式时发现IE下出现了很奇怪的bug,最终发现IE只读出来了一部分的CSS。
Foundation是一个非常不错的Responsive的框架,但是显然作者们没有考虑到IE的限制问题,他们将mixin和CSS混合在一个文件中,如果在写自定义样式的时候大量引用了这些Foundation提供的mixin,那么就会在分css文件的时候非常头疼。如果不希望自己的CSS分得杂乱无章,或者两个CSS文件中出现同一段样式,那么显然得好好考虑一下怎么做。
我的项目是在后期的时候发现这个问题的。于是我纠结了很久,最终决定将foundation得所有SCSS压缩成一个文件,自定义得样式压缩成另外一个文件。而在自定义样式中再次引用了变量文件和_global.scss,所使用的Mixin除了在Global文件中的,则都拷贝出来使用。这可能是最迅速的一个解决方法。
希望Foundation的下一个版本会将Mixin和CSS彻底地分离开来。
相关文章推荐
- 用SCSS需要小心IE对css的几个限制
- IE CSS文件限制
- div+css布局IE里最后几个字重复显示
- 纯CSS实现一个微信logo,需要几个标签?
- CSS布局兼容性:与IE搏斗的几个经典例子
- 网页设计中input标签写CSS时需要注意的几个问题
- IE加载外链CSS文件限制问题
- ie CSS 重复最后几个字bug解决方法
- 在IE中使用ActiveX控件,需要使用HTML中的标志是<OBJECT>,该标记几个重要的参数特性有:
- IE6-IE9兼容性问题列表及解决办法_补遗漏之二:CSS区分大小写,Style中height需要加px
- IE下限制输入法切换的css
- css圆角与阴影,[ie-css3.htc文件需要下载]
- 关于Firefox和IE下的CSS表现的几个问题和解决方法
- 用CSS画网格线,在IE中
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- IE与Firefox下对CSS解析的区别
- 兼容IE与firefox的css 线性渐变(linear-gradient)
- 使用 SQL Server 时需要经常用到的几个设置选项
- 多个文件合并成一个大文件后,无法打开,需要从以下几个方面找出问题?
- 如何估算MIPI Sensor需要几个lanes