Live data from Hacker News

Full-Bleed Layout Using CSS Grid

joshwcomeau.com

241–250 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#241

Earlier quoted context omitted.

Wouldn’t that be Chrome? The ubiquity leads to lazy developers testing only on it. Maybe some fancy SVGs saying “Best viewed on Chrome!” To really rub it in :)

> SVGs saying “Best viewed on Chrome!” HA! Chrome absolutely SUCKS at displaying SVGs. I rarely use them and I've already found two stupid bugs. One super weird one (probably too much caching) where an animated element in a clone didn't inherit colours while its non-animated siblings do. This one is fixed now. What isn't fixed yet is that `filter: hue-rotate(90deg)` applied to an SVG child element doesn't do anything…

Safari also has its share of SVG bugs, like this one: https://stackoverflow.com/questions/31150919/svg-background-...

Re: Full-Bleed Layout Using CSS Grid

#242

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.)

> This is a bad design because you're tying the child elements to the grid layout of the parent

Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name your grid areas.

There is absolutely nothing in CSS Grid specifications that urges you to fill in all the possible areas, or, in fact, any of the areas. Or make it 2D. If you can use it to solve your layout problem in an elegant way, that's a good thing. The solution in the linked article is semantically sound and elegant -- obviously far more elegant than the proposed alternative of adding control markup to every single child.

Re: Full-Bleed Layout Using CSS Grid

#243
post #159

Earlier quoted context omitted.

The new IE.

Very disingenuous of you. IE was a trashfire because it refused to do anything in a standard way, meaning it had to be specially catered for. Safari is slow to follow the standards but at least its compliant. A engine that isn't Chrome is very essential for keeping the web open, especially since Firefox user share keeps going down.

Safari has a lot of issues outside of just being behind the standards. I've encountered background and z-index jank, form issues, SVG issues and even mouse event issues. If you are a web developer, there's a good chance your codebase has Safari bugfixes.

Re: Full-Bleed Layout Using CSS Grid

#244

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

This displays a very mediocre grasp on, at the very least, web semantics and CSS Grid. (Also, an emotional disposition against a simple piece of web technology. Wild.) > This is a bad design because you're tying the child elements to the grid layout of the parent Apart from that sentence carrying very little internal logic and abusing the word "because", there is a simple fix to what, I think, is your point: Name you…

I fail to see anything in your reply that disputes anything OP said

Re: Full-Bleed Layout Using CSS Grid

#245

I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…

I've noticed that some people mistake 'the best extant X' with 'X has no problems.' For instance, 'Y is a problem with X' will often receive the response 'Nuh-uh, because extant Z also has problem Y but is worse than X in other respects.' Look for this particularly in conversations about smartphones. > > iphones have poor battery life, I'd like a phone that keeps a charge for a full week at least. > No you're wrong b…

I've also noticed this. It seema to be especially common amongst proponents of capitalism:

>> 21st century capitalism a wealth concentration problem

> No you're wrong because communism is terrible.

Re: Full-Bleed Layout Using CSS Grid

#246
post #167

Earlier quoted context omitted.

Pardon me, but I've read tens of technical references, rationales and getting started's in my life, but not a single one was so ritualistic and/or useless for practicing as everything about css. The reason is... Their knowledge of CSS is built from a set of "how do I do X in CSS" searches Because "box model and selector specificity" is light years away from how to do X. If you want an analogy, you are suggesting to w…

CSS is a top-down language, not a constraint language. It is not surprising that you cannot construct things in the same way as you would in a constraint-based layout system. I am sure I could discover an equal "simple" example that is easy in CSS but difficult/impossible in GTK. That you cannot use a hammer in the same way as a crowbar, even though they are both blunt instruments, is not a condemnation of the hammer…

You just switched from blaming me for not knowing css to blaming me for not using the right tool, as if I had a clear way to do that. It is nothing new and was propheted in bla-blah paragraph. But if you ever tried to size-match in JS, you know that it is not a trivial task. First, an element must be temporarily placed into document.body for all styles to apply correctly. Second, it must repeat all of the hierarchy it was in, which requires to break/duplicate a component encapsulation in your code. Third, in a narrow-width situation you simply cannot guess what surrounding containers would do to the effective width/height based on an intrinsic geometry. Not even speaking of cpu/battery issues, these three alone make it possible only in theory. And no, there is no library for that to "just work" in your project.

I am sure I could discover an equal "simple" example that is easy in CSS but difficult/impossible in GTK.

I doubt it, really. I mean, you could find something for base gtk (which is already out of reach compared to css in ui geometry, because it was done for it), or for the fact that gtk is not a networking engine, but it is just a bunch of predefined containers, calculation phases and signals in C. It is easily extensible in a native way and hides no knowledge about how everything looks or works. Gtk is an example of how you expose distinct particles, pre-implement few useful combinations, and then users build a universe with them. Css is an example of ritualistic black box that hides almost everything about its geometry and requires a non-trivial effort for really basic things. E.g. in css, you have to struggle with dumbest things like a one-pixel vertical scroll in a single-line input. My complaint is not "css is not gtk-like", it is "css is incomplete and unreasoned AF in its own model".

Re: Full-Bleed Layout Using CSS Grid

#247

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

My use case would be to style markdown exports and it's really a pain to add divs everywhere and it screws with the timelessness of your document. A few years ago I used js to achieve full bleed.

Re: Full-Bleed Layout Using CSS Grid

#248

If a site like Wikipedia is too wide, wouldn't you just make your browser window thinner? Mine has never been wider than half the display since I got a widescreen LCD ~ 15 years ago.

What do you display on the rest of your screen? Doesn't it distract you from what you are reading in your browser?

Interestingly, before they added the iOS-style fullscreen mode, the "maximise" button on Mac OS X would actually just fit the window to the content, rather than the screen.

A common frustration to those used to Windows or Linux, while the Mac folks were equally confused about why people wanted full-width windows with miles of empty space on either side.

Re: Full-Bleed Layout Using CSS Grid

#249

Earlier quoted context omitted.

Wouldn’t that be Chrome? The ubiquity leads to lazy developers testing only on it. Maybe some fancy SVGs saying “Best viewed on Chrome!” To really rub it in :)

No, the definition of "the new IE" is to not support the latest features. Pick some other phrase for "most popular"

The definition of "the new IE" is not not supporting the latest features (IE had plenty of "new" features—see e.g. filters, VML, XMLHttpRequest). The issue with IE was that it supported it's own proprietary features without consultation nor coordination with competitors. Something it was only able to do due to its market monopoly.

Yes, Chrome does this too.

It's slightly better in that it tends to submit them to standards bodies after implementing them, but most of the time that's WHATWG which is a much less democratic body than others, and mostly Google-led. Either way Chrome's market monopoly leave competitors with little choice in the standards process.

Post reply on HN