281–290 of 359 posts
It feels good to see the webkit team actually doing good, publicly visible work again When I was cutting my teeth in web design, the early webkit blog and safari releases were always inspirational. The rate at which they pushed out new features in the mid 00s was astonishing
Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…
I think flutter and XAML might be other interesting ones to look at
So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like…
I'm guessing this was going to be "properties"? It kinda looks like "proprietary" instead, so let's double down on that - I propose "display: tetris;"
Reposting as a top comment for more visibility: I have a website with my photos, which doesn’t use any JS for layout. When I was making it, I considered using JS masonry libraries, but I wasn’t satisfied with the results. Proper masonry layouts which fill all available space in practice actually crop some images. Leaving space around photos is required when you don’t want cropping and want to preserve aspect ratio. T…
The problem is ordering. The current CSS-only solutions work fine as long as the order is not important. (though you will still end up with weirdness at the bottoms of the columns IIRC)
Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…
I think one classic book about it is "Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design". Never read it though.
Earlier quoted context omitted.
I've never had a case where I didn't know the reason or mechanism by which an element would be hidden. In my code, I use the `hidden` property. In that case it simplifies from $(el).is(':hidden') to el.hidden It's not quite as succint as your jquery, but you also could have written this. document.querySelectorAll(".alert").forEach(el => el.hidden = false); Is it less imperative? I mean I guess it doesn't have an expl…
> I've never had a case where I didn't know the reason or mechanism by which an element would be hidden. Unfortunately, I usually don't keep the whole codebase in my head (including libraries), so I often don't know the reason. The more general point is that I don't want to have to know, because the mechanism of how it is hidden is not what I care about. > It's not quite as succint as your jquery, but you also could…
I am wondering whether it makes sense to keep adding more "layout" options to CSS, given that we have the legacy floats and then the modern flexbox and grid layout. If there are still cases that are not covered, perhaps a better solution to to have one final constraints-based system that covers all layout cases, even if it comes at the cost of complexity. The CSS frameworks and utility libraries will then be built on…
It IS grid, lvl 3. You can achieve it with: display: grid; grid-template-rows: masonry; This is however limited to webkit. I implemented it and ditched in October 2023 already for my private news feed in gallery mode.
I have it behind a CSS test for the existence of the CSS property so it is only enabled if the browser supports it.
I do it on my portfolio site ( https://www.bennyschmidt.com ) in JavaScript by maintaining a `colCount` with each column just being `flex-direction: column`. But after seeing this I should switch to using CSS. Didn't put too much thought into it, but when I realized it wasn't immediately simple in CSS grid just did it in JS.
My order doesn't super matter but I do like to maintain it. I tried for a long time using CSS columns but I didn't have good luck with that either, though I can't remember exactly why
> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows , without any columns ) it would be a structural engineering disaster.
I think, in structural engineering terms, it refers to old natural stone wall [0] construction methods. Some bridges around me are made like this, and they're over a thousand years old. But I agree that it's not a good adjective because I had the exact same first thought. Both "natural" and "stonewall" would be better, and they're not great names either. [0] https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax…
In my opinion, thinking of this as a grid is misguided. It's barely different than flex columns. I would want to be able to have some objects take up more width than one column, or not have clean columns at all. Like "space filling" and "mosaic".
Earlier quoted context omitted.
It's not meant for things that you want to systematically go over, it's meant for things that you want to explore.
Some people want to go systematically over the items when exploring. I certainly tend to operate that way, and it’s infuriating when the UI is making it difficult for no good reason.