PURE CSS ART GALLERY

Loading artwork...

Ben Evans

www.benevansdesign.co.uk

No images, just CSS. Probably doesn't work on Edge and it's going to struggle on mobile

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 97.0	Windows 10 64-bit	346.43ms	12.82ms	79.45ms	32	-
Chrome 96.0	Windows 10 64-bit	264.18ms	11.43ms	20.09ms	30	-
Chrome 96.0	OS X 10.15.7 64-bit	265.63ms	10.06ms	70.96ms	22	-
Chrome 99.0	Windows 10 64-bit	319.32ms	10.70ms	23.89ms	15	-
Chrome 97.0	OS X 10.15.7 64-bit	374.42ms	8.54ms	15.33ms	13	-
Chrome 98.0	Windows 10 64-bit	393.66ms	12.55ms	33.53ms	11	-
Chrome 100.0	Windows 10 64-bit	215.33ms	9.61ms	17.33ms	10	-
Chrome 98.0	OS X 10.15.7 64-bit	309.88ms	9.60ms	29.34ms	5	-
Chrome 96.0	Linux 64-bit	241.34ms	11.66ms	17.82ms	5	-
Chrome 99.0	OS X 10.15.7 64-bit	275.42ms	16.16ms	33.50ms	5	-
null null	null	493.33ms	36.80ms	57.06ms	4	-
Firefox 96.0	Windows 10 64-bit	226.50ms	8.50ms	24.50ms	4	-
Firefox 97.0	Windows 10 64-bit	345.75ms	11.75ms	36.00ms	4	-
Chrome 100.0	OS X 10.15.7 64-bit	220.97ms	9.77ms	21.35ms	4	-
Firefox 95.0	Windows 10 64-bit	538.33ms	5.67ms	57.33ms	3	-
Chrome 97.0	Linux 64-bit	283.20ms	10.77ms	18.63ms	3	-
Chrome Mobile 97.0	Android 11	384.03ms	40.00ms	69.50ms	3	-
Firefox 98.0	Windows 10 64-bit	399.00ms	15.67ms	29.00ms	3	-
Chrome 101.0	Windows 10 64-bit	382.63ms	8.70ms	16.93ms	3	-
Android Browser 4.0	Android 11	1030.60ms	67.70ms	118.40ms	2	-
Chrome 92.0	Windows 10 64-bit	400.15ms	28.05ms	60.90ms	2	-
Chrome Mobile 96.0	Android 11	287.50ms	21.75ms	35.60ms	2	-
Safari 15.1	iOS 15.1.1	167.50ms	4.50ms	5.50ms	2	-
Safari 15.4	OS X 10.15.7	278.50ms	6.50ms	13.00ms	2	-
Chrome 96.0	OS X 10.14.6 64-bit	285.90ms	10.00ms	18.05ms	2	-
Opera 82.0	Windows 10 64-bit	348.15ms	38.40ms	51.60ms	2	-
Chrome 100.0	Linux 64-bit	495.30ms	8.10ms	12.65ms	2	-
Firefox 96.0	Ubuntu 64-bit	324.00ms	15.00ms	32.00ms	2	-
Chrome Mobile 97.0	Android 6.0	612.00ms	9.30ms	17.10ms	2	-
Firefox 98.0	Linux 64-bit	643.50ms	14.00ms	56.00ms	2	-
Chrome 87.0	Linux 64-bit	239.85ms	7.74ms	19.68ms	1	-
Chrome 91.0	Windows 10 64-bit	217.00ms	21.70ms	18.20ms	1	-
Safari 14.1.1	iOS 14.6	327.00ms	17.00ms	18.00ms	1	-
Chrome 91.0	Linux 64-bit	481.00ms	18.00ms	49.00ms	1	-
Safari 14.1.2	OS X 10.15.6	300.00ms	12.00ms	32.00ms	1	-
Safari 14.1.2	OS X 10.15.7	194.00ms	10.00ms	12.00ms	1	-
Chrome 94.0	OS X 10.15.7 64-bit	724.10ms	11.50ms	25.20ms	1	-
Chrome 94.0	Windows 10 64-bit	127.20ms	12.10ms	20.90ms	1	-
Chrome 93.0	Linux 64-bit	309.40ms	6.60ms	12.90ms	1	-
Samsung Internet 15.0	Android 11	399.00ms	26.50ms	47.50ms	1	-
Chrome 95.0	Linux 64-bit	332.30ms	6.10ms	11.30ms	1	-
Safari 14.1.2	iOS 14.8	266.00ms	8.00ms	9.00ms	1	-
Chrome 94.0	Linux 64-bit	670.70ms	17.50ms	16.40ms	1	-
Safari 15.1	OS X 10.15.7	185.00ms	4.00ms	16.00ms	1	-
Safari 14.1.2	OS X 10.14.6	855.00ms	13.00ms	21.00ms	1	-
Firefox 94.0	Windows 10 64-bit	209.00ms	12.00ms	22.00ms	1	-
Chrome 96.0	Chrome OS 64-bit	196.80ms	9.40ms	18.60ms	1	-
Safari 15.1	iOS 15.1	317.00ms	6.00ms	8.00ms	1	-
Chrome Mobile 94.0	Android 7.0	434.50ms	88.20ms	134.50ms	1	-
Firefox 94.0	Ubuntu 64-bit	504.00ms	12.00ms	19.00ms	1	-