Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

Using Custom CSS to improve the web

Like many other web devs I browse the web quite a lot. And while every website has it's own personality, some of them have a bit too much for my taste. Luckily I have a browser plugin to apply some custom CSS to any site, so I'll share a short list of snippets that I use to improve my everyday life.

Twitter.com

Twitter is where I have most of my conversations with other folks in Tech. This means that the (chronological) timeline is most important to me. Other things worth my time are:

Things that aren't useful and should therefore be hidden:

/* Floating: DM's */
[data-testid="DMDrawer"],

/* Menu: Explore */
[data-testid="AppTabBar_Explore_Link"],

/* Menu: Lists */
a[href*="/lists"],


/* Sidebar: Trending now */
[aria-label="Timeline: Trending now"],

/* Sidebar: Who to follow */
[role="complementary"][aria-label="Who to follow"],

/* Sidebar: Recommended topics */
[aria-label="Timeline: "]
{
display: none;
}

Xstate.JS.org

I adore XState and I use it in many different projects in many different forms (backend, frontend, models, controllers, UI). But whenever I use the Visualizer, I run out of horizontal space for the editor pretty quickly. I must admit that working on a 34" ultrawide is a luxury, but with that luxury I like to have more space to write my Finite State Machines.

Kudos to David Kourshid for using Custom Properties for setting the width. Makes it extra easy to override.

html {
font-size: 120%;

/* Crank up the sidebar width (where we write the code) */
--sidebar-width: 50rem;
}

Wikipedia.org

Wikipedia is for looking up things and then reading. Lots of reading. And wikipedia articles tend to be long. That's fine, but the default styles aren't really optimized for long-form reading. So here's the summary of my

/* Make content more pleasant to read */
body {
font-weight: 400;
font-size: 1.2em;
}

p,
li
{
max-width: 90ch;
}

/* Hide distracting elements (ads, navigations) */
#siteSub,
#mw-head,
#p-coll-print_export,
#p-tb,
#p-interaction,
#p-navigation,
#footer-info-copyright,
.wbc-editpage,
#footer-places,
#footer-icons
{
display: none;
}

#mw-head-base {
height: 3em;
}

GatsbyJS.com

I use Gatsby for work and I'm not that interested in seeing marketing stuff. I need docs to make things work.

#marketing-banner {
display: none;
}

Although most of this CSS isn't too hard, I've had to look up some attribute selectors to see the difference between some of them. That makes writing this custom CSS a little bit more of a fun journey.

Do you use custom CSS on any websites? Share your snippets with me (and everyone else) via Twitter!