[vagrantJin]

> Try covering dynamic-sized image with an svg surface. Try outlining a hovered element so that outline/shadow covers other items around.

I'd appreciate a visual example of what you are talking about. Seems like a far fetched, obscure-as-hell example to use as an argument. A strawman as they would say. CSS isn't perfect but it's pretty damn powerful for something I can teach a 9 year old.

We can certainly get a lot of work done within CSS's limits. For the auto-generated billion div soup, god speed and good luck.

[jancsika]

> We can certainly get a lot of work done within CSS's limits.

You can also hit the ugly points very quickly.

E.g., suppose I want to draw diagrams of text connected by Bezier curves. Looks like SVG is the obvious choice for me. But suppose I add editable text to the mix-- well, HTML5 certainly has plenty of options for me there. And the Javascript to glue a solution together however I want.

Yet, none of those options come with any CSS that allows me to align the baseline of the text in my choice of HTML element with an SVG text element of my diagram. I have to scour Stackoverflow for some holy-shit hack of nested div bullshit just to tell the browser to position HTML stuff the way it does for an SVG text element.

These rought seams joining SVG, HTML, and CSS remain very frustrating until you start reading the specs and list archives to figure out that they were very different tech developed by very different teams with very different initial purposes and use cases in mind

[afavour]

But joining SVG and HTML is really, really not something web developers get to very quickly. It's an absolute niche use case.

[jancsika]

Problems from joining SVG and HTML seem like they happen all the time, esp. judging from Stackoverflow questions. Off the top of my head, I remember that an SVG src for an img tag won't inherit from the containing DOM's CSS.

(That's not to say there aren't Javascript exeskeletons that inject the SVG directly into your DOM for you.)

[chrismorgan]

Nah, these aren’t obscure at all.

Covering a image with something (whether SVG or not) is very common, though most of the time the image’s size will be known, or at least known in one axis. We’re talking things like putting captions on top of images.

Needing hover effects to render on top of elements around is even more common—if you want a row of buttons that share borders, by far the easiest way involves this very situation. Example where `position:relative` does the magic:

  data:text/html,<style>button{border:2px solid red}button:is(:hover,:focus,:active){border-color:lime;position:relative}button+button{margin-left:-2px}</style><button>ⅰ</button><button>ⅱ</button><button>ⅲ</button>

[onethought]

If it's very common... how is it difficult?

[chrismorgan]

It isn’t.

[dmitriid]

It isn't difficult to you because you've memorised that particular hack, And, undoubtedly, many others.

It doesn't make them any less of a hack.

[chrismorgan]

Certainly neither technique for covering an image that I showed in another comment is a hack. They’re both logical, coherent and fairly obvious ways of doing it. Getting hover effects to render on top, well, I wouldn’t consider that a hack either, though it’s a little more subjective (“why does position:relative make it work?”). I say that of course those effects aren’t going to render on top by default, because rendering is done in order unless you fiddle with layers and z-indexes, so shunting the hovered element onto a new layer or increasing its z-index above its surrounds is the obvious thing and the only way it could work.

I know many things that are hacks and that I will acknowledge are hacks, but these two aren’t hacks at all. They’re straightforward and natural CSS, working in exactly the way it was designed (and in areas where that design is completely sensible).

[dmitriid]

> Certainly neither technique for covering an image that I showed in another comment is a hack. They’re both logical, coherent and fairly obvious ways of doing it.

The absolute "obvious ways":

- a wrapper div that has to be position: relative. And a display block/inline-block because otherwise it won't work. An svg and an image inside that div. The svg has to be position: absolute.

- a full-blown grid. Two elements must be forced to occupy the same cell in the grid

Ah yes. Absolutely logical and coherent and not hacks at all.

> Getting hover effects to render on top, well, I wouldn’t consider that a hack either, though it’s a little more subjective

"Not a hack": rendering is done in order, but you still have to "shunt the hovered element onto a new layer or increasing its z-index above".

And this still doesn't precisely solve the problem of "outlining a hovered element so that outline/shadow covers other items around". Because most likely you'll have layers on top of layers of "logical coherent" wrapper divs to make everything work together, and you have to spend some time figuring out how to make that particular problem actually work.

And god forbid you want to make it pretty: https://tobiasahlin.com/blog/how-to-animate-box-shadow/

[wruza]

https://news.ycombinator.com/item?id=27376496

We can certainly get a lot of work done within CSS's limits

All I really want is a linear model over current layout model. E.g.

  ...your regular css...

  .wrapper:relations {
    div.text/left == svg.line.underliner-segment/left + 5px
    div.text/baseline == svg.line.underliner-segment/bottom + 2px

    #item-a/center-x == #item-b/center-x

    #item-d/right >= #item-c/left + 20px

    */right <= $this/right - 10px
    */bottom <= $this/bottom - 10px
  }

I don't want play a detective with css properties ever, when there is a proper mathematical model for coordinate relations. Those who are fine with current CSS could then continue to craft wands and potions and everyone'd be happy.

[vagrantJin]

Right.

Thanks for this but

> I don't want play a detective with css properties ever, when there is a proper mathematical model for coordinate relations.

Designers and UI devs would probably rather just write custom shaders on canvas if they have that level mathematical prowess. For most, offloading that cognitive load to an abstraction like CSS is worth it. Let the browser do the math. Playing detective then seems like a woefully arbitrary issue to have.

Those who are fine with current CSS could then continue to craft wands and potions and everyone'd be happy.

I believe it's called the dark arts.

[geokon]

Isn't this basically a normal tagged image? Like one you'd see on instagram/facebook. It displays a little bubble at a given position with the user name of the person in the picture. When you mouse over it changes to indicate it's a link.

Sounds challenging to implement that in straight CSS :) I'd love to see a demo