Live data from Hacker News

CSS Grid Lanes

webkit.org

151–160 of 237 posts

Re: CSS Grid Lanes

#151
post #107

Earlier quoted context omitted.

I didn't realize it was tracked like this, but I have noticed that as of iOS 26, Safari has gotten a huge number of great web features. It has WebGPU of course, but many small things like fixing up missing parts of the OPFS API that make it actually usable now. Now they even have the field-sizing CSS property [0], fixing imo the most glaring ommission from CSS: the inability to make text input boxes grow to fit the i…

I thought that was supposed to be fixed by contenteditable plaintext-only. Why was field sizing still necessary?

At least recreate their demo for us to showcase the fix. But I feel like it would be a let down that answers your question.

Re: CSS Grid Lanes

#152

Earlier quoted context omitted.

Cool stuff they're working on tends to take a very long time to reach customers' hands compared to other browsers. Just compare the "stable" and "experimental" graphs on wpt.fyi for Safari. I can't think of a single good reason why they don't adopt an "evergreen" 4/6-week update model except Not Invented Here syndrome or "it's not Apple-like, we prefer the OS team (and therefore Marketing) dictating our release sched…

The web platform doesn’t need to move this fast. Google is, often unilaterally, pushing new features and declaring them standards. In my opinion, the web should not be changing so fast that a truly open source community project couldn’t keep up. I don’t like how the web has become reliant on the largesse of billion dollar corporations. I recognise that this is a controversial take, but in my opinion what Google is do…

"Google learned from Microsoft’s mistakes and follows a novel embrace, extend, and extinguish strategy by breaking the web and stomping on the bits. Who cares if it breaks as long as we go forward." https://www.quirksmode.org/blog/archives/2021/08/breaking_th...

Re: CSS Grid Lanes

#153

I wish they'd release CSS Gap Decorations: https://developer.chrome.com/blog/gap-decorations I'm tired of having to use stupid hacks to get nice-looking borders between flex/grid items.

Have you considered using tables? It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?

> It is funny how we keep asking more and more and more even though we already have it so much better than before.

I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass.

Tables have semantic meaning. They don't support fractional units. Reflowing for mobile is impossible and you need JS hacks like splitting tables. You can't reorder natively.

Re: CSS Grid Lanes

#154

Earlier quoted context omitted.

Have you considered using tables? It is funny how we keep asking more and more and more even though we already have it so much better than before. Can we never be happy with what we have?

> It is funny how we keep asking more and more and more even though we already have it so much better than before. I've been developing web stuff for 15 years now and sometimes I can't believe comments like these. We didn't have it "so much better before". CSS sucked hard and getting things right for three devices was an incredible pain in the ass. Tables have semantic meaning. They don't support fractional units. Re…

Tbf it said “we have it so much better Than before” I think they agree with you

Re: CSS Grid Lanes

#155
post #77

Earlier quoted context omitted.

Masonry layout fixes one of the dimensions. That means either portrait or landscape images will look visibly smaller than those of the inverse aspect ratio, because their longer side must be the same length as the latter’s shorter side. Masonry works well if you have different aspect ratios of the same orientation.

Just curious, what algorithm is good for laying out images of arbitrary orientations, sizes, and aspect ratios? That seems like a pretty difficult problem. Some sort of variation of knapsack problem maybe?

I dont know what would be the best way, but I personally want each image to be represented correctly in relation to all other image. This means that the way images are laid out will looked jagged. However, as a consequence of that, it is easy to find back to a specific image. Its like when you are coding, you look at the "shape" of the code when scrolling to find that specific function definition etc..

Here is an example of the layout of a photostream that I was satisfied with.

https://frifoto.emilbratt.no/?view_mode=photo-stream&tag=All...

Re: CSS Grid Lanes

#156

Is there anything to be said about accessibility? Found the word only once in the comments.

They mentioned tabbing and screen readers quite a few times.

I found the "jumping" ordering quite concerning but further down in the article they mention "tolerance" that seems to be a way to allow the layout to be more consistent in terms of ordering.

Re: CSS Grid Lanes

#158
post #82

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

Never read a newspaper?

(Not GP poster.) I don't really have a problem with masonry layouts, but a newspaper is limited by the paper size and they have incentive to squeeze everything in there (to maximize the spread of "information"). The screen is theoretically infinite (although not for kiosks).

I do have a website with a lot of images, and at the moment everything is in a 3-across grid layout...

Re: CSS Grid Lanes

#160

Earlier quoted context omitted.

I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.

It looks pretty, but fails at basic usability. After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG…

Well not all content is meant to be read in order. A layout like this is good for content where you want to incentivise users to read in whichever order you like. So if the order is confusing you, chances are there wasn't meant to be any order at all. E.g. if you search google images google guesses some relevant order for you, but it is layed out in a dense way so you can scan with your eyes and decide which thing is most relevant for you. Whether you scan the screen left-right, top-down, randomly, bottom up, or ehatever is totally your choice.

Using such a layout for a novel or something like this would be really bad UX. But using it for an image gallery? Or a series of random articles that aren't priorized? Why not?

Post reply on HN