渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器,(特)比(别)如(是)IE6等,不支持CSS3的浏览器,但是CSS3的样式又特别优秀不忍放弃 ,所以在高级浏览器中应用CSS3样式,在低级浏览器只保证基本功能。
1 什么是优雅降级
在网页开发中,优雅降级指的是一开始针对一个高版本的浏览器构建页面,先完善所有的功能。然后针对各个不同的浏览器进行测试,修复,保证低级浏览器也有基本功能 就好,低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较 大的错误之外,其它的差异将被直接忽略。也就是以高要求,高版本为基准,向下兼容。
2 什么是渐进增强
在网页开发中,渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏 览器进行效果,交互,追加各种功能以达到更好用户体验,换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。
3 两者的区别
从技术来看:
前缀CSS3(-webkit- / -moz- / -o-*)和正常CSS3在浏览器中的支持情况是这样的:
1.很久以前:浏览器前缀CSS3和正常CSS3都不支持;
2.不久之前:浏览器只支持前缀CSS3,不支持正常CSS3;
3.现在:浏览器既支持前缀CSS3,又支持正常CSS3;
4.未来:浏览器不支持前缀CSS3,仅支持正常CSS3. 代码如下:
采用优雅降级的写法,如果一个浏览器同时支持前缀写法和正常写法,后面的旧版浏览器样式就覆盖了新版样式,出现一些奇怪的问题 ,但是用渐进增强的写法就不存在这个问题。这种属性不止border-radius一个,所以为了避免这个不必要的错误,建议大家都采用渐进增强的写法。
4 更多讨论
问题1:大网站一般采取什么方式
回答1:当场搜了一下,大网站直接采用一个-webkit-xxxxxx这种方式,并未采取增强或降级
问题2:为什么加前缀
回答2:比如谷歌,老旧版本只支持前缀的写法,新版本则都兼容
问题3:为什么会出现这两个概念
回答3:主要是CSS3的出现,不同浏览器的支持程度不同