Defining user styles

User styles have been around since the early days of the web. They are a way for users to specify their browsing preferences using CSS cascade. I remember way back when this option was fairly prominent in Internet Explorer settings. Now, I don't even know how to find it in most browsers. But I did find it in Firefox, and here's how you can too.

userContent.css

This is the file that you need to put in the right place and define your preferences. How to find the right place?

• In Firefox's menu go Help, then Troubleshooting Information
• Find "Profile Folder" open it
• In there create a directory called chrome
• Create the file in the chrome dir called userContent.css

Put something in it, like:

body {
  background: blue !important;
}

Restart the browser and enjoy!

Chuckle at sites that don't have sensible defaults

WordPress:

Google:

Amazon:

ok, that's not totally fair, because these sites do define background color, but my !important wins. Still, some sites assume they have white background, but the background is often undefined.

Going further

Let's make youtube.com a lot less distracting. Add these to the user stylesheet:

ytd-app #guide,
ytd-app #page-manager ytd-browse,
ytd-app #secondary,
ytd-app #comments {
  display: none !important;
}

Aaaand, no more silly comments, no more "related", no more "trending".

Ah, the power!

No extensions, no nothing. Just the Web, the way it was designed to be once upon a time.

If you know how to do this in Chrome, Safari or Edge, do let me know!

Update: Hacker News too

Just adding this to get rid of the social features: comments, votes and such:

#hnmain .subtext {
  visibility: hidden !important;
}

Tell your friends about this post on Facebook and Twitter