Nathan Manceaux-Panot shared his contribution to Sparkle the other day, available in version 2.5 of the de-facto standard updater library for Mac: attaching CSS to parts of the release notes that are actually new to the user.

Say you ship updates in x.x.1 increments to beta testers, but x.1.x updates on your public release channel.

Then users on the release channel with v1.0.0 installed won’t have seen the v1.0.1–v1.0.99 patch releases. But once v1.1.0 hits, they might want to know everything that changed.

Meanwhile, users on the beta/patch channel have seen everything up to and including v1.0.99, so they only want to know what’s new in v1.1.0.

With Nathan’s contribution, you can attach data-sparkle-version to release notes HTML tags and the Sparkle updater will inject CSS classes to separate what’s new from what’s currently installed from what’s old.

Adapted example form the Sparkle docs:

<section class="release" data-sparkle-version="3">
    Version 1.2: Update icon
</section>

<section class="release" data-sparkle-version="2">
    Version 1.1: Fix list
</section>

<section class="release" data-sparkle-version="1">
    Version 1.0: Everything is new
</section>

With CSS like this to select siblings with the ~ selector:

.release.sparkle-installed-version {
    opacity: 0.5;
}

.release.sparkle-installed-version ~ .release {
    display: none;
}

If you’re on v1.1, you’ll get more or less this rendition after the data-sparkle-version attributes are processed, with the effective CSS attributes in the comments next to the elements:

<!-- (nothing) -->
<section class="release">
    Version 1.2: Update icon
</div>

<!-- opacity: 0.5; -->
<section class="sparkle-installed-version">
    Version 1.1: Fix list
</div>

<!-- display: none; -->
<section class="release">
    Version 1.0: Everything is new
</div>

So the new stuff will be rendered as usual, the currently installed version will be shown but dimmed, and old releases will be hidden completely.

I really like this, because now I can publish a history of the previous ~10 versions in the release notes and Sparkle will render just a relevant subset!

Now that this is a thing, I immediately want it to change improvement, of course 😅

While CSS selectors allow to target sibling elements just fine, I’d prefer to have multiple classes for direct access, like sparkle-installed-version for the installed version, sparkle-new-version for what’s new since the installed version, and sparkle-old-version for, well, older versions than the installed. Then you can write your HTML however you like and still hide releases.