前段时间看到一篇关于css3功能查询的文章,感觉蛮实用的,特别是针对设备之间的兼容性问题,可以很好的解决这方面的问题。
在考虑到浏览器的兼容性问题时候,我们会在渐进增强或在优雅降级上面犹豫，做出一定的选择,现在有了@support,我们不用担心浏览器不支持css3的一些新属性了,可以放心大胆的使用了。
1.什么是渐进增强,优雅降级呢？
1.1渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
1.2优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
2.优雅降级的观点
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
3.渐进增强的观点
渐进增强观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
总结:关于优雅降级和渐进增强没有对错,看自己网站针对的客户群体,选择适合自己的。由于@support涉及到这2个的观点,所以花了点时间给大家介绍了下。
那么开始进入正文了....
4.什么是功能查询呢？
@support 允许我们可以根据浏览器对 CSS 特性的支持情况来定义不同的样式 。
下面请看这段案例,判断浏览器是否支持box布局,也就是弹性盒子模型,如果不支持则引用float布局方式
.con{
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-box;
}
.con-left{
width: 100px;
height: 50px;
background-color: blue;
}
.con-right{
width: 100px;
height: 50px;
background-color: green;
}
/**浏览器不支持弹性盒子模型布局 not 表示不支持 or表示或者条件
* 不支持弹性盒子模型,则用float布局
* [display description]
* @type {[type]}
*/
@supports not (display: box) or (display: -webkit-box)
or (display: -moz-box) or (display: -o-box) or (display: -ms-box){
/**清除浮动*/
.con:after{
content: '';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
/**加上浮动布局*/
.con-left,.con-right{
float: left;
}
}
(注:)这段代码优先使用弹性盒子模型布局,在不支持的情况下使用float布局
<div class="con">
<div class="con-left"></div>
<div class="con-right"></div>
</div>
浏览器展示效果:
大家可以清晰的看到con:after清除浮动的代码并没有加入里面,不满足条件的情况下,代码是不会运行的
5.@support简单的逻辑操作符
@support支持“not”，“and”、“or”等
你可以根据需要的清空选择not,and,or3个条件判断
我在之前的项目中曾经遇到过一个这样的问题,需要做一个模糊头像的效果,这时候我就想到了用css filter 模糊效果,当时用了这个效果之后,一些低版本的Android就不支持这个属性,这个情况怎么办呢?
总不能因为低版本的Android不支持这个属性,就放弃这个特效吧,这时候@support就起了很大的作用。
展示代码如下:
/**
* 模糊效果
*/
.blur {
filter: url(blur.svg#blur);
/* FireFox, Chrome, Opera */
-webkit-filter: blur(10px);
/* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
/* IE6~IE9 */
}
@support not (filter: blur(10px)) or (-webkit-filter: blur(10px)) or
(-moz-filter: blur(10px)) or (-ms-filter: blur(10px)) or
(-o-filter: blur(10px)) {
/** 使用模糊图片覆盖在背景上,效果比滤镜模糊差了点 */
}
总结:css3的功能查询真的蛮好用的,所以我写了这篇文章,希望大家都能知道有这个东西,然后可以在项目中去用到它
网友评论