User Stylesheet for Bluesky to make images without alt text more visible

bluesky-mark-underscribed-images.css

/* 
This stylesheet is designed to give you a view of how many posts in your Bluesky feed lack alt-text.
It looks kinda ugly - it's supposed to - but if you just want the fade effect without the red frame,
delete the lines starting with border, width or height

How you use it depends on your browser.

For Safari, save this file somewhere then select that file in Safari -> Settings -> Advanced Stylesheet
For Firefox, try a plugin like https://addons.mozilla.org/en-US/firefox/addon/styl-us/
For Chrome or Vivaldi, try https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

This stylesheet will work until something critical changes on the Bluesky feed page.

Tech note: Yes, Bluesky seems to put empty alt-tags on undescribed images, rather than leaving the tag out.
*/

[data-testid="postsFeed"],
[data-testid="customFeedPage"],
[data-testid="followingFeedPage"],
[data-testid^="postThreadItem-by-"] {
    img[src^="https://cdn.bsky.app/img/feed_thumbnail/plain"][alt=""] {
        border: solid red 12px !important;
        opacity: 0.1;
        width: 95% !important;
        height: 95% !important;
    }
}

[data-testid="postsFeed"],
[data-testid="customFeedPage"],
[data-testid="followingFeedPage"],
[data-testid^="postThreadItem-by-"] {
    img[src^="https://cdn.bsky.app/img/feed_thumbnail/plain"][alt=""]:hover {
        border: none !important;
        opacity: 1;
        width: 100% !important;
        height: 100% !important;
    }
}