Stylebot for Firefox – Apply custom CSS on webpages (opens in new tab)

I find it incredibly useful to be able to toggle styles on and off in a simple GUI, especially for these two simple global styles:

    video { /* flip video horizontally */
        transform: scaleX(-1) !important;
    }

or

    /** scale videos that were originally 4:3, but 
        were encoded as 16:9 into proper 4:3 again */
    video {
        transform: scaleX(0.75) !important;
    }

It's not extremely useful, but every time I toggle them on, I'm very happy that I added them both.

You can even customize browser UI using userChrome.css to revert new style of location bar or remove some items from context menus, and even more. This guide should give you some ideas: https://www.userchrome.org/what-is-userchrome-css.html

For more inspiration and help visit https://www.reddit.com/r/FirefoxCSS/

I would do this so much more if it didn't require a restart of Firefox to take effect. As it is, I also use Stylus.

Did not know about that feature, I am impressed Mozilla has not blocked it in favor of some reason.

The first reaction to seeing this is of course 'why not use Stylus.' But it only takes a 10 second look at the page / screenshots to see that this clearly has a number of unique and new features that are beyond what Stylus offers. So no, you can't just use Stylus.

My first impressions are that Stylus is nice for applying big site-wide styles like dark themes, but this is vastly superior for all the small customizations that you might want to make to sites you frequently visit. No need to go deep into the CSS; just right click a thing and open the sidebar and make it look how you want. Not even close to Stylus. Definitely something I'm going to keep, and makes for a very powerful combination paired with uBlock Origin's element picker/zapper.