2014年CSS报告

国外有人把Alex的TOP1000的CSS给爬了一遍,然后做了一些统计,蛮有意思的。

属性(Properties)

  • 总共使用了1528个CSS属性(居然有这么多)
  • 使用最多的TOP5是:color, width, display, content, background-color
  • TOP50属性的使用频次占所有的85%
  • 有效CSS属性是79个(不包括私有属性)
  • 废弃的属性值有372个
  • 83种拼写错误的属性,约210个未知属性
  • * hack,在59种属性中用了70808次,最常见的是 * zoom (激活IE的hasLayout)
  • _ hack,在48种属性中用了2127次,最常见的是 _ font-family
  • 私有属性有609000个,约7%

选择器(Selectors)

  • TOP5:body, textarea, h1, pre, h2(没想到pre使用率这么高)
  • 最长选择器:.ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey 221 characters
  • 13.7%使用了id选择器
  • 84.1%使用了class选择器
  • 20.4%使用了伪类选择器
  • 0.3%使用了伪元素选择器
  • 7.5%使用了标签选择器

选择器长度分布图:

QQ20150118-1@2x

私有属性(Prefix Usage)

box-shadow border-radius transition
No prefix 79,438 103,599 43,442
-webkit 58,840 49,747 41,117
-moz 40,702 47,633 31,886
-o 1,981 5,594 27,054
-ms 823 4,576 11,371

对于旧版本IE,大多使用*_这两种hack来降级处理。

颜色(Colors)

常用颜色:

QQ20150118-2@2x

颜色常用单位:

QQ20150118-4@2x

单位(Unit)

rem的占比已经起来了,calc()居然用得这么少

QQ20150118-5@2x

字体(Fonts)

单个域名上面,使用字体数量的频率分布:

QQ20150118-6@2x

响应式设计(Responsive Design)

有89%的媒体查询,是通过min-width或max-width来做划分的。

大部分的分割方式:

  • 手机,768
  • 平板,992
  • 电脑,1200

媒体查询分割点频率分布图:

QQ20150118-7@2x

CSS框架(Framework Direction)

Bootstrap遥遥领先

QQ20150118-8@2x

资源(Assets)

png一统没话说了,2015年估计WebP等要开始上榜了

QQ20150118-9@2x

原文:

http://reports.quickleft.com/css