Extension:TemplateStyles

<languages/> Template:Extension <translate> The <tvar name=1>**TemplateStyles**</tvar> extension introduces a <tvar name=2>`<templatestyles>`</tvar> tag to specify that a stylesheet should be loaded from a wiki page.</translate> <translate> Placing this in a template allows the template to have custom styles without having to place them in <tvar name=1>Template:Ll</tvar>.</translate><translate>
For instructions on how to use the extension as an editor on a wiki, see <tvar name=1>Template:Ll</tvar>.

## Usage

</translate><translate> First, the CSS page must be created.</translate> <translate> By default any subpage in the Template namespace with a title ending in ".css" will be created with the "Sanitized CSS" <tvar name=1>Template:Ll</tvar> if it contains no syntax errors.</translate>

<translate> The set of namespaces may be adjusted with <tvar name=2>`$wgTemplateStylesNamespaces`</tvar>, or <tvar name=3>Template:Ll</tvar> may be used on any page.</translate> <translate> Then, in the template's wikitext, add the <tvar name=1>`<templatestyles src="..." />`</tvar> tag to load the styles.</translate>

<translate> 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.</translate> <translate> If invalid CSS is somehow saved anyway, the offending constructs will be removed when the CSS is output to the browser.</translate>

<translate> The value of the <tvar name=1>`src`</tvar> attribute on the tag is the title of the page, defaulting to the Template namespace.</translate> <translate> For example, <tvar name=1>`<templatestyles src="Example/styles.css" />`</tvar> will load the page "<tvar name=2>Template:Example/styles.css</tvar>".</translate> <translate> This will fail if that page does not exist or has a content model other than "Sanitized CSS".</translate>

<translate> Styles can be scoped within the page by using the optional <tvar name=1>`wrapper`</tvar> parameter to the tag, e.g. <tvar name=2>`<templatestyles src="Example/styles.css" wrapper="div.example" />`</tvar> would scope the styles loaded to any <tvar name=3>`<div class="example">`</tvar> inside the main parsed content.</translate> <translate> Any CSS simple selector sequence can be used for the <tvar name=wrap>`wrapper`</tvar> parameter.</translate> <translate> This is intended to allow side-by-side comparison of live and sandbox versions of a template.</translate>

<translate> Use of sanitized CSS is tracked like transclusion of templates, and will show up as a transclusion on <tvar name=1>Template:Ll</tvar>.</translate><translate>

### Caveats

* Styles added by TemplateStyles are scoped into <tvar name=1>`.mw-parser-output`</tvar> to avoid tampering with the user interface outside of the main parsed content.</translate><translate>
	+ To use TemplateStyles to style something like w:MediaWiki:Protectedpagetext, you would need to enclose the message's contents in <tvar name=1>`<div class="mw-parser-output">...</div>`</tvar>.</translate><translate>
* 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.</translate><translate>
	+ 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.

</translate>

* + <translate> Including styles on a template that affects contents outside of that template, will cause those styles to not be applied when editing a section that doesn't contain that template.</translate> <translate> Example: including styles on an infobox that affect all tables of the page, when editing a section that doesn't contain the infobox, those tables won't be styled when previewing that section.</translate>

<translate>

* TemplateStyles allows few non-standardized CSS properties.</translate><translate> Requests to support additional properties should be [<tvar name=url>https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?tags=TemplateStyles,css-sanitizer</tvar> filed in Phabricator in the css-sanitizer and TemplateStyles projects].</translate><translate>
	+ 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).</translate><translate>
	+ Vendor-prefixed properties (e.g. anything starting with <tvar name=1>`-webkit-`</tvar>, <tvar name=2>`-moz-`</tvar>, or <tvar name=3>`-ms-`</tvar>) are likely to be declined if they're not needed for [[<tvar name=4>Special:MyLanguage/Compatibility#Browser support matrix</tvar>|modern browsers]].</translate><translate>
* <tvar name=1>`@font-face`</tvar> rules must use a <tvar name=2>`font-family`</tvar> prefixed with "TemplateStyles".</translate><translate> This should largely prevent redefining fonts used elsewhere in the document.</translate><translate>
* To target styles based on skins, use a selector such as <tvar name=1>`body.skin-vector .myClass`</tvar>; specification of the <tvar name=2>`body`</tvar> element is required and must be followed by a descendant combinator (i.e. the space).</translate><translate> Other classes on the <tvar name=1>`body`</tvar> or <tvar name=2>`html`</tvar> elements may be targeted in the same manner.</translate> Template:MW version-inline<translate>

## Installation

</translate>Template:ExtensionInstall

Template:Note<translate>

## Configuration

</translate>

<translate>

### Other dependencies

</translate><translate> <tvar name=1>`Template:Ll`</tvar> should be configured to use no tidying or <tvar name=2>RemexHtml</tvar>.</translate> <translate> If used with any of the Raggett drivers, a <tvar name=1>`<templatestyles />`</tvar> tag in the middle of a paragraph (including in an inline template) will cause tidy to break the paragraph at that point.</translate> <translate> The other drivers have not been tested for this issue.</translate><translate>

## Potential errors

If you experience an error when importing pages from another wiki, for example, it may help to enable <tvar name=1>Template:Ll</tvar> in your <tvar name=2>`LocalSettings.php`</tvar> to determine if you are experiencing any of the errors below.
</translate>

* `Class 'Wikimedia\CSS\Parser\Parser' not found`
<translate> This error may come up when attempting to import a [[<tvar name=man>Special:MyLanguage/Manual:CSS</tvar>|wiki CSS page]] or when [[<tvar name=help>Special:MyLanguage/Help:ChangeContentModel</tvar>|changing the content model]] of a page to "santized-css".</translate> <translate> There is, as of April 16, 2020, an [[<tvar name=2>phab:T215713</tvar>|open bug]] in the extension distributor which requires <tvar name=1>`composer install --no-dev`</tvar> to be run **in the extension subdirectory** even when the extension is not installed from Git.</translate> <translate> See <tvar name=1>Topic:Ukv6pdo96a8qfur2</tvar> for details.</translate>
* `Import failed: The content model 'sanitized-css' is not registered on this wiki.`
<translate> Some people get this error on a wiki when importing pages.</translate> <translate> This extension provides that content model.</translate> <translate> Install TemplateStyles to fix your import.</translate>

<translate>

## See also

</translate>

* Template:Ll
* Template:Ll - <translate> used for the sanitization of the CSS.</translate>
* phab:T483 <translate> "RfC: Allow styling in templates" (about possibly deploying this extension on Wikimedia wikis)</translate>
	+ Requests for comment/Allow styling in templates
* phab:T56864 <translate> "ResourceLoader: Implement support for LESS in wiki modules (user and site), supporting e.g. MediaWiki:Common.less"</translate>
* phab:T155813 <translate> "Decide on storage and delivery method for TemplateStyles CSS"</translate>
* <translate> [[<tvar name=1>wmfblog:2018/03/26/responsive-web-design-templatestyles</tvar>|It’s now easier to craft content for mobile devices: Responsive web design at the Wikipedia scale]] on the Wikimedia Blog.</translate>
* Template:Ll

Template:Wikipedia [[Category:Metadata{{#translation:}}]] [[Category:CSS{{#translation:}}]]