Extension:TemplateStyles

From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manualManual:Extensions
Crystal Clear action run.png
TemplateStyles

Release status:Extension status beta

ImplementationTemplate:Extension#type Tag, ContentHandler
DescriptionTemplate:Extension#description Allows for loading sanitized CSS stylesheets from a template.
Author(s)Template:Extension#username User:BJorsch (WMF)
Marc A. Pelletier
Latest versionTemplate:Extension#version 1.0 (2017-06-07)
Compatibility policyCompatibility#mediawiki_extensions release branches
MediaWikiTemplate:Extension#mediawiki 1.30+
PHPTemplate:Extension#php 5.5+
Database changesTemplate:Extension#needs-updatephp No
LicenseTemplate:Extension#license GNU General Public License 2.0 or later
Download
ParametersTemplate:Extension#parameters

$wgTemplateStylesAllowedUrls $wgTemplateStylesNamespaces $wgTemplateStylesPropertyBlacklist $wgTemplateStylesAtRuleBlacklist $wgTemplateStylesUseCodeEditor $wgTemplateStylesAutoParseContent

TagsTemplate:Extension#tags
<templatestyles src=... />
Hooks usedTemplate:Extension#hook
ParserFirstCallInitManual:Hooks/ParserFirstCallInit
ContentHandlerDefaultModelForManual:Hooks/ContentHandlerDefaultModelFor
ParserAfterTidyManual:Hooks/ParserAfterTidy
CodeEditorGetPageLanguageManual:Hooks/CodeEditorGetPageLanguage
Hooks providedTemplate:Extension#newhook
TemplateStylesPropertySanitizerExtension:TemplateStyles/TemplateStylesPropertySanitizer
TemplateStylesStylesheetSanitizerExtension:TemplateStyles/TemplateStylesStylesheetSanitizer

Translate the TemplateStyles extension if it is available at translatewiki.net

Check usage and version matrix.

IssuesPhabricator

Open tasks · Report a bug

The TemplateStyles extension introduces a <templatestyles> tag to specify that a stylesheet should be loaded from a wiki page. Placing this in a template allows the template to have custom styles without having to place them in MediaWiki:Common.css.

Usage[edit]

First, the CSS page must be created. By default any page 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 $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 anyway, the offending constructs will be removed when the CSS is output to the browser.

The value of the src attribute on the tag is the title of the page, defaulting to the Template namespace. 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".

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

Caveats[edit]

  • 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 <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 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 -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.

Installation[edit]

  • Download and place the file(s) in a directory called TemplateStyles in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
    wfLoadExtension( 'TemplateStyles' );
    
  • YesY Done - Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

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

For a more pleasant user interface, with syntax highlighting and a code editor with autoindent, install the following extensions:

Configuration[edit]

Configuration settings
parameter default comment
$wgTemplateStylesAllowedUrls
[
    "audio" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
    ],
    "image" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/>"
    ],
    "svg" => [
        "<^https://upload\\.wikimedia\\.org/wikipedia/commons/[^?#]*\\.svg(?:[?#]|$)>"
    ],
    "font" => [],
    "namespace" => [
        "<.>"
    ],
    "css" => []
]
PCRE regular expressions to match allowed URLs for various types of external references. Keys are external reference types, values are arrays of regular expressions (including delimiters) to match allowed URLs. Current external reference types are:
audio
Sound file, for cue properties of the CSS Speech Module.
image
Image file, for properties such as background.
svg
SVG file, for Masking and Filters.
font
For @font-face's src.
namespace
For @namespace.
css
For @import.
$wgTemplateStylesNamespaces
[ 10 => true ]
Namespaces in which to set the "Sanitized CSS" content model for titles ending in ".css". Enabling this for 2 (User) or 8 (MediaWiki) would be a bad idea, as it would conflict with the normal CSS files in those namespaces.
$wgTemplateStylesPropertyBlacklist
[]
Properties to blacklist in CSS style rules. The TemplateStylesPropertySanitizerExtension:TemplateStyles/TemplateStylesPropertySanitizer hook allows for finer-grained control.
$wgTemplateStylesAtRuleBlacklist
[]
At-rules to blacklist in stylesheets. The TemplateStylesStylesheetSanitizerExtension:TemplateStyles/TemplateStylesStylesheetSanitizer hook allows for finer-grained control.
$wgTemplateStylesUseCodeEditor
true
Whether to enable Extension:CodeEditor for the "Sanitized CSS" content type.
$wgTemplateStylesAutoParseContent
true
If true, the "Sanitized CSS" content model will be added to $wgTextModelsToParse if the CSS content model is already present in that array. If false, add 'sanitized-css' to that array manually if you want categories and such parsed out of the CSS page.

See also[edit]