Custom CSS for Wikipedia on iPad
If you go onto the iOS App Store and search for Wikipedia, you’ll find a wide variety of applications designed to make Wikipedia more readable than it is in the browser. I’ve tried a few but they all have one major problem: you can’t edit. The encyclopedia anyone can edit is not editable if you happen to use software specifically designed for the iPad.
I also don’t like the concept of this software: I don’t believe that you need special software to view specific classes of website. The whole idea of site-specific browsers always seemed strange to me: why do I want to waste disk and memory space making a custom application for one particular site, even if it is one of those vaguely defined “web apps”.
Enter CSS and media queries.
Not a lot of people know this but every registered user on every Wikimedia project including Wikipedia can set up a custom stylesheet as well as a custom JavaScript file. See Help:User style for the details.
Here are a few things I’ve got in my vector.css file with annotations:
So, if I want to edit how Wikipedia looks for me, I can just add stuff to my custom stylesheet, and I can use media queries to target specific devices.
I did a little bit of poking around to find out the media query you use that picks out the iPad and then added it to my vector.css file:
The only thing I’ve added here is changing the look of textareas. For some reason, on the iPad textareas would have all the text in a very small sans-serif font (Helvetica probably). Making it bigger and sticking it in a monospace font makes it easier for a nerdy hacker type like me to edit.
Ah, but that’s okay for insufferable Apple users. What about those enlightened, freedom-loving Android tablet users? Well, you can just stack up media queries for different tablets. I found a media query for the Xoom.
As for the Galaxy Tab, that’s a bit harder. It’s pretty difficult to come up with a media query, but you can use JavaScript…
if ('ontouchstart' in document.documentElement) {
// code here to load a custom CSS file and insert into the DOM
}
You can read more about the interesting issues the Galaxy Tab has here.
Of course, to pre-empt all the “you don’t care about normal people!” stuff, this is definitely for the very small intersection of CSS geeks and the dorkier end of Wikipedians. But there’s an interesting possibility here for the developers at the Wikimedia Foundation and for others trying to work out how to make MediaWiki look great on tablets. You can get the community to help build your mobile version simply by getting them to submit their personal CSS and JS files, combing through them and combining the best bits together.
Update: Steven Walling asked for some screenshots. Here they are:
Here’s what it looks like to edit a page when not logged in:
After I log in, the edit form looks like this instead:
