In terms of detection we could suggest when they might be a problem however if we were to use an algorithm it is likely to highlight mobile safe pages as having a problem. For instance if a page had an inline style width:300px; this could cause problems on a mobile device with a window width of less than 300px but on other devices it would appear fine.
If we are to identify problematic pages I'd prefer some kind of crowd-sourced approach where a reader can report a page as having problems. If would then be good to see which of those pages share templates. I think Platonides is right in that most inline styles come from templates so an approach as suggested by Trevor does sound quite sensible and realistic but as Trevor says it will take time.
FWIW problematic CSS that I have identified so far include: * Margins and paddings that are not %s e.g. -1px 21em 0 0; * Any fixed widths can cause problems e.g. width:300px; * Any use of top, left, right, bottom which uses a pixel value e.g. left: 300px; * Any use of float or clear - the mobile site does strip certain content (at the moment) that is known to cause problems. These items might be clearing these floats and without them could lead to problems. * -webkit-column-count greater than 1 can cause issues (tends to be used mostly in references and notes sections)
On a side note there is also problematic HTML that would benefit from being able to be styled via css rather than inline styles. The one I can think of off of the top of my head is image maps as these rely on fixed widths.
Although I think a stylesheet per wiki page would be great I can see problems in this in terms of ResourceLoader working out where to gather styles from. I'm a bit worried about allowing style tags in the template namespace as I'd like us one day to W3C validate :-) and personally I'd worry that mixing wikitext and css could make templates even more hard to decipher. I think this would benefit from a clear separation... Could templates have a CSS page (similar to how each page has a talk page)? This 'CSS page' could then be served either as a style tag in the head of the wiki page or even better pushed into ResourceLoader.
I think the solution we seem to be arriving at (please correct me if I'm wrong) is... * Allow users to define css rules rather than inline css * Clean up templates, possibly allowing flagging of templates to make this job easier * In the long term considering the turning off of inline styles on the mobile site
Note that already the mobile site has a mobile class on the body tag [1] to allow users to specifically target the mobile site (note this possibly should be on the html tag)
[1] https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/extensions/MobileFrontend....
On Fri, Apr 20, 2012 at 9:44 PM, Platonides Platonides@gmail.com wrote:
Yesterday, someone asked #wikipedia where was the separation between style and content done on wikipedia. Users don't suddenly start to write CSS rules in the pages themselves. Most inline styles come from templates.
They don't write for a table: border="2" cellpadding="4" cellspacing="0" style="margin: 0.5em 0.5em 0.5em 1em; padding: 0.5em; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%; but do {{tabla bonita}}
Similarly, the infoboxes CSS don't come from the article content, but from a template two or three layers down.
Fixing 80-90% of the inline styles should be quite simple, as it'll come from a few templates. The problem is to detect *when* that style gives problems on mobile.
I'm not sure what we are trying to mean with it, "it doesn't look right" isn't simple for an algorithm to detect ;) If we need to manually view the page, we could hardly detect it.
OTOH if we are looking for absolute values in that inline, it's simple to do.
So what constructs are problematic for mobile? How to detect them?
Once we have such measures, it shouldn't be hard to go fixing it. Moving css rules from inline styles to site CSS can be a step for fixing the problems (and also recommendable for other reasons), but is not the solution.
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l