Help:TemplateStyles
| Shortcut H:STYLES |
TemplateStyles is a tool that allows complex styling of templates. It is enabled through the TemplateStyles extension.
How does it work?
Editors can add <templatestyles src="[some page]" /> to a page and the contents of the referenced page will be parsed as CSS, sanitized and loaded on pages where the <templatestyles> tag is used (directly or by being used in a template that's being used in a page).
[some page] must have the sanitized-css (Sanitized CSS) content model, which is the default for subpages in the Template namespace that end with .css. The recommended usage pattern is to store the styles for Template:Foo under a subpage like Template:Foo/styles.css.
If [some page] lacks a namespace prefix, it defaults to the Template namespace. Thus, for example, <templatestyles src="Foo/styles.css" /> will load Template:Foo/styles.css.
The <templatestyles> tag should be placed before the content that is styled, e.g. at the top of the template, to avoid a potential flash of unstyled content if the page is partially rendered while being loaded.
What CSS rules are recognized?
Currently, TemplateStyles accepts most CSS3 properties supported by one or more major browser (as of early 2017). Beyond simple rules, @media, @page, @supports, @keyframe and @font-face/@font-feature-values at-rules are also supported (with font-face restricted to fonts whose name starts with TemplateStyles, for security reasons).
Non-standard properties (including vendor prefixes) are not currently supported.
How can I target mobile/desktop resolutions?
Media queries allow you to target elements at mobile resolution and desktop resolution. Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query. Note, MediaWiki has standardised on 640px and 1120px breakpoints to represent tablet and desktop.
How can I target specific skins?
MediaWiki provides various classes on the html and body elements, including one that indicates which skin is in use. These can be targeted by including a simple selector for the html or body element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).
Generally, this technique should be used for design consistency, rather than targeting mobile and desktop as all skins can be used in both mobile and desktop resolutions.
/* Elements with class 'foo' will have red text in all skins */
.foo { color: red; }
/* Override that to green for Vector only */
body.skin-vector .foo { color: green; }
/* Add a red border if the user doesn't have JavaScript enabled */
html.client-nojs .foo { border: 1px solid red; }
/* Make that border green in Vector */
html.client-nojs body.skin-vector .foo { border-color: green; }
/* This does not work! The 'body' element must be specified. */
.skin-vector .foo { background: orange; }
/* These do not work! The descendant combinator must be used */
body.skin-vector > .foo { background: orange; }
body.skin-vector ~ .foo { background: orange; }
html.client-nojs > body.skin-vector .foo { background: orange; }
In which order do CSS styles override?
Which CSS rule takes effect is controlled by specificity (roughly, the complexity of the selector - e.g. div.foo { margin: 10px } is more specific than .foo { margin: 5px }). In case of equal specificity, CSS styles that come later in the document override earlier styles.
MediaWiki:Common.css, other site scripts, user scripts and gadgets are loaded in the <head> section of the page. TemplateStyles stylesheets are loaded in the <body>, so they override site/user script and gadget rules with equal specificity, and in the case of two TemplateStyles rules, the second overrides the first. (Note though that TemplateStyles rules are deduplicated: if the same stylesheet is referenced multiple times on the page, it is only inserted the first time. Note also that "later" has to do with document position, not load order. Gadgets add their CSS after the page has fully loaded, by manipulating the page with JavaScript; some add it on-demand when the user does some action such as clicking a button. Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.)
How can Lua modules interact with styles?
TemplateStyles can be called from a Lua module using frame:extensionTag.
Example code is the following:
local p = {};
function p.templateStyle( frame, src )
return frame:extensionTag( 'templatestyles', '', { src = src } );
end
return p;
See also
| Navigation | Navigation • Search • Tracking changes • Logging in • Watchlist |
|---|---|
| Editing | Editing pages • VisualEditor • Wikicode (Images • Tables) • Talk pages • Categories • Subpages • Cheatsheet |
| Advanced | Starting a new page • Moving (renaming) a page • Merging pages • Splitting pages • Deleting pages • References • Special pages |
| Templates | Using templates (Link templates • Color templates) • Creating templates (Magic words • TemplateStyles • TemplateData) • Lua (Crash course) |
| Customization | Preferences • Skins • Custom CSS • User page • Signatures |
| Archives | FAQ • Uploading images • Tagging images • Manual of style |
| Introduction • FAQ • Editor's Hub | |
