PURE CSS ART GALLERY

Loading artwork...

Ben Evans

www.benevansdesign.co.uk

No images, just CSS. The final part to my pointless trilogy

Still Life = https://codepen.io/ivorjetski/pen/xMJoYO Portrait = https://codepen.io/ivorjetski/pen/dBYWWZ

Edit on Codepen

Async `<link>`

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

localStorage

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Cache-API

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Browser	OS	Async	localStorage	Cache-API	Tests	Improvement
Chrome 84.0	Windows 10 64-bit	448.93ms	16.42ms	39.86ms	65	-
Chrome 91.0	Windows 10 64-bit	321.76ms	13.12ms	22.24ms	45	-
Chrome 83.0	Windows 10 64-bit	442.72ms	18.57ms	55.83ms	45	-
Chrome 90.0	Windows 10 64-bit	386.99ms	12.97ms	23.16ms	43	-
Chrome 89.0	Windows 10 64-bit	377.77ms	20.82ms	35.26ms	30	-
Chrome 91.0	OS X 10.15.7 64-bit	260.82ms	10.64ms	25.11ms	25	-
Chrome 83.0	OS X 10.15.5 64-bit	406.27ms	9.33ms	38.49ms	17	-
Chrome 84.0	OS X 10.15.5 64-bit	313.80ms	9.82ms	34.59ms	14	-
Chrome 84.0	OS X 10.15.6 64-bit	274.34ms	9.21ms	37.58ms	13	-
Chrome 90.0	OS X 10.15.7 64-bit	538.44ms	9.63ms	22.96ms	13	-
Chrome 84.0	OS X 10.14.6 64-bit	308.37ms	10.18ms	25.27ms	12	-
Firefox 82.0	Windows 10 64-bit	216.09ms	11.27ms	52.27ms	11	-
Firefox 80.0	Windows 10 64-bit	123.20ms	9.30ms	27.50ms	10	-
Chrome Mobile 84.0	Android 10	444.48ms	25.16ms	54.60ms	10	-
Firefox 81.0	Windows 10 64-bit	104.00ms	9.50ms	39.80ms	10	-
Chrome 84.0	Linux 64-bit	435.23ms	13.99ms	44.35ms	10	-
Android Browser 4.0	Android 10	484.49ms	20.71ms	41.73ms	9	-
Safari 14.0.3	OS X 10.15.6	213.44ms	5.56ms	25.44ms	9	-
Chrome 83.0	OS X 10.14.6 64-bit	281.11ms	9.57ms	30.53ms	9	-
Firefox 79.0	Windows 10 64-bit	183.00ms	10.75ms	82.13ms	8	-
Firefox 83.0	Windows 10 64-bit	146.88ms	12.38ms	35.50ms	8	-
Firefox 86.0	Windows 10 64-bit	491.14ms	12.86ms	52.29ms	7	-
Chrome 83.0	OS X 10.15.4 64-bit	564.58ms	9.22ms	40.61ms	7	-
Firefox 78.0	Windows 10 64-bit	203.57ms	13.57ms	64.43ms	7	-
Firefox 89.0	Windows 10 64-bit	427.00ms	9.43ms	19.57ms	7	-
Chrome Mobile 91.0	Android 11	336.27ms	25.38ms	52.05ms	6	-
Chrome 91.0	Linux 64-bit	385.40ms	18.47ms	34.92ms	6	-
Firefox 85.0	Windows 10 64-bit	427.17ms	9.50ms	57.33ms	6	-
null null	null	677.36ms	24.32ms	37.13ms	6	-
Safari 13.1.1	OS X 10.15.5	258.83ms	7.17ms	24.50ms	6	-
Chrome Mobile 83.0	Android 10	1316.22ms	38.05ms	85.62ms	6	-
Chrome 83.0	Linux 64-bit	734.91ms	11.98ms	39.04ms	6	-
Chrome Mobile 83.0	Android 9	653.72ms	35.75ms	72.73ms	6	-
Chrome 89.0	OS X 11.2.3 64-bit	309.43ms	10.03ms	18.59ms	6	-
Firefox 88.0	Windows 10 64-bit	252.17ms	6.50ms	17.00ms	6	-
Chrome Mobile 84.0	Android 9	948.46ms	44.48ms	86.32ms	5	-
Safari 13.1.2	OS X 10.15.4	229.80ms	12.80ms	17.60ms	5	-
Chrome 89.0	OS X 10.15.7 64-bit	205.07ms	9.21ms	30.69ms	5	-
Firefox 77.0	OS X 10.15	198.20ms	30.60ms	71.40ms	5	-
Firefox 78.0	Linux 64-bit	235.40ms	17.80ms	114.40ms	5	-
Safari 13.1.1	iOS 13.5.1	971.40ms	12.60ms	16.20ms	5	-
Safari 14.0	iOS 14.0	215.25ms	12.50ms	14.75ms	4	-
Firefox 80.0	OS X 10.15	287.50ms	10.00ms	65.25ms	4	-
Chrome 84.0	Windows Server 2008 R2 / 7 64-bit	352.56ms	20.78ms	80.93ms	4	-
Firefox 84.0	Windows 10 64-bit	178.00ms	9.25ms	25.50ms	4	-
Chrome 80.0	Linux 64-bit	818.66ms	17.01ms	41.24ms	4	-
Chrome 83.0	OS X 10.13.6 64-bit	442.14ms	20.74ms	39.13ms	4	-
Chrome 89.0	Linux 64-bit	262.25ms	18.78ms	39.57ms	4	-
Firefox 77.0	Windows 10 64-bit	223.50ms	36.50ms	96.50ms	4	-
Firefox 78.0	OS X 10.14	128.75ms	9.25ms	33.25ms	4	-