Demonstrating and negotiating the adoption of web design technologies: Cascading Style Sheets and the CSS Zen Garden

Figures & data

Table 1. “Official designs” added to the CSS Zen Garden.

Year	Number of “official designs” added
2003	74
2004	71
2005	42
2006	17
2007	5
2013	8

Table 2. Use of CSS properties and hacks in official submissions, by year.

	2003		2004		2005		2006		2007		2013
Stylesheets scanned	75		70		42		17		5		5
CSS properties used	87		73		64		59		63		184
Media queries used	6		3		1		0		0		172
CSS hacks used	64		55		14		9		6		34
Average selector complexity	2.24		2.08		2.15		2.08		1.77		5.28
Most common CSS property	background	1113	background	951	background	615	background	224	width	75	background	286
	width	968	margin	876	width	486	width	219	background	66	width	283
	color	881	width	872	margin	462	height	172	height	59	visibility	265
	margin	837	padding	793	padding	443	color	160	margin	43	padding	264
	padding	728	color	762	color	441	padding	147	color	42	opacity	263

Table 3. Top 40 properties in official submissions in Phase 1 and 2.

	Phase 1: 2003–2007		Phase 2: 2013
1	background	2968	background	286
2	width	2615	width	283
3	margin	2320	visibility	265
4	color	2301	padding	264
5	padding	2127	opacity	263
6	height	1809	margin	222
7	position	1244	font-size	212
8	display	935	top	200
9	top	902	position	190
10	text-decoration	892	display	164
11	left	828	color	151
12	text-align	798	height	132
13	text-indent	776	content	118
14	font-size	766	left	113
15	overflow	749	background-size	111
16	font-weight	668	background-position	81
17	white-space	643	right	73
18	margin-top	565	line-height	72
19	font	502	text-align	72
20	background-image	494	margin-top	62
21	margin-left	409	float	62
22	margin-bottom	408	z-index	57
23	border-bottom	384	font-family	51
24	padding-bottom	357	padding-top	48
25	padding-top	343	text-transform	45
26	line-height	334	background-color	45
27	font-family	299	font-weight	41
28	border	290	-webkit-transform	41
29	background-color	289	padding-bottom	41
30	background-repeat	288	max-width	40
31	z-index	278	font-style	40
32	float	271	-moz-transform	40
33	padding-left	266	text-indent	38
34	text-transform	264	overflow	38
35	voice-family	228	-ms-transform	37
36	background-position	217	-o-transform	36
37	margin-right	175	-moz-background-size	36
38	font-style	161	-webkit-background-size	36
39	border-top	145	bottom	36
40	list-style-type	141	margin-bottom	35
	A total of 99 properties		A total of 184 properties

Figure 1. a, b and c. Pixel-width dimensions specified in CSS files.

Table 4. Images found in the CSSZG GitHub repository.

Phase 1: 2003–2007	Phase 2: 2013
745 JPG images	7 JPG images
2157 GIF images	1 GIF image
183 PNG images	32 PNG images
0 SVG images	16 SVG images
3085 total images	56 total images
Total file size 25.7MB	Total file size 2.13MB
Total folders searched 212	Total folders searched 7
121.5 kb per design	304kb per design
14.6 images per design	8 images per design

Table 5. Forensic examination of image file information in the GitHub repository.

GIF images: 2142	Non-GIF images: 1000
GIF images were found not to contain identifiable text strings	Adobe software-related text strings in non-GIF images	752 include the text string “adobe”
		98 include the text string “imageready”
		45 include the text string “photoshop”
	Macromedia software-related text strings in non-GIF images	65 contain the text string “fireworks”

Table 6. Use of CSS properties and hacks in all unofficial submissions.

Stylesheets scanned	481
CSS properties used	213
Media queries used	10
CSS hacks used	450
Average selector complexity	2.05
Most common CSS property
background	5195
width	5173
color	4940
margin	4256
padding	4201