Extension:TemplateStyles

Usage
First, the CSS page must be created. By default any subpage in the Template namespace with a title ending in ".css" will be created with the "Sanitized CSS" content model; the set of namespaces may be adjusted with, or Special:ChangeContentModel may be used on any page. Then, in the template's wikitext, add the tag to load the styles.

The CSS saved using the "Sanitized CSS" content model must meet strict validity requirements: invalid CSS, unrecognized at-rules, and unrecognized or unsupported properties or property values cannot be saved. If invalid CSS is somehow saved anyway, the offending constructs will be removed when the CSS is output to the browser.

The value of the  attribute on the tag is the title of the page, defaulting to the Template namespace. For example, will load the page "Template:Example/styles.css". This will fail if that page does not exist or has a content model other than "Sanitized CSS".

Use of sanitized CSS is tracked like transclusion of templates, and will show up as a transclusion on Special:WhatLinksHere.

Caveats

 * Styles added by TemplateStyles are scoped to avoid affecting the user interface outside of the main parsed content.
 * To use TemplateStyles to style something like w:en:MediaWiki:Protectedpagetext, you would need to enclose the message's contents in.
 * The styles should be written to target specific CSS classes, and anything that generates elements with those classes should be sure to also include the styles itself rather than relying on some other template to have done so.
 * Styles included by a template can currently affect content on the page outside of the content generated by that template, but this ability may be removed in the future and should not be relied upon.
 * TemplateStyles allows few non-standardized CSS properties. Requests to support additional properties should be filed in Phabricator in the css-sanitizer and TemplateStyles projects.
 * Requests should include links to standards-track documents (e.g. on w3.org) describing the syntax of the properties being requested, and an analysis of current browser support for the properties (e.g. a link to a caniuse.com page about the properties).
 * Vendor-prefixed properties (e.g. anything starting with,  , or  ) are likely to be declined if they're not needed for modern browsers.
 * rules must use a  prefixed with "TemplateStyles". This should largely prevent redefining fonts used elsewhere in the document.
 * To target styles based on skins, use a selector such as ; specification of the   element is required and must be followed by a descendant combinator (i.e. the space). Other classes on the   or   elements may be targeted in the same manner.

Installation
If you install from git, you will also need to run.

For a more pleasant user interface, with syntax highlighting and a code editor with autoindent, install the following extensions:
 * Extension:WikiEditor
 * Extension:SyntaxHighlight
 * Extension:CodeEditor