Hacker News Reader

Comment by nevir | Hacker News Reader

Each "picture" in the list is rendered via css rules defined for a single div.

Lots of box shadow shenanigans, usually

Looking at the CSS for a few of the pictures, it seems like it's more CSS backgrounds specified using lots of gradients. I wonder if it would be faster to implement an SVG-to-CSS-gradient compiler or implement the pictures directly using CSS gradients.

While what you suggest is true, the incentive for the developer here is to try out all kinds of CSS properties in tandem and rely as much on CSS as possible.

To put this all in perspective, imagine developers doing this between 2012 and 2015, where many websites were still designed by using photoshop built & sliced images as backgrounds and applied on divs to achieve glorious designs. (while still needing to load all the pictures needed to achieve such designs. Then come new fascinating CSS properties that can do away with needing static images to make those same designs. Back then, such creations brought aww to fellow developers as it was out of the ordinary.

Most often the main concern wasn't performance and efficiency.

It's also a good torture test for the browsers "inspect element" debugging tool.

i.e. the debugger tools are useless in figuring out what the different background and box-shadow rules do.

Adequately put. I am gonna use your explanation from now on whenever somebody wants to know why this exists.

Reply on news.ycombinator.com