Hello! I thought I'd reach out to the wider wikitech community to discuss a problem we are having in the MobileFrontend extension and see if anyone can come up with a good solution.
The MobileFrontend extension is increasingly getting [1] bugs [2] raised [3] which are due to inline css styles present in certain wiki articles that are written with the desktop site in mind. (Slightly off topic there is also certain content that just doesn't work on mobile [4])
To get an idea of some of the bugs that are present please see this bug [5]. Currently we are resorting to various !important hacks in a separate css file [6] but this is not sustainable and does not cover everything and ideally I would prefer that this file was not needed at all.
Solutions I have thought about so far involve the following. I am yet to conclude on which is the best way to do this so would really appreciate discussion...
1) scrubbing all inline styles ######################### * in php - my worry is this would be a quite expensive operation? * in javascript (but this doesn't help people with javascript disabled) * would mean any nice mobile safe styling disappears :(
2) scrubbing certain inline styles ######################### * I could imagine us scrubbing any inline styles which have not been marked as mobile safe (e.g. anything with a class 'mobilesafe' keeps its inline style) - this at least allows editors to use pretty styles and encourages checking their styles on mobile
3) disallowing inline styles in wikitext output ################################## * this is controversial as it would restrict us to defining css rules in MediaWiki:Common.css which only admins can edit ** one could imagine pages/templates being able to maintain their own stylesheets for desktop and mobile to allow customisations ** ResourceLoader could serve the desktop or mobile stylesheet depending on the context
4) educating editors better about ensuring their styles work on mobile ############################################# I'm not sure how effective/sustainable this would be and how we'd go about doing this... but would be keen to hear your thoughts around it.
[1] https://bugzilla.wikimedia.org/show_bug.cgi?id=30887 [2] https://bugzilla.wikimedia.org/show_bug.cgi?id=36030 [3] https://bugzilla.wikimedia.org/show_bug.cgi?id=36076 [4] https://bugzilla.wikimedia.org/show_bug.cgi?id=20030 [5] https://bugzilla.wikimedia.org/show_bug.cgi?id=35704 [6] https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/MobileFrontend....