A very clever article (as ever) from Sara on how to ensure the content you create is accessible through RSS feeds and Reader modes (and a host of other applications).

This is something I'm guilty of. There's a kind of magic to automating content through CSS which I find very appealing, but Sara's warning here is something I'll need to keep in mind moving forward:

In order to ensure readers always get a proper reading experience, provide real content in HTML, and leave CSS pseudo-elements for decorational content that is not required for the core reading experience.

They also point out how problematic call-out content can be, and suggest hiding unnecessary content in a couple of ways. The simplest is removing it from the <article> element, which should cater for a number of scenarios (and I wonder if things like Safari's Reader mode deal with <aside> elements correctly?), but if your markup requires it to be kept there's a really clever trick using hidden:

Since the hidden attribute has a very low specificity, you can override it in your CSS using a simple display: block/flex/grid/etc..

In other words, add the hidden attribute to your content block, then have a utility class like hide-reader-mode which sets it to display: block (or just target directly). Users on your site will see it, but if your CSS doesn't load, neither will the content (so also useful if the stylesheet fails to download for some reason).

Sara also points out you can do the inverse, having a utility class like reader-mode-only that shows content only where your CSS doesn't load. So you can still have fancy CSS pseudo-elements or drop caps etc. but RSS feeds will get plain text equivalents. Can be particularly useful for live examples (they point to a styled <hr> example) which can be switched out for images.

Strikes me you could use similar tricks to show messages in RSS feeds that otherwise wouldn't appear. Just a lot of cool ideas going on here!