I’m torn between “it’s cool that this extension exists” and “it’s so depressing that this has to exist as an extension instead of what should be a basic built-in tool that every browser should already have”.
I disagree. Going the other way, why would it need to be a built-in feature if an extension can do it? I would rather have a browser expose the proper API to make this possible. The number of different extensions and approach shows that this problem space as a lot of potential solutions.
I’m all for allowing extensions to push the envelope and try out experimental new flows, but we’re talking about functionality that well-understood in 2005. This is obvious and very basic stuff; it belongs in the browser. In fact, it already exists in the browser in the form of userContent.css but the UI for it is so awful that no one actually does it.
At least Firefox has had it built-in since before Phoenix/Firebird/Firefox got carved out of Mozilla Suite, even if, as you said in your later response, the UI is terrible. (For those who weren’t around or weren’t paying attention at the time, they tried two “rising from the ashes” metaphors and had to oops out of naming collisions with the BIOS manufacturer and the open-source descendant of Borland InterBase before they landed on Firefox.)
For others wondering, the userChrome.css file which power users employ to mod the UI has a less well-known sibling named userContent.css which also has the benefit of being able to apply in places that extensions are blocked from running.
I use Stylus too for the convenience, but here’s what my userContent.css looks like:
/* Truly blank new tab page
* Adapted from https://superuser.com/a/1289224
* BUG: https://bugzilla.mozilla.org/show_bug.cgi?id=1179593 */
@-moz-document url("about:newtab") {
body { background-color: #ffffff !important; }
body * { display: none !important; }
}
/* Blank private browsing new tab
* (Mainly to ensure I never see another ad for something like Firefox Focus
* again)
*
* From: https://www.reddit.com/r/FirefoxCSS/comments/dyyjem/making_private_browsing_new_tabs_blank/f84cpyy/
*/
@-moz-document url("about:privatebrowsing") {
.showPrivate {
display: none !important;
}
}
/* Disable marquee tags */
marquee {
-moz-binding : none !important;
display : block;
height : auto !important;
}
/* Fix rendering glitch-esque default style in uMatrix scope selector
* WONTFIX'd: https://github.com/gorhill/uMatrix/issues/936 */
@-moz-document url-prefix("moz-extension://19c6955d-eec7-44a2-a3da-c58f4daa2329/") {
body .toolbar #specificScope {
padding: 0 !important;
border: 0 !important;
}
body .toolbar #specificScope > span {
padding-right: 3px !important;
padding-left: 3px !important;
border-left: 1px dotted #77f !important;
}
body .toolbar #specificScope > span:first-of-type {
border-left: none !important;
}
/* ...and fix text contrast on deselected scope buttons for readability */
body .toolbar .scope:not(.on),
body .toolbar #specificScope > span:not(.on) {
background-color: #aaa !important;
border-color: #aaa !important;
}
}
EDIT: …that said, you can get a Stylus-like UX for editing userChrome.css using Hamburger Menu → More Tools → Browser Toolbox → Style Editor and then filtering for it (Yes, it’s applied live and Ctrl+S will save changes to disk), so there’s probably a similar built-in way to live-edit userContent.css buried somewhere in Firefox’s multiple ways to invoke the developer toolbox with different scopes.
you can get a Stylus-like UX for editing userChrome.css using Hamburger Menu → More Tools → Browser Toolbox → Style Editor and then filtering for it
Whoa; that’s pretty cool; I had no idea! Thanks for sharing.
It looks like this doesn’t exist in ESR tho, or if it does it’s somewhere else. I can only find the “Style Editor” in the normal developer toolbar, and it doesn’t apply live or support saving it in a way that will load automatically for next time. Or maybe I’m misunderstanding.
Doing this for specific content in most websites is a cat-and-mouse game that only leads to frustration, in my experience. After a few months the HTML layout or the CSS class names of these websites changes and the improvements are undone. This is specially true for the worst cases in Web usability: websites with tons of JavaScript where classes are generated and re-named every deploy.
After feeling the pain I gave up for many years; what I’ve found works today is to just use “reader mode”.
I do the same: reader mode works great and is only a click away which is peanuts since I’m already planning to spend time reading the page. It’s also available on websites I don’t intend to spend time on again and it often bypasses soft paywalls.
I use Stylus a bunch on websites that are decent but unusable on a large screen (4k 32”) because their content is all the way to the left which forces me to turn my head, uncomfortable if reading for a while.
Those websites are generally not changing their classes often. Think Sphinx based docs, LKML, man pages, etc.
Compared to CSS, filter list syntax is more verbose when describing complex rules:
! Make HN post text readable
news.ycombinator.com##.toptext:style(color: #333)
news.ycombinator.com##.toptext a:style(color: #1973c2)
! Note the repeated domain.
! Unlike in CSS, you cannot write comments inside of a rule,
! e.g. to document the reason for one of multiple CSS declarations.
! Any comment documenting a rule has to go on its own line.
I personally like to use uBlock Origin for content-blocking rules. Its syntax doesn’t require writing display: none;, I can easily search through my rules for all sites within a single text box, and I can sometimes replace my custom rules with others’ custom content-blocking filter lists (example). For other types of restylings, where I might want comments to justify specific values, I prefer Stylus.
The main reason I haven’t dug into ublock origin more is that I haven’t found a way to configure it from my dotfiles, so I have to set the settings manually and copy it around to all the different machines I use by hand. Do you know if there’s a way around this? (I guess if I used firefox sync or whatever it could do this but I want all my stuff in one place!)
Probably nothing if you use uBlock Origin. I don’t use uBlock though. I use Firefox’s tracking protection set to Strict, which takes care of 90% of things, and is built-in
Yep, anything that’s doing tracking, which is most ads served by Google, Facebook etc on websites. It doesn’t get all ads, but enough that I’m happy with it.
I really dislike the Apple system font as it appears on GitHub, so I use Stylus to override it with the Source family of fonts. Segoe UI on Windows isn’t much better but I allow it and whatever I end up using on Linux is neither SF UI nor Segoe so I leave it. I really should, for my own sake, just copy the Stylus rule across all my systems.
Thanks for the script to disappear the Google sign-in popup! Never got to fixing it.
I love Stylus! Its much more than just disappearing elements. You can eliminate daily inconveniences by shaping your regular webpages to your liking, make them more accessible.
In that context, I’d like to add another fix - headings on tanstack.com.
My mouse/trackpad is configured to auto-click on rest/hover. Over time, I’ve developed a habit of resting the cursor on any white space of a webpage. Now, on tanstack docs, each heading is a clickable anchor, but the clickable area also spans the whole width of the content area. When I subconsciously rest my cursor on the white space besides a heading, the heading and contents are suddenly yanked to the top.
Here is the Stylus fix:
a.anchor-heading {
display: inline;
}
Now, the heading still remains an anchor, but the white space besides the heading text stays out of the clickable area.
uBlock can remove the Google login using the “social” lists. They also remove the social media share buttons that track you.
Generally, any Stylus display: none can be done in uBlock and there’s likely a list for it. With uBlock you might even be able to block the script that inserts the element to stop the root cause.
The default settings are pretty conservative. You need to enable extra “filter lists.”
I thought it was blocked by something in the “Social” category, but it seems it’s actually the “Annoyances > Adguard > Popup Overlays” list that does it for me.
Update: Tanner Linsley, the founder of the tanstack ecosystem, saw this post on Bluesky, and prompted me to submit a PR to fix this problem. The PR is now merged.
Its an accessibility feature. The 3 desktop OSes I’ve used provides a Hover to Click (Dwell to click on macOS) feature in some capacity.
I resorted to using it during a phase of undiagnosed, severe vitamin B12/D3 deficiency, due to which my fingers felt properly hurt while clicking mouse buttons.
Fast forward to today, its a must-have for me now. Its a feature which feels indispensable if and once you get used to it.
Wow, that’s something I would not have expected! I am glad that you were able to work around that. Cool that this accessibility feature seems to be somewhat widely distributed.
If you don’t mind me asking, wouldn’t it be more painful to type on a keyboard? How did you manage to do that back then?
In any case, thanks for sharing and I hope you’re doing better now!
If you don’t mind me asking, wouldn’t it be more painful to type on a keyboard?
Yep. I had to resort to Dragon NaturallySpeaking. Thankfully, I was on a break from my programming career during those days.
It was all a self-inflicted idiocy though. I was young, lived in a flat devoid of all sunlight, and self-diagnosed the issue as RSI (eerily similar symptoms). Only after a month of that buffoonery, I got it diagnosed by a physician. After just a simple physical check, she ordered deficiency tests, while politely nodding at my self-diagnosis. The test results showed an extremely severe deficiency (at which stage RSI-like symptoms show up), and levels had to be replenished with a series of injections.
I am alright now.
Anyway, this whole thing taught me the value of accessibility. We are all temporarily fully enabled.
This is an essential extension for me to browse the web without feeling uncomfortable. Lots of websites use, in my opinion, inappropriate font-weight values for body text and headings and I use stylus to “fix” them.
I’m torn between “it’s cool that this extension exists” and “it’s so depressing that this has to exist as an extension instead of what should be a basic built-in tool that every browser should already have”.
I disagree. Going the other way, why would it need to be a built-in feature if an extension can do it? I would rather have a browser expose the proper API to make this possible. The number of different extensions and approach shows that this problem space as a lot of potential solutions.
Literally the only reason Stylus exists is that the original “Stylish” extension got sold to someone who added malware to it: https://arstechnica.com/information-technology/2018/07/stylish-extension-with-2m-downloads-banished-for-tracking-every-site-visit/
I’m all for allowing extensions to push the envelope and try out experimental new flows, but we’re talking about functionality that well-understood in 2005. This is obvious and very basic stuff; it belongs in the browser. In fact, it already exists in the browser in the form of userContent.css but the UI for it is so awful that no one actually does it.
Just to nitpick here, IIUC you would be okay with it being an extension as long as that extension also comes from your browser vendor, right?
A browser vendor refusing to mainline this would be stupid, but that would still be better than what we have today.
At least Firefox has had it built-in since before Phoenix/Firebird/Firefox got carved out of Mozilla Suite, even if, as you said in your later response, the UI is terrible. (For those who weren’t around or weren’t paying attention at the time, they tried two “rising from the ashes” metaphors and had to oops out of naming collisions with the BIOS manufacturer and the open-source descendant of Borland InterBase before they landed on Firefox.)
For others wondering, the
userChrome.cssfile which power users employ to mod the UI has a less well-known sibling nameduserContent.csswhich also has the benefit of being able to apply in places that extensions are blocked from running.I use Stylus too for the convenience, but here’s what my
userContent.csslooks like:EDIT: …that said, you can get a Stylus-like UX for editing
userChrome.cssusingHamburger Menu → More Tools → Browser Toolbox → Style Editorand then filtering for it (Yes, it’s applied live and Ctrl+S will save changes to disk), so there’s probably a similar built-in way to live-edituserContent.cssburied somewhere in Firefox’s multiple ways to invoke the developer toolbox with different scopes.Whoa; that’s pretty cool; I had no idea! Thanks for sharing.
It looks like this doesn’t exist in ESR tho, or if it does it’s somewhere else. I can only find the “Style Editor” in the normal developer toolbar, and it doesn’t apply live or support saving it in a way that will load automatically for next time. Or maybe I’m misunderstanding.
Sorry. I forgot that “Activate the Style Editor tab of the toolbox” is one of the steps in the instructions.
Click the … button at the right end of the tab bar, click Settings, and then check the Style Editor checkbox.
Doing this for specific content in most websites is a cat-and-mouse game that only leads to frustration, in my experience. After a few months the HTML layout or the CSS class names of these websites changes and the improvements are undone. This is specially true for the worst cases in Web usability: websites with tons of JavaScript where classes are generated and re-named every deploy.
After feeling the pain I gave up for many years; what I’ve found works today is to just use “reader mode”.
I do the same: reader mode works great and is only a click away which is peanuts since I’m already planning to spend time reading the page. It’s also available on websites I don’t intend to spend time on again and it often bypasses soft paywalls.
I use Stylus a bunch on websites that are decent but unusable on a large screen (4k 32”) because their content is all the way to the left which forces me to turn my head, uncomfortable if reading for a while.
Those websites are generally not changing their classes often. Think Sphinx based docs, LKML, man pages, etc.
What’s the benefit of this approach vs. e.g. filtering them all through Ublock Origin (which lets you add custom filters blocking such stuff outl?
Can you change fonts and do other arbitrary CSS with uBlock? If you can, that’s news to me.
I thought uBlock only supported removing/hiding elements.
You can, with uBlock Origin’s
:style() operator. For example, OP’s user style for danluu.com could be written like this:Compared to CSS, filter list syntax is more verbose when describing complex rules:
I personally like to use uBlock Origin for content-blocking rules. Its syntax doesn’t require writing
display: none;, I can easily search through my rules for all sites within a single text box, and I can sometimes replace my custom rules with others’ custom content-blocking filter lists (example). For other types of restylings, where I might want comments to justify specific values, I prefer Stylus.This is really cool; thanks for sharing!
The main reason I haven’t dug into ublock origin more is that I haven’t found a way to configure it from my dotfiles, so I have to set the settings manually and copy it around to all the different machines I use by hand. Do you know if there’s a way around this? (I guess if I used firefox sync or whatever it could do this but I want all my stuff in one place!)
uBo can indeed push and pull settings using the firefox-sync-shared storage.
Probably nothing if you use uBlock Origin. I don’t use uBlock though. I use Firefox’s tracking protection set to Strict, which takes care of 90% of things, and is built-in
Firefox tracking protection blocks ads?
Yep, anything that’s doing tracking, which is most ads served by Google, Facebook etc on websites. It doesn’t get all ads, but enough that I’m happy with it.
[Comment removed by author]
I really dislike the Apple system font as it appears on GitHub, so I use Stylus to override it with the Source family of fonts. Segoe UI on Windows isn’t much better but I allow it and whatever I end up using on Linux is neither SF UI nor Segoe so I leave it. I really should, for my own sake, just copy the Stylus rule across all my systems.
Thanks for the script to disappear the Google sign-in popup! Never got to fixing it.
I love Stylus! Its much more than just disappearing elements. You can eliminate daily inconveniences by shaping your regular webpages to your liking, make them more accessible.
In that context, I’d like to add another fix - headings on tanstack.com.
My mouse/trackpad is configured to auto-click on rest/hover. Over time, I’ve developed a habit of resting the cursor on any white space of a webpage. Now, on tanstack docs, each heading is a clickable anchor, but the clickable area also spans the whole width of the content area. When I subconsciously rest my cursor on the white space besides a heading, the heading and contents are suddenly yanked to the top.
Here is the Stylus fix:
Now, the heading still remains an anchor, but the white space besides the heading text stays out of the clickable area.
uBlock can remove the Google login using the “social” lists. They also remove the social media share buttons that track you.
Generally, any Stylus
display: nonecan be done in uBlock and there’s likely a list for it. With uBlock you might even be able to block the script that inserts the element to stop the root cause.I could never make it work. I have ublock origin installed, but it has never blocked the google popup with default settings.
I remember trying but failing to configure it.
The default settings are pretty conservative. You need to enable extra “filter lists.”
I thought it was blocked by something in the “Social” category, but it seems it’s actually the “Annoyances > Adguard > Popup Overlays” list that does it for me.
Thank you. I’ll give it a shot.
Update: Tanner Linsley, the founder of the tanstack ecosystem, saw this post on Bluesky, and prompted me to submit a PR to fix this problem. The PR is now merged.
What’s the reason for the auto click behavior? I’ve never heard of this before and would be curious for the intention behind it.
Its an accessibility feature. The 3 desktop OSes I’ve used provides a Hover to Click (Dwell to click on macOS) feature in some capacity.
I resorted to using it during a phase of undiagnosed, severe vitamin B12/D3 deficiency, due to which my fingers felt properly hurt while clicking mouse buttons.
Fast forward to today, its a must-have for me now. Its a feature which feels indispensable if and once you get used to it.
Wow, that’s something I would not have expected! I am glad that you were able to work around that. Cool that this accessibility feature seems to be somewhat widely distributed.
If you don’t mind me asking, wouldn’t it be more painful to type on a keyboard? How did you manage to do that back then?
In any case, thanks for sharing and I hope you’re doing better now!
Yep. I had to resort to Dragon NaturallySpeaking. Thankfully, I was on a break from my programming career during those days.
It was all a self-inflicted idiocy though. I was young, lived in a flat devoid of all sunlight, and self-diagnosed the issue as RSI (eerily similar symptoms). Only after a month of that buffoonery, I got it diagnosed by a physician. After just a simple physical check, she ordered deficiency tests, while politely nodding at my self-diagnosis. The test results showed an extremely severe deficiency (at which stage RSI-like symptoms show up), and levels had to be replenished with a series of injections.
I am alright now.
Anyway, this whole thing taught me the value of accessibility. We are all temporarily fully enabled.
Does a site exist where you can look up user recommended styles (much like monkeyscript)?
https://userstyles.world/
Cool, thanks!
Hehe, I created one with just the Debian logo in it mapped to that code point for similar reasons.
what fun to find a friendly name when getting to the last link there!
This is an essential extension for me to browse the web without feeling uncomfortable. Lots of websites use, in my opinion, inappropriate
font-weightvalues for body text and headings and I use stylus to “fix” them.https://paste.sr.ht/~ayushnix/62fd20fe1b16b3fc85f37bfabb370f76f2f23e86
I like Stylus and use it on a handful of sites. I just uploaded my Lobsters style which increase the font sizes here a tad.