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 97.0	Windows 10 64-bit	365.26ms	14.86ms	25.23ms	21	-
Chrome 96.0	Windows 10 64-bit	316.97ms	13.72ms	20.08ms	18	-
Chrome 97.0	OS X 10.15.7 64-bit	271.45ms	8.27ms	16.61ms	16	-
Chrome 99.0	Windows 10 64-bit	793.96ms	15.30ms	50.19ms	11	-
Chrome 100.0	Windows 10 64-bit	418.64ms	9.26ms	15.66ms	10	-
Chrome 96.0	OS X 10.15.7 64-bit	233.26ms	8.20ms	15.96ms	7	-
Chrome 100.0	OS X 10.15.7 64-bit	250.10ms	6.25ms	16.25ms	6	-
Chrome 99.0	OS X 10.15.7 64-bit	153.54ms	6.30ms	13.44ms	5	-
Firefox 97.0	Windows 10 64-bit	373.00ms	11.50ms	24.75ms	4	-
Safari 15.1	OS X 10.15.7	158.00ms	6.33ms	13.67ms	3	-
Chrome 98.0	OS X 10.15.7 64-bit	181.90ms	7.97ms	13.17ms	3	-
Chrome 98.0	Windows 10 64-bit	323.27ms	10.27ms	26.90ms	3	-
Chrome 96.0	Linux 64-bit	500.17ms	9.90ms	13.63ms	3	-
Chrome 98.0	Linux 64-bit	258.03ms	8.67ms	13.80ms	3	-
Safari 15.3	OS X 10.15.7	339.33ms	7.00ms	10.67ms	3	-
Firefox 96.0	Windows 10 64-bit	397.00ms	11.00ms	18.50ms	2	-
Firefox 95.0	Windows 10 64-bit	332.00ms	5.50ms	9.00ms	2	-
Firefox 98.0	Linux 64-bit	671.00ms	11.50ms	41.50ms	2	-
Firefox 98.0	Windows 10 64-bit	214.50ms	5.00ms	15.50ms	2	-
Firefox 100.0	Windows 10 64-bit	214.50ms	12.50ms	21.00ms	2	-
Firefox 99.0	Ubuntu 64-bit	603.00ms	9.00ms	21.00ms	2	-
Safari 14.0.3	OS X 10.15.6	157.00ms	4.00ms	10.00ms	1	-
Android Browser 4.0	Android 11	1212.10ms	54.90ms	78.40ms	1	-
Chrome 87.0	Linux 64-bit	251.49ms	5.70ms	7.35ms	1	-
Chrome 92.0	Linux 64-bit	317.50ms	7.90ms	13.60ms	1	-
Chrome 91.0	Linux 64-bit	406.00ms	11.00ms	32.00ms	1	-
Firefox 89.0	Ubuntu 64-bit	804.00ms	20.00ms	20.00ms	1	-
Chrome Mobile 94.0	Android 10	238.70ms	19.90ms	30.90ms	1	-
Chrome 95.0	OS X 10.15.7 64-bit	307.70ms	10.70ms	16.10ms	1	-
Safari 15.1	iOS 15.1	737.00ms	6.00ms	18.00ms	1	-
Chrome Mobile 94.0	Android 7.0	364.80ms	68.90ms	96.80ms	1	-
Firefox 94.0	Ubuntu 64-bit	188.00ms	10.00ms	19.00ms	1	-
Firefox 95.0	Ubuntu 64-bit	461.00ms	14.00ms	34.00ms	1	-
Chrome Mobile 96.0	Android 11	405.40ms	47.50ms	90.80ms	1	-
Chrome 97.0	Chrome OS 64-bit	264.40ms	16.00ms	26.40ms	1	-
Chrome Mobile 96.0	Android 9	869.90ms	64.70ms	71.30ms	1	-
Safari 15.1	iOS 15.1.1	236.00ms	4.00ms	5.00ms	1	-
Safari 15.4	OS X 10.15.7	177.00ms	3.00ms	10.00ms	1	-
Chrome 96.0	Android 11	304.70ms	34.60ms	52.80ms	1	-
Opera 82.0	Windows 10 64-bit	306.30ms	13.10ms	24.70ms	1	-
Firefox 95.0	Linux 64-bit	194.00ms	5.00ms	13.00ms	1	-
Chrome 97.0	Linux 64-bit	385.00ms	5.90ms	6.40ms	1	-
Firefox Mobile 95.0	Android 11	488.00ms	14.00ms	37.00ms	1	-
Chrome Mobile 97.0	Android 11	309.60ms	42.10ms	60.60ms	1	-
Firefox 96.0	Ubuntu 64-bit	340.00ms	12.00ms	22.00ms	1	-
Firefox 97.0	Linux 64-bit	260.00ms	4.00ms	15.00ms	1	-
Chrome 97.0	OS X 10.13.6 64-bit	302.40ms	8.50ms	11.90ms	1	-
Chrome Mobile 97.0	Android 6.0	948.20ms	24.90ms	17.60ms	1	-
Chrome Mobile 98.0	Android 11	405.20ms	52.70ms	70.70ms	1	-
Chrome Mobile 98.0	Android 10	691.10ms	53.30ms	97.50ms	1	-