Upgrade Electron Chromium version >133 to support attr()

[Qwerty.xyz]

Use case or problem

Hi, I am playing around custom css for “Spoiler” content (reddit) and I was trying to repurpose or improve callouts for this.

Being able to use the modern attr() would make anything possible and easily customizable from the text editor itself!

Can I Use? - since Chrome 133
While attr() is supported for effectively all browsers for the content property, CSS Values and Units Level 5 adds the ability to use attr() on any CSS property, and to use it for non-string values (e.g. numbers, colors).

I just upgraded to Obsidian Desktop 1.10.3 and it’s Electron (v30) app uses Chrome v124 under the hood.

process.versions

{
    "node": "20.14.0",
    // ...
    "electron": "30.1.2",
    "chrome": "124.0.6367.243"
}

navigator.userAgent

'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) obsidian/1.6.7 Chrome/124.0.6367.243 Electron/30.1.2 Safari/537.36'

It seems that Chrome 134 is available since Electron 35 and Chrome 142 is already available in Electron 39.

Electron Releases | Electron

Proposed solution

Upgrade Electron version

---

---

PS: if you are curious, basically, this is my css snippet

/* SPOILER */

:root{ --spoiler-blur: 4px; }

.spoiler { filter: blur(var(--spoiler-blur)); }
.spoiler:hover { filter: none; }

[data-callout^="#"] { filter: blur(var(--spoiler-blur)); }
[data-callout^="#"]:hover { filter: none; }

.callout[data-callout^="#"] {
  --callout-color: none;
  /*--callout-color: attr(data-callout type(<color>), white);*/
  --callout-icon: lucide-info;
}

/* */

And this is the markdown

> [!#f00]-
> this will be blurred and red

Some <span class="spoiler">secret</span> text!