Hacker News new | ask | show | jobs
by rhdunn 694 days ago
CSS stands for Cascading Style Sheets. Therefore, stylable is a suitable word for this -- i.e. having the SVG pick up the HTML document's styles.

Interactivity is different -- i.e. the SVG using JavaScript to be interacted with.

For the second example, it's just applying CSS styling:

    input:checked > svg { color: red; }
    button:hover > svg { color: teal; }
No need/use of JavaScript.
1 comments
chrismorgan 694 days ago
Yet again I direct your attention to the ticks and crosses. In the article, <iframe> has been marked as stylable. But if you’re talking about controlling the styles of the SVG from the parent document, you can’t do that. So the original article cannot be using the term in the way you are.

What CSS stands for is quite immaterial in the definition of “stylable”. Especially the C. Cascading says nothing about cross-document application.

And when I speak of interactivity, I believe I’m using a term that has been employed in some of the specs and implementations to control most or all of the distinctions I’m talking about, though I have a vague feeling there was some other magic term too that I just can’t remember. I can’t trivially find the relevant definition in the SVG spec, and the HTML Standard these days says that <img src> refers to a “non-interactive, optionally animated, image resource that is neither paged nor scripted”, admittedly separating interactivity and scripting. Interactivity includes things like links and hover states.

link
rhdunn 694 days ago
The iframe section states:

> To solve this, we could create an HTML file that contains only the <svg> tag, and reference it on the site via an <iframe>

Therefore you can attach the stylesheet containing the styles for the button/checkbox/etc. in the head of that document.

I don't know exactly how you would do this (w.r.t. propagating hover, etc. state) as I've used the embedded SVG element approach when I need styling.

link