Alex McPherson ha hecho un interesante estudio sobre cómo se usa CSS.
Su estudio recoge una muestra de las CSS de 10.400 dominios, los 1000 primeros de Alexa y el resto de su lista de correo, es decir, hay de todo, se supone que las 1000 de Alexa tendrán un mayor cuidado en su CSS pero el resto corresponde en teoría a webs más personales o con menor presencia.
El informe es muy extenso, aquí vamos a resaltar algunas curiosidades.
Propiedades CSS
- Declaradas 1.528 propiedades diferentes.
- Las 5 más usadas:
color,width,display,content,background-color - Se han utilizado hacks (* y _ ) para antiguas versiones de IE, siendo las más comunes
* zoom y_font-family - Los vendor prefix lo utilizan el 7% de los sitios estudiados aunque los navegadores modernos no lo necesitan.
- También han encontrado propiedades no válidas de esas que en producción escribimos con algún error y luego no corregimos:
bototm,foat, andheith. - El mayor valor en un
z-indexes999999999999999999999999999o 9.99e26. (LOL) El menor-999999.
Selectores CSS
Los 5 selectores más comunes: body, textarea, h1, pre, h2
El selector más largo mide nada menos que 221 caracteres: .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
- 13.7% Selectores con #id
- 84.1% Selectores de clase
- 20.4% Selectores con un :pseudo-selector
- 0.3% Selectores con un :pseudo-element-selector
- 7.5% Selectores de elementos HTML
Colores
Para ilustrar su artículo muestra por orden los colores más populares en Internet.
#428BCAes el más utilizado como color de marca seguramente por ser de BootStrap. El 99,6% utiliza el modo de color HEX y el 0,4% rgb/rgba- La media es de 169 declaraciones de color. Este alto número indicaría un uso de color no coherente en muchos sitios.
Unidades de medida
Ganan los píxeles por goleada, seguido del %
- 77.8% usan px
- 14.2% usan %
- 6.1% em
- 1.6% rem
- 0.1% pt
- 0.1% calc()
- <0.1% vw
- <0.1% vh
- <0.1% cm
- <0.1% ex
- <0.1% in
- <0.1% mm
- <0.1% pc (1pc == 12pt)
- <0.1% vmin
- 0% ch
- 0% vmax
La media es 31 medidas para fuentes distintas por sitio, una barbaridad.
Responsive Design
El 64% utiizan algún breakpoint con media queries aunque las medidas utilizadas alrededor de los 990px indican cierto baile de resoluciones trabajadas. 768, 992, y 1200 son las que inclye Bootstrap por defecto.
Frameworks
Gana el popular Bootstrap con el 78,2% seguido de Foundation con el 15,1%
Formatos de imagen
Teniendo en cuenta background-image se ha estimado que
- 77,7% usa PNG,
- el 9,5% GIF
- 6.7% SVG
- 5,9% .jpg o .jpeg
Un buen dato aunque seguro que el SVG irá ganando con el tiempo.
El informe completo en Quick Left | Reports on Internet Performance (EN)
