On: SVG Triangle of Compromise

[genezeta]

In case the author reads this:

I would suggest editing your Venn diagram a bit so that it makes more sense. Something like this

  <circle class="property stylable" cx="190" cy="145" r="70"></circle>
  <text class="stylable" x="150" y="140" fill="black">stylable</text>

  <circle class="property cacheable" cx="310" cy="145" r="70"></circle>
  <text class="cacheable" x="300" y="140" fill="black">cacheable</text>

  <circle class="property dimensional" cx="250" cy="260" r="70"></circle>
  <text class="dimensional" x="210" y="280" fill="black">dimensional</text>

This way, the region where your three circles overlap actually disappears, signifying that you can't indeed get all three at the same time.

[szundi → genezeta]

You must have some pretty important work to do with this level of procrastination ongoing.

[shermantanktop → szundi]

Without side projects to avoid deadlines on now-forgotten odious tasks, we’d all be living in grass huts.

[mrled → genezeta]

This is a great point. I'm going to test some of the `<use>` suggestions I got in this thread, but if those don't pan out I'll definitely do this.

[LoganDark → genezeta]

There's a diagram on this page?

Holy shit there is. When my dark theme is enabled, the diagram is black on black. Amazing. (all that's visible is the emoji!)

[madeofpalk → LoganDark]

> When my dark theme is enabled

Like it injects/modifies the styles of pages willy-nilly? The beauty of browsers is that you're fully able to do that, but seems like a great way to just have a broken browsing experience all the time...

The page is already pretty dark!

[LightHugger → madeofpalk]

In my case, i have the standard browser dark preference active and the website obliges and shows a broken dark theme. If i instead use the style-injecty version such as dark reader, it actually fixes the website's broken dark theme and i can see the graph. So in this case, it is completely the website's fault.

[madeofpalk → LightHugger]

Weird. Neither my Firefox or Chrome show this issue.

[Modified3019 → LoganDark]

Darkreader does a really good job of preserving visibility in most cases, and is available on both mobile and desktop browsers. Definitely reconnect checking it out.

[LoganDark → Modified3019]

This is the site's native theme upon seeing that my OS is set to dark (their CSS checks `prefers-color-scheme`). I already use and enjoy Dark Reader.

[mort96 → LoganDark]

For me (Firefox on macOS, also tested with Chrome on macoS), the site's dark theme has a purple background for the diagram which makes it readable even though the background is black.

However, the SVG seems to get all its color from CSS; the color is not part of the SVG itself. Maybe that's not working in your browser?

[mrled → LoganDark]

Huh. I'm the OP, and I do have a dark mode that respects `prefers-color-scheme: dark` -- or at least, it works for me (tm). Would you mind sharing details about your dark mode theme? Is it a third party extension or maybe a browser I haven't tested?

[LoganDark → mrled]

I'm on Windows and in the system-level settings app, there's a toggle for dark mode. When I turn that on, then `prefers-color-scheme: dark` starts matching. There are zero third-party extensions or styles here, and my browser is Chromium 118.

[Grom_PE → mrled]

I think the main cause of black rectangle is the lack of support for nested CSS. At least that's what I'm seeing in my browser.

[mrled → Grom_PE]

Ohhh interesting. To anyone hitting this, I'm curious what specific browser you're using - I thought it was available ~everywhere now? https://caniuse.com/css-nesting

[everybodyknows → mrled]

Seeing only inverted smilie over black background on my iPad, dark mode or light both.

[mrled → everybodyknows]

I can't replicate on mine. If this is due to nested styles, I think you are behind on your software updates :). But also, maybe I need to hold off a bit longer before moving to nested styles.

[rav → mrled]

According to a forum post [1], e.g. iPad Mini 4 was discontinued March 2019 and is stuck on iOS 15, which doesn't support nested styles. Perhaps the issue is that people want to continue using old tablet devices that are no longer getting OS updates?

[1] https://education.apple.com/resource/250012027

[LoganDark → mrled]

It's only been available everywhere since like 2023. My browser happens to be from 2022.