Requests for comment/Deprecating inline styles

Currently the language MediaWiki uses to author documents allows the inclusion of html elements with style attributes. Mixing layout with content causes various problems with reusability, maintainability and is not future proof. Already on the mobile version of MediaWiki problems are being seen with inline styles with how pages render on smaller screens which could be solved via css3 media queries, however these cannot be done in inline styles. In addition to this the majority of things done in inline styles would be better done as class names for the purpose of consistency. For instance if we have text that is red (where 'red' is being used to serve a warning) this would be better down with a class warning otherwise some text risks being red whilst other text trying to express the same meaning may be a different tone of red (e.g. #BE3B3B)

To take a real example, various pages use inline styles to create two column layouts. Currently to fix portal page layouts we have to edit every page that uses them. A preferred approach would be to make use of stylesheets (either in a style tag or a separate stylesheet) and classes. This would mean that it would only take a change in one wiki page. Additional css rules could also be made to target more specific cases such as print and mobile layouts.

Note it is important to understand that this is the deprecation of inline styles and not styles in general. In a future MediaWiki the following would render a red border .foo { border: solid 1px red; } but would not

Known problematic use of inline styles

 * Two /multi column layouts e.g. portal pages
 * There was an interesting (slightly ambiguous) piece of feedback received recently stating that car numbers and names should be in black and white rather than yellow and blues so 'us oldies might be able to keep up'. It sounds like somewhere an article is providing colours in such a way that they are not readable. This is likely to be a problem on desktop as well and reveals how our choices in using inline styles when we edit articles can have a negative effect on our readers.
 * Fixed width tables where width is specified in pixels
 * Fixed positioned elements (fixed position is problematic on mobile)

Possible solutions

 * Restrict allowed styles to MediaWiki:Common.css
 * Allow stylesheets per wiki page
 * Allow stylesheets per template page - this allows articles which use templates to share a common stylesheet.
 * Allow stylesheets per category - this would allow articles related to the same topic to share a common stylesheet and also help with 15075.
 * Adapt ResourceLoader so that MediaWiki:Common.css can be marked up with annotations that specify pages that should get certain styles - this means we can have one place for styles yet avoid targeting unnecessary styles at specific pages.

Deprecating inline styles via the mobile site
The mobile site gets a smaller amount of traffic then the desktop site. It runs the MobileFrontend extension which includes a beta mode which is activated via the Mobile Settings page.

The mobile site is quite badly effected by inline styles. Various problems are described in Making_MediaWiki_Mobile_Friendly. It is proposed that turning off inline styles on the beta of the mobile site would be a good catalyst for reducing the use of inline styles across the website. The idea being that important and missing styles could be identified and defined in stylesheets, (initially MediaWiki:Common.css but on the long term potentially per page stylesheets. The long term goal would be to remove inline styles altogether in favour of these stylesheets on the main mobile site and then the desktop site. Note on the mobile site this all hinges on 34325.

Deprecating inline styles on home pages
Currently MediaWiki homepages are special cased on mobile to ensure they render correctly. To fix this we should


 * set a deadline for a switch over where we stop the special casing on the main page - we can work together during that day to ensure pages are mobile ready 2) we change the code so that a querystring specialcase=no shows what the main page will look like after the switchover
 * community works together to move inline styles into a stylesheet e.g. MediaWiki:Common.css and alter homepages
 * we turn of the special casing on the deadline date
 * deal with broken pages on a case by case basis.

Dissent?
''There are lots of different kinds of inline styles. Many are for color, font size, basic boxes, etc and work just fine.''

''The sort of styles that are most breakable on mobile are layout styles such as two-column layouts or floats/boxes being given a specific width or margin that doesn't fit well on a mobile screen. In addition, table layouts are often similarly problematic but would not be altered by this proposal, apparently.''

''What I do support is better ways to specify &lt;style> blocks in a page or template. This allows layout issues to be resolved with CSS media queries when they really really are needed, without cluttering up global styles for things used only in a few places.'' --brion (talk) 17:46, 2 July 2012 (UTC)

We are in agreement Jdlrobson (talk)

I can sympathise with the desire to replace inline styles with some alternative system that allows media selectors. But I don't think removal of the style attribute from the Sanitizer whitelist is an appropriate way to go about encouraging change, even after a lengthy deprecation period, and even if it is only on the mobile site.

Not all MediaWiki installations care about mobile support. In fact, not all WMF wikis care about mobile support. And some wikis may already have implemented comprehensive mobile support, with inline styles used where they are appropriate for all device types -- removing the style attribute from the whitelist on such a wiki would be a nuisance with no appreciable benefit.

I think deprecation should be implemented solely on the editing side, in an extension which is enabled on the wikis that need it. The extension would display a warning when inline styles are introduced into an article which didn't have them already. The extension could even parse the CSS of the inline styles, and warn only when certain properties such as "float" are used. A tracking category would allow users to deal with existing inline style usage.

Introducing some method for templates and pages to add a style element to a page would be useful. As I said in a comment on https://gerrit.wikimedia.org/r/#/c/68123/, it's not entirely simple to do so. The simplest way to preserve performance would be to store the styles into the ParserOutput. This could be done by adding a &lt;style/&gt; tag hook, which allows stylesheets to either be specified inline or pulled in from some other page. Security may be non-trivial, especially if resistance to DoS attacks against the browser is desired. -- Tim Starling (talk) 03:40, 12 June 2013 (UTC)