Extension:TemplateStyles

MediaWiki extensions manual

TemplateStyles Release status: stable
Implementation	Tag , ContentHandler , Hook
Description	Load sanitized CSS stylesheets from a template.
Author(s)	Brad Jorsch Marc A. Pelletier
Latest version	Continuous updates
Compatibility policy	Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki	1.30+
PHP	7.3+
License	GNU General Public License 2.0 or later
Download	Download extension Git [?]: Download Git master browse repository (Phabricator · GitHub) commit history repository contributors (GitHub) code review
Help	Help:Extension:TemplateStyles
Parameters $wgTemplateStylesUseCodeEditor $wgTemplateStylesDisable $wgTemplateStylesDefaultNamespace $wgTemplateStylesDisallowedAtRules $wgTemplateStylesDisallowedProperties $wgTemplateStylesAllowedUrls $wgTemplateStylesAutoParseContent $wgTemplateStylesMaxStylesheetSize $wgTemplateStylesNamespaces
Tags <templatestyles src=... />
Hooks used CodeEditorGetPageLanguage ContentHandlerDefaultModelFor ParserClearState ParserFirstCallInit
Hooks provided TemplateStylesPropertySanitizer TemplateStylesStylesheetSanitizer
Quarterly downloads	1,153 (Ranked 1st)
Public wikis using	1,977 (Ranked 199th)
Translate the TemplateStyles extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

TemplateStyles is a parser extension that allows users to store custom CSS code on wiki pages and to embed these styles into articles via the ‎<templatestyles> tag. The extension allows only a safe subset of CSS syntax stored in embeddable style pages. This is powered by the css-sanitizer library.

Editors are encouraged to include styles for a template via TemplateStyles because this allows the same users to edit both the template and its styles, and this way styles are only loaded when needed (compared to adding to the sitewide MediaWiki:Common.css ).

For instructions on how to use the extension as an editor on a wiki, see Help:TemplateStyles .

The CSS page must be created first. By default any subpage in the Template namespace with a title ending in ".css" will be created with the "Sanitized CSS" content model if it contains no syntax errors.

The set of namespaces may be adjusted with $wgTemplateStylesNamespaces, or Special:ChangeContentModel may be used on any page. Then, in the template's wikitext, add the <templatestyles src="..." /> 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, the offending constructs will be removed when the CSS is outputted to the browser.

The value of the src attribute on the tag is the title of the page, defaulting to the Template namespace. (This default can be changed via $wgTemplateStylesDefaultNamespace.) For example, <templatestyles src="Example/styles.css" /> 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".

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

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

• Styles added by TemplateStyles are scoped into .mw-parser-output to avoid tampering with the user interface outside of the main parsed content.
  • To use TemplateStyles to style something like w:MediaWiki:Protectedpagetext, you would need to enclose the message's contents in <div class="mw-parser-output">...</div>.
• The styles should be written to target specific CSS classes, and anything that generates elements with those classes should also be sure to include the styles themselves rather than relying on some other template to do 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. (See discussion from phab:T155813#2996589 and in phab:T176272.)
  • Including styles on a template that affects contents outside of that template will cause those styles not to be applied when editing a section that doesn't contain that template. Example: including styles on an info box 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.
• TemplateStyles does not support CSS variables, see phab:T320322.
• TemplateStyles allows a 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 -webkit-, -moz-, or -ms-) are likely to be declined if they're not needed for modern browsers.
• @font-face rules must use a font-family 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 body.skin-vector .myClass; specification of the body element is required and must be followed by a descendant combinator (i.e. the space). Other classes on the body or html elements may be targeted in the same manner. See phab:T197617. 1.32+

• Download and move the extracted TemplateStyles folder to your extensions/ directory.
  Developers and code contributors should install the extension from Git instead, using:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/TemplateStyles
• Only when installing from Git, run Composer to install PHP dependencies, by issuing composer install --no-dev in the extension directory. (See task T173141 for potential complications.)
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'TemplateStyles' );
  

• Configure as required.
•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Vagrant installation:

• If using Vagrant , install with vagrant roles enable templatestyles --provision

[
    "audio" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
    ],
    "image" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
    ],
    "svg" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/[^?#]*\\.svg(?:[?#]|$)>"
    ],
    "font" => [],
    "namespace" => [
        "<.>"
    ],
]

$wgTidyConfig should be configured to use no tidying or RemexHtml. If used with any of the Raggett drivers, a ‎<templatestyles /> tag in the middle of a paragraph (including in an inline template) will cause tidy to break the paragraph at that point. The other drivers have not been tested for this issue.

It may help to enable $wgShowExceptionDetails in your LocalSettings.php to determine if you are experiencing any of the errors below.

• Class 'Wikimedia\CSS\Parser\Parser' not found

  This means a required library has not been installed. The error may come up when attempting to import a wiki CSS page or when changing the content model of a page to "sanitized-css". This was common in the past due to a bug in the extension distributor; shouldn't happen anymore.
  There is a generally method is update composer under the extension's directory.

• Import failed: The content model 'sanitized-css' is not registered on this wiki.

  Happens when you try to import a wiki page created via TemplateStyles, but TemplateStyles is not installed on your wiki.

• Help:TemplateStyles
• Css-sanitizer - used for the sanitization of the CSS.
• phab:T483 "RfC: Allow styling in templates" (about possibly deploying this extension on Wikimedia wikis)
  • Requests for comment/Allow styling in templates
• phab:T56864 "ResourceLoader: Implement support for LESS in wiki modules (user and site), supporting e.g. MediaWiki:Common.less"
• phab:T155813 "Decide on storage and delivery method for TemplateStyles CSS"
• It’s now easier to craft content for mobile devices: Responsive web design at the Wikipedia scale on the Wikimedia Blog.
• Extension:TemplateStylesExtender

This extension is being used on one or more Wikimedia projects. This probably means that the extension is stable and works well enough to be used by such high-traffic websites. Look for this extension's name in Wikimedia's CommonSettings.php and InitialiseSettings.php configuration files to see where it's installed. A full list of the extensions installed on a particular wiki can be seen on the wiki's Special:Version page.

This extension is included in the following wiki farms/hosts and/or packages: BlueSpice Canasta Fandom Miraheze MyWikis ShoutWiki Telepedia wiki.gg WikiForge This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm.