Write-only Twitter

A couple of weeks ago, Aral asked me if I could write a user stylesheet for web browsers to make Twitter nothing but a compose box.

Jump straight to how it works

I totally get it. Twitter sucks your time and soul. But sometimes you need to use it to share what you’re working on, or promote events. Essentially, you want to use Twitter but you don’t want it to use you. The way to do this is to hide every part of Twitter’s interface that doesn’t help you compose a tweet, or otherwise likely to distract or derail you.

The power of CSS pseudo classes

As part of my work on Better’s blocking rules, I sometimes have to hide parts of the page using CSS. Hiding ads isn’t really Better’s purpose, we try to block the tracking and behavioural advertising scripts before they put anything on the page. But occasionally, sites have rolled their own obnoxious first-party targeted ad system that is inseparable from the rest of their site’s functionality. On such occasions, I roll up my sleeves, and get my pseudo CSS selectors out to set these elements to display: none. Because, of course, these sites design their HTML and CSS to avoid blockers like Better.

The problem with user stylesheets

Hiding parts of Twitter’s interface is a similar problem. Luckily, a lot of Twitter’s interface has semantic naming (amongst the gazillion nested divs and robot-generated CSS classes) for accessibility purposes, so it’s simple enough to hook into these elements for a user stylesheet. The problem with user stylesheets is that they’re a blunt instrument, aimed at making global changes across every site you visit. Really useful for making font sizes big on every site you visit, but if you use it to hide any element with the class of “timeline”, chances are you’ll break a lot of websites you visit.

A solution to target specific websites

My solution was to chain what I suspect are fairly unique element selectors in a likely unique sequence, ensuring that these rules will only apply to twitter.com, even though the stylesheet will be used on every site visited.

/* Hide the Home timeline and Explore timeline */
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Your Home Timeline"],
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Explore"] {
  display: none !important;
}

As you can tell from the selectors I’ve used, it is fragile as anything. As soon as Twitter decides to change the aria-label for its home timeline, the stylesheet will no longer effectively hide the home timeline. But, as with a lot of Better’s blocking rules, this is a balance between using a fragile rule that works against a big corporation that tends to be pretty slow in rolling out changes to its interface.

After a couple of weeks of using this stylesheet in my primary browser and not noticing any issues with other sites, I’m fairly confident in sharing this stylesheet with anyone else who might find it useful.

How the stylesheet works

I ended up creating two stylesheets, one for Aral’s way of working (write-only.css), and one for my way of working (read-some.css).

write-only.css is a user stylesheet for the browser that hides absolutely everything except the Home feed compose box on Twitter.

<img class="landscape" sizes="(min-width: 1380px) 750px, (min-width: 820px) 719px, (min-width: 740px) calc(-33.33vw + 875px), (min-width: 340px) calc(92.63vw - 39px), calc(100vw - 32px)" srcset="/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_300x0_resize_mitchellnetravali_2.png 300w,/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_500x0_resize_mitchellnetravali_2.png 500w,/write-only-twitter/write-only-twitter/social_hu3843e09fa51a0152293fbbf1ad71c1cb_33928_800x0_resize_mitchellnetravali_2.png 800w,/write-only-twitter/write-only-twitter/social.png 1118w" src="social.png" alt="Web page showing just Twitter’s compose box, no other parts of Twitter’s interface.">

<figcaption>


  <p><code>write-only.css</code> in action.</p>

</figcaption>

My Twitter use varies, particularly as I sometimes use it for Better support, so I need to be able to access a bit more of Twitter’s interface.

read-some.css is a user stylesheet for the browser that hides:

but keeps:

And let me tell you, having this stylesheet on my desktop Safari for the last couple of weeks has made a huge difference. Now I can check our @mentions without getting further distracted. Even when my muscle memory types “twitter.com” when I’m procrastinating or seeking distraction, the page loads so minimally, I take one look at it and close the tab. It no longer appears in my “Frequently Visited” sites!

<img class="landscape" sizes="(min-width: 1380px) 750px, (min-width: 820px) 719px, (min-width: 740px) calc(-33.33vw + 875px), (min-width: 340px) calc(92.63vw - 39px), calc(100vw - 32px)" srcset="/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_300x0_resize_mitchellnetravali_2.png 300w,/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_500x0_resize_mitchellnetravali_2.png 500w,/write-only-twitter/write-only-twitter/read-some_hu1fd5ca1b59b76b36250d12d5d1634087_45368_800x0_resize_mitchellnetravali_2.png 800w,/write-only-twitter/write-only-twitter/read-some.png 1118w" src="read-some.png" alt="Web page showing Twitter’s interface without the timeline of tweets or What’s Happening sidebar.">

<figcaption>


  <p><code>read-some.css</code> in action.</p>

</figcaption>

Where to find the stylesheets

You can download the Write-Only Twitter stylesheets and find out more about them on our Small Tech repository. I’ll update them when needed. There’s not instructions for every browser in there, but it shouldn’t be too hard for you to find that information if you need it. Personally I recommend Safari for everyday browsing as you can use Better Blocker to block trackers while you browse 😉