CSS3与CSS2的区别和支持性

html-css031

CSS3与CSS2的区别和支持性,第1张

制作时间

首先,笔者在制作时间上进行对比,利用CSS3制作页面远比使用CSS节省时间。因为CSS3可以直接制作很多效果用来替换图片,而使用旧CSS版本制作的页面需要制作一些图片来体现效果,所以在制作图片上也要花费很多时间。

文件数量、容量及加载时间

CSS3版本的CSS文件大小为5.2K,网页文件总数为12,总容量为767.9K;CSS版本的CSS文件为4.5K,但网页文件总数为22,网页容量为849.2K。加载时间分别是3.3秒和4.7秒。

从以上数据可见,CSS3比CSS精简很多,速度也更快。

服务器请求次数

另外一个衡量指标是服务器请求次数,一般网页中有多少文件,就会对服务器有多少次请求数。不要小看这个指标,很多网页制作高手为了减少对服务器的请求负载,才探索出CSS Sprite技术。

CSS3中一共有12个文件,CSS版本中有22个文件,所以它们对服务器的请求数分别为12和22。又是CSS3胜出。

最后,综合以上的数据,在图三中已经列出CSS3和CSS的相关数据,CSS3完胜。

这下我们可以看到CSS3除了比较美观的效果外,还有更多的优点,毕竟它是网络技术发展中的产物,必然会向更加简单实用美观的方向发展。

现在流行浏览器的最新版本都支持CSS3了,因为不支持就意味着被淘汰。

例如IE, Chrome, FireFox, Safari, Opera这5大浏览器,IE9以后也开始追赶,IE10以后支持情况已经很好了。

支持最好的应该是Chrome和FireFox了。看看下面这张图就知道对CSS3的支持情况了:

其他的浏览器往往是以这5大浏览器为内核的,比如360极速浏览器就是以Chromium(Chrome的开源版本)为内核,QQ浏览器也是,所以它们也都支持CSS3了。

您好,你的问题,我之前好像也遇到过,以下是我原来的解决思路和方法,希望能帮助到你,若有错误,还望见谅!展开全部

1、将CSS写在网页头部。CSS文件放到文档头部(及外部调用文件)会让网页加载更快,因为它们是可以被缓存的。引用外部样式也可以让页面逐渐加载。 如果把样式表放到文件里面或者文件尾部它会阻止页面元素的逐渐显示,并且还会导致页面内容以没有样式的形式显示出来,待完全加载样式后,页面重绘,影响用户体验。

2、尽量避免在HTML标签中写Style属性。CSS (Cascading Style Sheets) 通常存储在样式表中,使用外部样式表是为了解决内容与表现分离的问题,从而极大提高工作效率,减少代码冗余。

3、避免CSS表达式。CSS Expression (CSS 表达式),是一种使用动态设置 CSS 属性的方式。其实 CSS 表达式非常强大,我们可以使用 它实现 min-width 属性以及隔行换色,模拟伪类等等在你改变窗口大小,滚动页面甚至移动鼠标都会触发表达式进行求值,如此频繁的求值以至于浏览器的性能产生严重的影响。所以为了网页速度和浏览器负担,尽可能避免css表达式。

4、移除空的CSS规则。空的css规则指的是该规则不包含任何属性,如:.clear{}。空的CSS规则增加了CSS文件的大小,而且会影响CSS树的执行,所以需清除空的CSS规则。

5、正确使用Display的属性。CSS display属性基本上有inline,block,和none三个属性值。inline将他所定义的元素显示为行元素。如strong,input,span默认元素为行元素。block元素是块级元素,会使前后元素产生换行效果。hn和p元素默认情况为块级元素。none,意思是不显示元素。

除了以上的Display基本属性,腾讯总结了以下的一些合理使用的规则。

a) display:inline后不应该再使用width、height、margin、padding以及float

b) display:inline-block后不应该再使用float

c) display:block后不应该再使用vertical-align

d) display:table-*后不应该再使用margin或者float

6、不滥用Float。Float浮动在实际应用种是非常广泛,但由于Float在渲染的时候计算量比较大,对终端浏览器增加不必要的负担,所以在一些不应该使用float的地方尽量减少使用。如:无序链接替代无序列表。当可以使用a标签进行排列时,就不要使用无序列表。A标签是行元素,他会自动的横向排列。Li为块级元素,要想横向显示,必须配合float。也可以设定li标签display:inline,将块级变为行级达到页面所要的效果。这样会使代码更简洁。

7、不滥用Web字体。在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体,但浏览器遇到本机没有的字体时会进行网络下载,解析,重绘当前页面。所以多数情况下,考虑各个因素的影响我们还是应该尽量充分利用这些系统默认web安全字体实现CSS的编写。

8、不声明过多的Font-size。元素的font-size属性会自动继承它父级元素的font-size属性值,除非你重新定义覆盖它。一般来说,大多数情况下使用em或者%,这样在响应式显示时字体就能被更精细比例的字号支持。本人建议使用百分比或em来定义font-size大小,在兼容浏览器时也会得到很好的支持。所以尽量合理的定义字体大小,以便于在页面放缩的时候仍然保持良好的可读性,提高css效率。

9、值为0时不需要任何单位。0 是最好的兼容策略,0 以不变应万变。为了浏览器的兼容性和性能,值为0时不要带单位。

10、标准化各种浏览器前缀。浏览器前缀为-webkit(Chrome/Safari),-moz(Firefox),-ms(IE),-o(Opera,现在该浏览器改用blink内核,已经淘汰)。在CSS属性尚未完全成为W3C标准,我们会使用浏览器前缀。在使用时,应该先将所有私有的CSS3属性写在前面,最后再写标准的CSS3属性。使用css动画时,只使用-webkit和无前缀两种即可。我们期待所有css属性都成为标准,并且被Firefox、Chrome等所有浏览器的最新版兼容,那时就没有必要使用浏览器前缀了。

11、避免让选择符看起来像正则表达式。高级选择器,是区别于常见选择器的概念,是CSS的高级运用,也是作为扩展。在使用的时候,注意有些选择器会优先于其他选择器,有时后面的选择器也会覆盖前面的样式。虽然使用高级选择器可以大幅度的提高开发书写或修改样式表时的工作效率。但在响应式布局时,考虑到更多终端的性能应尽可能的避免看起来比较复杂的高级选择器,因为高级选择器执行耗时长且不易读懂,避免使用。非常感谢您的耐心观看,如有帮助请采纳,祝生活愉快!谢谢!