专门针对Windows Phone的IEMobile CSS条件注释

这听起来越来越像笑话。CSS条件注释是专门给IE浏览器用的,随着火狐浏览器、谷歌浏览器等现代浏览器的流行,CSS条件注释变得越来越重要,因为IE6/7/8等老式浏览器老是拖后腿,大量的HTML5和CSS3技术无法运行在它们上面,CSS条件注释是区别对待它们的重要方法。IE9之后的IE浏览器也开始积极的支持现代浏览器技术,这给人非常积极进步的印象,但事实上没有多大的改观,即使在最新的Windows Phone在的移动IE浏览器,我们也很多时候需要专用的IEMobile CSS条件注释来将它和其它移动浏览器区别开来对待。

<!--[if IEMobile]> 
   只在 Windows Phone 中的IE 移动浏览器中显示
<![endif]--> 

<![if !IEMobile]> 
  任何其它浏览器
<![endif]>

语法跟过去我们判断IE6/7的css条件注释语法类似。

其实这种CSS条件注释还有一个非常有用的用处。使用CSS媒体查询(media queries)语句实现自适应网页布局效果是非常优雅的,但问题是,有时候在只需要移动设备的样式时,浏览器也会将桌面样式的CSS也一并下载下来。而使用CSS条件注释来处理这个问题可能会更优秀。

也就是说,你可以把媒体查询条件放到CSS条件注释里:

<!-- [if (min-device-width: 481px)]>

<![endif]—>

将这两种语法组合起来实现让浏览器只加载必要的资源,大大的节省了带宽,提高网页的显示速度。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

壹加壹等于