1. 45
  1.  

  2. 11

    The real question is why browsers don’t build this in as a default feature. Slide it into the developer tools, we can ALREADY change css in there we just can’t save it for next time.

    1. 7

      You can do this in Firefox by creating chrome/userContent.css in your profile. http://kb.mozillazine.org/UserContent.css

      1. 5

        Safari supports this too (and has for at least a decade). Just pick the style sheet you want in Preferences… → Advanced.

        1. 3

          I always found that not to be user friendly though. Step 1: google where that file is stored. Step 2: Hunt for it. Then, all the features Stylish has like importing/exporting for different sites, toggle the custom styles with a couple clicks, etc, is missing.

          1. 1

            Thank you for posting this! I was a longtime Stylish/Stylus user but now I’m just going to use the built-in thing.

            Two stumbling blocks I ran into when I was trying to get this set up:

            1. I had to visit about:config and set layout.css.moz-document.content.enabled to true.
            2. Apparently userContent.css cannot be a symlink. (This is weird, since the userChrome.css file in the same directory is allowed to be a symlink.)
            1. 1

              I always found that not to be user friendly though. Step 1: google where that file is stored. Step 2: Hunt for it. Step 3: Write the code, and do 5-6 save code/restart-the-browser cycles to figure out why it’s not working.

              Then, all the features Stylish has like importing/exporting for different sites, toggle the custom styles with a couple clicks, etc, is missing.

              1. 1

                That is only useful if you want the same styles on every single website.

                1. 2

                  The same stylesheet is used on every website, yes, but you can use a (currently Mozilla-specific) selector to apply certain styles to certain sites:

                  @-moz-document url-prefix(https://johndoe.example/blog) {
                      div.post {
                          max-width: 800px;
                      }
                  }
                  
                  @-moz-document domain(washingtonpost.com) {
                      p.interstitial-link {
                          display: none;
                      }
                  }
                  

                  There’s more documentation of @document/@-moz-document on MDN.

              2. 7

                Question for the group. If you use Stylus (or used to use Stylish), what do you use it for?

                I headed over the the userstyles.org site and most of the styles seem to be “dark themes” or other cosmetic changes like changing the background of a site. Are there more practical uses of the extension? Can it modify HTML or Javascript (where the real power would be), or is it CSS only?

                1. 27

                  other cosmetic changes like changing the background of a site

                  You call it cosmetic changes, other people call it accessibility.

                  1. 7

                    I use it to tweak the layout of some of the sites I use, like moving a fixed top navbar to the side, and making it smaller. Or making narrow columns wider. Small stuff like that, which make the browsing experience much more bearable. I rarely use the social or sharing aspects of it. I haven’t found anything useful there, and I’m not sharing my tweaks either, because they’re very personal anyway.

                    I rarely use it to hide things, my adblocker can do that more conveniently indeed.

                    1. 6

                      I apply a style of body { max-width: 800px; } on a few blogs that weren’t designed with wide browser windows in mind—they spill text across the entire width of the screen, which makes them really hard to read. (You could use your browser’s “reading mode” to fix this, too, but this CSS change usually does the job without breaking any layouts.)

                      1. 4

                        Now that I’ve started using Dark Reader, I use Stylus for well-made, site-specific dark themes. Previously I was using the Gruvbox Dark Everywhere userstyle, but its shotgun approach leaves much to be desired. Beware: Dark Reader has some major performance issues on Firefox.

                        Edit: My installed themes (which I enable along with Dark Reader after sunset): https://ptpb.pw/nUrG.png

                        Edit 2: Also I enable the Firefox and Tree Style Tabs dark themes. This really needs to get more streamlined.

                        Edit 3: And then I get to enable dark/night mode on sites that support it natively, one-by-one as I visit them. Sigh.

                        1. 2

                          Man, Dark Reader is great. Thanks for bringing my attention to that.

                          1. 1

                            Funny that you mention this. I don’t often long for the days when I had a CSS styling addon installed, but exactly this Dark Reader page made me bob my head back 20cm. That page seems to be made for a mobile phone or tablet screen, not a 27” monitor. Wow.

                          2. 3

                            Fixing fonts on the most obnoxious websites.

                            1. 3

                              I like to use it to remove ads in core apps I use. I’d like to share the styles I create with others who use those apps. I use the free version of toggl, and they have a persistent, animated thing in the bottom-right corner that tells me the benefits of “going pro”. I just made a stylish thing to display: none the element which matches that rule. It’s great.

                              1. 1

                                Is there an advantage to that over the “block element” feature that exist in most ad blockers?

                                1. 1

                                  I use brave and Firefox which have some built in blocking. I haven’t thought of that, but I’ll take a look!

                              2. 3

                                I used to use Stylish - and a predecessor the name of which has slipped my mind - to reduce the size of the UI in Firefox - smaller tabs, less wasted space -> more space for page content.

                                1. 2

                                  i’m considering using it to shrink the gmail sidebar label font - they recently increased it from the same size as email body text to a size bigger, and it’s very annoying.

                                  1. 1

                                    I sometimes use it to tweak interfaces, like get rid of annoying panels or adding bold to certain elements

                                    1. 1

                                      I just started using this again after forgetting that it existed. Another forum I visit regularly now is ad free and doesn’t waste a bunch of whitespace where these were removed. I created an ironic one for hiding the ads for stylish for android on userstyles.org… :D Also, my day job involves using a console that has a lot of useless (to me) menu items - bye bye.

                                      1. 1

                                        Can it modify HTML or Javascript (where the real power would be), or is it CSS only?

                                        Is it possible for extensions to request access only to modify CSS?

                                        1. 4

                                          CSS can still exfiltrate sensitive page content (albeit attacks are harder to write).

                                          1. 1

                                            If you write your own CSS this is no longer a problem :P.

                                            1. 1

                                              That’s good to know. I’m going to do some reading on this, but do you have anything you recommend?

                                          2. 1

                                            There are two sites I frequent that have awful stylesheets that I can’t stand so I have custom stylesheets that make them look better.