Cute CSS hacks for your favorite sites

Do you have a wide screen? Are you annoyed by these sites that don't set any max-width property on their page, hence you have to read ultra-long lines that span all over the screen? If you're in this case, read on, you can hack your way through!

The problem

Let's start with an example. As a software engineer, I spend a fair amount of my life reading documentation in a web browser. These days I often find myself at freedesktop.org, and here's how a typical page looks like:

freedesktop orig

No max-width. The text unfolds forever, and it's a bit tedious to read.

It's one of these many things in life that are a bit annoying, but not enough to call it a problem and decide to tackle it. Until now. For some mysterious reasons, this morning I said to myself: "Enough! I won't take it anymore!"

Thankfully, this quest was quite short.

The solution

So I went looking for a way to inject some CSS into the page, so that I could change its appearance, and set a maximum width for the text.

The solution came under the name of Stylus: it's a Firefox/Chrome/Opera extension that allows one to inject some CSS into a particular website, based on its URL. Simple and straightforward.

All it takes now is to open the Web Developer Tools, inspect your favorite page, and add some CSS trickery where needs be to make it look better.

For freedesktop.org, here's the CSS snippet I use:

html, body {
  margin: auto;
  max-width: 56em;
}

pre.programlisting {
  background-color: #f2f2f2;
  padding: 16px;
}

And here's the result:

freedesktop with hacked css

Some more ramblings to conclude

So you get the idea, if you visit a website often, and if it pains your eyes, stop suffering, and fix it. It's easy and fun, at least for those who have some notions of HTML/CSS.

If you don't, you'll be delighted to learn that you can find a collection of "CSS themes" at userstyles.org. Who knows, maybe someone already solved your problem.

I always find it fascinating to discover a new corner of the web, and a new community of people who gathered around an unlikely topic, like theming the web in a super hacky way that is likely to break every now and then :) So I couldn't help but dig a bit further.

It turns out that there are two (at least) Firefox extensions that does the job: Stylish and Stylus. Stylus was born as a fork of Stylish, and it seems that the main change was the removal of all analytics. The Stylus extension page says it loud:

Unlike other similar extensions, we don't find you to be all that interesting. Your questionable browsing history should remain between you and the NSA. Stylus collects nothing. Period.

It's also worth noting that the Stylish extension was removed from Firefox and Chrome at some point in 2018. It was found that the extension would send all your browsing data to their server and link it to a unique identifier. The extension seems to be back online now, but you'd better stay away from it if you care about your privacy.

So don't mistake Stylus for Stylish, go for Stylus, and happy CSS hacking!