Comment by eyelidlessness | Hacker News Reader

Comment by eyelidlessness | Hacker News Reader

Parent Full thread

> I’m going to respectfully disagree with the “our brains aren’t wired” part: the most important part of the spec is the chapter of the visual formatting model which can be summarised as “each HTML element is a rectangular box” - that’s it. Simple to internalise for anyone new today and everything else builds on top of that.

This is, respectfully, absolutely insulting to people actually working in CSS in real browsers. Okay fine, it's a rectangular box. When and where does it appear? Sometimes it's undefined. What properties does it have once it does? Hoooooly crap this is undefined.

As a just today example: I discovered that two eventually overlapping linear gradients in Safari (checked in iOS) render differently after wake from sleep or dark/light mode switch. One of the gradients doesn't render at all before, and only renders in the portion of its "rectangle" after. Bug? Sure. Common-fucking-place-normal-ass-website-styling-shit? Yep.

Edit to add the real kicker: it has nothing to do with the styles of the thing with the gradients on it! It has nothing to do with accommodating the children of the parent. It's just: one parent is a grid, the other is a flex. Nothing. At. All. Changes the outcome.

Does this have anything to do with CSS? Or is it just another bug in Safari? Or do I misunderstand?

That's kind of a false dichotomy, since once you understand CSS rules on something such that it works somewhere, you spend a lot of time interpreting addendums on caniuse and trying to arrange graceful degradation.

If you only have to make it work on one browser with one version, or if the feature is extremely old, or if you can do it outside a larger system of constraints, then you can just follow the step-by-step guides the article is complaining about.

Yes, it has to do with CSS. I could have mentioned a zillion bugs in Chrome or Firefox (the only remaining major renderers), but the bugs aren’t the point. There’s far more than rectangles at work when you actually need to render things in a browser.

> There’s far more than rectangles at work when you actually need to render things in a browser.

Indeed. You're entirely correct.

But with CSS the basis is that general "everything is a rectangle" model - which makes it easier to adapt to new features when they're introduced - compared to having to basically learn-from-scratch when new layout features are added to other systems.

You are applying your ego and identity to this. The poster above you is correct, it’s just boxes.

And, why wouldn’t it just be boxes? You screens are just small little boxes (pixels), and everything you put on it takes up an area of pixels.

It has nothing to do with my ego or identity. I was a long time FE dev years ago but probably moderately skilled today. But even according to the spec it’s not just boxes. Putting aside browser quirks, there’s frickin SVG. There’s the `path` type. There’s shapes you can flow content around, including arbitrary image alpha layers. There’s radial gradients. There’s conic gradients. There’s border radii (which are non-rectangular enough a recent post on css-tricks.com featured a post on a “font” using only border-radius). There’s a whole cottage industry of CSS-only graphics.

Sure, the base primitives are rectangular and like you said why wouldn’t they be? Everything visual starts with x1/y1/x2/y2 in a sense.

CSS-for-SVG is not the same as CSS-for-SGML/XML/HTML though - it's a special case: SVG uses CSS to provide for cascading properties, but not for the visual-formatting model. But entirely I agree it's confusing and contrary to the normal use of CSS. I feel the working-group should have called it "CSP" for "Cascading SVG Properties" instead of appropriating the CSS moniker because that's led to confusing and broken expectations.

That’s an important distinction, which I appreciate. It’s worth noting that there are a lot of things in CSS-for-SGML/XML/HTML that look like CSS-for-SVG (like the aforementioned `path` type) and are decidedly non-rectangular.

Just boxes. Sure, ok by the same logic, singing is just air, writing is just words, movies are just light and sound. Code is just directions. You can reduce anything to it’s elements and it’s hard to argue, the basic truth of that, but the art is being able to do beautiful things with those elements can vary quite a bit with each medium. And with css, it is quite complex to be able do it well.

Reply on news.ycombinator.com