False positives in Firefox Transparent Images



  • The Firefox Transparent Images style by @hyperfekt is incorrectly identifying Wikipedia file pages as image urls.

    For example, the page:
    https://en.wikipedia.org/wiki/File:Norma_IAU.svg
    will have its background set to a dark colour (tested with version 1.1.0) even though it is a webpage not an image.


    I think implementing this style might be impossible without false positives or changes to the Stylus/Stylish client, since it is trying to detect content type via the URL “extension”. The current approach is using regexes:

    (data:image/.*|.*\.(png|gif|webp|bmp|tiff?|jp2|jpx))
    data:image/(svg).*|.*\.(svg)


  • You’re right, since we can’t inspect the content type with CSS, nor target nodes in the XML of the SVG itself, there doesn’t seem to be any way not to overwrite the default white background when a website uses a URL ending in .svg to serve HTML.
    For now I’ve added a manual blacklist, which includes only Mediawiki file pages so far.

    Thank you for the report!



  • You should be able to use the :root element. I made a theme that uses it earlier today, feel free to copy: https://openusercss.org/theme/5b229698ca7d8f0b003f62fa?viewingSource=true



  • I am using the root element, however Wikipedia does not set any background color at all and relies on the user agent style that is the default for any webpage. The :root selector will overwrite that.

    But what does the :active pseudoclass do there?



  • :active is when you’re holding down your left mouse button. It’s actually available on any element, not just :root