Export translations

Settings

Group

Language

Format

Export for off-line translation

Export in native format

Export in CSV format

<languages />
{{PD Help Page}}
<span lang="en" dir="ltr" class="mw-content-ltr">'''{{ll|Extension:TemplateStyles|nsp=0}}''' enables the complex behavioral and aesthetic styling of {{ll|Help:Templates|templates}} through the use of referenced external CSS files that are wiki pages themselves.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Notably, the ability to create/modify the CSS files is included in the default permissions for [[Special:MyLanguage/Manual:Autoconfirmed users|autoconfirmed users]] and so doesn't require involving someone with [[Special:MyLanguage/Manual:Interface administrators|interface administrator]] privileges.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
Editors can add {{tmpl|0=<code class="mw-highlight">{{^(}}{{#tag:span|templatestyles|class=nt}} {{attr|1=src|2="''[$1]''"}} /{{)^}}</code>|some page}} to a page and the contents of the referenced page will be parsed as [[w:Cascading Style Sheets|CSS]], sanitized and loaded on pages where the {{tag|templatestyles|open}} tag is used (either directly, or transcluded by a template in use on the page).
</div>

<span lang="en" dir="ltr" class="mw-content-ltr"><code>[some page]</code> must have the <code>sanitized-css</code> ({{int|content-model-sanitized-css}}) [[Special:MyLanguage/Content handlers|content model]], which is the default for subpages in the Template namespace that end with <code>.css</code>.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The recommended usage pattern is to store the styles for <code>Template:Foo</code> in a subpage of the template they're most impactful upon, such as <code>Template:Foo/styles.css</code>.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If <code>[some page]</code> lacks a namespace prefix, it defaults to the Template namespace. Thus, for example, <syntaxhighlight lang=html inline><templatestyles src="Foo/styles.css" /></syntaxhighlight> will load <code>Template:Foo/styles.css</code>.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
The {{tag|templatestyles|open}} tag should be placed before the content that is styled, ideally at the top of the template or as close to there as possible, to avoid a potential [[w:Flash of unstyled content|flash of unstyled content]] if the page becomes initially visible while still only partially rendered.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== What problems does it solve? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
TemplateStyles allows editors to associate style rules to specific pages, provides the full power of CSS stylesheets while filtering dangerous constructs, and works with preview/debug tools (such as {{ll|Extension:TemplateSandbox|nsp=0}}) as expected.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Lowering the access and maintainability barrier will hopefully result in more innovation in the way templates are visually designed, less maintenance overhead, and better adaptability to screen options (especially with mobile devices constituting [https://diff.wikimedia.org/2016/03/30/unique-devices-dataset/ more than half] of Wikipedia pageviews even as of {{ymd|2016|03|30}}).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Traditionally, there were two ways to style templates (or any other content) on MediaWiki pages, with neither approach working especially well:
</div>

* <span lang="en" dir="ltr" class="mw-content-ltr">Using inline styles (that is, raw HTML code with added attributes like {{inline-code|lang=html+lasso|code=style="margin: 10px;"}})</span>
* <span lang="en" dir="ltr" class="mw-content-ltr">Using certain special system messages such as {{ll|Manual:Interface/Stylesheets|MediaWiki:Common.css}}</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== For inline styling ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* There is no separation of content and presentation. In cases where the content does not come from a template (e.g. tables in articles), that will result in article wikitext that's unintelligible for most editors.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Since styles are mixed with wikitext, {{ll|Extension:CodeMirror|syntax highlighting}} and other forms of CSS editing support are difficult or impossible.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Styles have to be repeated for each HTML element they apply to, which results in lots of copy-pasting and code that is hard to read and maintain.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Style attributes are limited to a subset of CSS.
</div> <span lang="en" dir="ltr" class="mw-content-ltr">Most importantly, <code>@media</code> rules needed for [[w:Responsive web design|responsive design]] do not work so it's impossible to make templates that work well over a wide range of screen sizes.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
=== For system pages (MediaWiki:*.css) ===
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
* Editing is limited to {{ll|MediaWiki 1.32/interface-admin|interface administrators}}, which is a major barrier to participation.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Editing restrictions cannot be lifted as there is no way to limit what CSS rules can be used, and some of them could be abused to track readers' IP addresses or even execute scripts in some older browsers.
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
* Changes are impossible to test without saving first.
</div> {{phab|T112474}}
<div lang="en" dir="ltr" class="mw-content-ltr">
* All stylesheets must be loaded on all pages (whether they actually use the page or not), which wastes bandwidth and makes debugging style rules harder.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Is it safe? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Yes! TemplateStyles includes a full-fledged {{ll|css-sanitizer|CSS parser}} that reads, re-serializes and escapes all code and removes CSS rules which it does not recognize. The parser is sufficiently fine-grained to reject remote resources (such as background images) but allow local ones.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">CSS selectors are rewritten so that they cannot refer to elements outside article content.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">(Visually modifying areas outside article content by displacing parts of the article, e.g. via absolute positioning, is not prevented at this time. This is no change from the status quo, as such a thing was already possible with wikitext and inline styles.)</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Allowed CSS properties and rules ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">As of {{#timefl:2025-03-05T12:34:00-08:00|date}}, TemplateStyles accepts no fewer than 331 CSS properties and aliases, including the vast majority of those most often used on the modern internet with official support by one or more major web browser.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Beyond simple rules, {{cssi|@media}}, {{cssi|@page}}, {{cssi|@supports}}, {{cssi|@keyframe}}, {{cssi|@font-face}}/{{cssi|@font-feature-values}} at-rules are also supported (with font-face restricted to fonts whose name starts with <code>TemplateStyles</code>, for security reasons).</span>

<span lang="en" dir="ltr" class="mw-content-ltr">The CSS {{cssi|var()}} function is permitted only in properties taking a single color value and inside {{cssi|calc()}}functions.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Setting custom properties is not permitted.</span>

{{Collapse|color=var(--color-base, #202122)|background-c=var(--background-color-progressive-subtle, #f1f4fd)|class=plainlinks|expand=no|header-bc=#7B68ee80|header-c=var(--background-color-progressive-subtle--active, #b6d4fb)|header-fs=0.95rem|margin=1.25rem auto|padding=1rem 1.5rem 0.75rem|title=<span lang="en" dir="ltr" class="mw-content-ltr">CSS property declarations permitted by css-sanitizer</span> {{Efn|group=lower-alpha|name=current-asof}}{{Efn|group=lower-alpha|name=truth-source}}{{Efn|group=lower-alpha|name=vendor-prefixes}}|content=<big><span lang="en" dir="ltr" class="mw-content-ltr">'''Note:''' Each property is linked to a source of documentation on its usage, however the typical external link icons have been suppressed to prevent the obscuring of any links to footnotes that similarly appear in superscript.</span></big>
{{Div col|colwidth=25em|rules=yes|style=margin: 1.75em 0 2.5rem;|content=
* '''{{Mono|align-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/align-content {{cssi|align-content}}]
** [https://developer.mozilla.org/docs/Web/CSS/align-items {{cssi|align-items}}]
** [https://developer.mozilla.org/docs/Web/CSS/align-self {{cssi|align-self}}]
* [https://developer.mozilla.org/docs/Web/CSS/animation {{cssi|animation}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-delay {{cssi|animation-delay}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-direction {{cssi|animation-direction}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-duration {{cssi|animation-duration}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode {{cssi|animation-fill-mode}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count {{cssi|animation-iteration-count}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-name {{cssi|animation-name}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-play-state {{cssi|animation-play-state}}]
** [https://developer.mozilla.org/docs/Web/CSS/animation-timing-function {{cssi|animation-timing-function}}]
* [https://developer.mozilla.org/docs/Web/CSS/appearance {{cssi|appearance}}]
* [https://developer.mozilla.org/docs/Web/CSS/aspect-ratio {{cssi|aspect-ratio}}]
* [https://developer.mozilla.org/docs/Web/CSS/background {{cssi|background}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-attachment {{cssi|background-attachment}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-blend-mode {{cssi|background-blend-mode}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-clip {{cssi|background-clip}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-color {{cssi|background-color}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-image {{cssi|background-image}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-origin {{cssi|background-origin}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-position {{cssi|background-position}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-repeat {{cssi|background-repeat}}]
** [https://developer.mozilla.org/docs/Web/CSS/background-size {{cssi|background-size}}]
* '''{{Mono|block-*}}'''
** [https://www.w3.org/TR/css-overflow-4/#block-ellipsis {{cssi|block-overflow}}] {{Efn|group=lower-alpha|name=block-ellipsis}}
** [https://developer.mozilla.org/docs/Web/CSS/block-size {{cssi|block-size}}]
* [https://developer.mozilla.org/docs/Web/CSS/border {{cssi|border}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-block {{cssi|border-block}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-block-color {{cssi|border-block-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-block-end {{cssi|border-block-end}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-end-color {{cssi|border-block-end-color}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-end-style {{cssi|border-block-end-style}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-end-width {{cssi|border-block-end-width}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-block-start {{cssi|border-block-start}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-start-color {{cssi|border-block-start-color}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-start-style {{cssi|border-block-start-style}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-block-start-width {{cssi|border-block-start-width}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-block-style {{cssi|border-block-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-block-width {{cssi|border-block-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-bottom {{cssi|border-bottom}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-bottom-color {{cssi|border-bottom-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius {{cssi|border-bottom-left-radius}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius {{cssi|border-bottom-right-radius}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-bottom-style {{cssi|border-bottom-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-bottom-width {{cssi|border-bottom-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-collapse {{cssi|border-collapse}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-color {{cssi|border-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius {{cssi|border-end-end-radius}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius {{cssi|border-end-start-radius}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-image {{cssi|border-image}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-image-outset {{cssi|border-image-outset}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-image-repeat {{cssi|border-image-repeat}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-image-slice {{cssi|border-image-slice}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-image-source {{cssi|border-image-source}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-image-width {{cssi|border-image-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-inline {{cssi|border-inline}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-inline-color {{cssi|border-inline-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-inline-end {{cssi|border-inline-end}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color {{cssi|border-inline-end-color}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-end-style {{cssi|border-inline-end-style}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width {{cssi|border-inline-end-width}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-inline-start {{cssi|border-inline-start}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color {{cssi|border-inline-start-color}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-start-style {{cssi|border-inline-start-style}}]
**** [https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width {{cssi|border-inline-start-width}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-inline-style {{cssi|border-inline-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-inline-width {{cssi|border-inline-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-left {{cssi|border-left}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-left-color {{cssi|border-left-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-left-style {{cssi|border-left-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-left-width {{cssi|border-left-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-radius {{cssi|border-radius}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-right {{cssi|border-right}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-right-color {{cssi|border-right-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-right-style {{cssi|border-right-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-right-width {{cssi|border-right-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-spacing {{cssi|border-spacing}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius {{cssi|border-start-end-radius}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius {{cssi|border-start-start-radius}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-style {{cssi|border-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-top {{cssi|border-top}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-top-color {{cssi|border-top-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius {{cssi|border-top-left-radius}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius {{cssi|border-top-right-radius}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-top-style {{cssi|border-top-style}}]
*** [https://developer.mozilla.org/docs/Web/CSS/border-top-width {{cssi|border-top-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/border-width {{cssi|border-width}}]
* [https://developer.mozilla.org/docs/Web/CSS/bottom {{cssi|bottom}}]
* '''{{Mono|box-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/box-decoration-break {{cssi|box-decoration-break}}]
** [https://developer.mozilla.org/docs/Web/CSS/box-shadow {{cssi|box-shadow}}]]
** [https://developer.mozilla.org/docs/Web/CSS/box-sizing {{cssi|box-sizing}}]
* '''{{Mono|break-*}}''' {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/break-after {{cssi|break-after}}] {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/break-before {{cssi|break-before}}] {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/break-inside {{cssi|break-inside}}] {{Efn|group=lower-alpha|name=page-break}}
* [https://developer.mozilla.org/docs/Web/CSS/caption-side {{cssi|caption-side}}]
* [https://www.w3.org/TR/css-ui-4/#caret {{cssi|caret}}]
** [https://developer.mozilla.org/docs/Web/CSS/caret-color {{cssi|caret-color}}]
** [https://www.w3.org/TR/css-ui-4/#caret-shape {{cssi|caret-shape}}]
* [https://developer.mozilla.org/docs/Web/CSS/clear {{cssi|clear}}]
* [https://developer.mozilla.org/docs/Web/CSS/clip {{cssi|clip}}] {{Efn|group=lower-alpha|name=clip}}
** [https://developer.mozilla.org/docs/Web/CSS/clip-path {{cssi|clip-path}}]
** [https://developer.mozilla.org/docs/Web/CSS/clip-rule {{cssi|clip-rule}}]
* [https://developer.mozilla.org/docs/Web/CSS/color {{cssi|color}}]
** [https://developer.mozilla.org/docs/Web/CSS/color-interpolation-filters {{cssi|color-interpolation-filters}}]
* [https://developer.mozilla.org/docs/Web/CSS/columns {{cssi|columns}}]
** [https://developer.mozilla.org/docs/Web/CSS/column-count {{cssi|column-count}}]
** [https://developer.mozilla.org/docs/Web/CSS/column-width {{cssi|column-width}}]
** '''{{Mono|column-*}}'''
*** [https://developer.mozilla.org/docs/Web/CSS/column-fill {{cssi|column-fill}}]
*** [https://developer.mozilla.org/docs/Web/CSS/column-gap {{cssi|column-gap}}] {{Efn|group=lower-alpha|name=grid-column-gap}}
*** [https://developer.mozilla.org/docs/Web/CSS/column-rule {{cssi|column-rule}}]
**** [https://developer.mozilla.org/docs/Web/CSS/column-rule-color {{cssi|column-rule-color}}]
**** [https://developer.mozilla.org/docs/Web/CSS/column-rule-style {{cssi|column-rule-style}}]
**** [https://developer.mozilla.org/docs/Web/CSS/column-rule-width {{cssi|column-rule-width}}]
*** [https://developer.mozilla.org/docs/Web/CSS/column-span {{cssi|column-span}}]
* '''{{Mono|contain-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size {{cssi|contain-intrinsic-block-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height {{cssi|contain-intrinsic-height}}]
** [https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size {{cssi|contain-intrinsic-inline-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size {{cssi|contain-intrinsic-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width {{cssi|contain-intrinsic-width}}]
* [https://developer.mozilla.org/docs/Web/CSS/content {{cssi|content}}]
* [https://drafts.csswg.org/css-overflow-4/#continue {{cssi|continue}}] {{Efn|group=lower-alpha|name=region-fragment}}
* '''{{Mono|counter-*}}'''
* [https://developer.mozilla.org/docs/Web/CSS/counter-increment {{cssi|counter-increment}}]
* [https://developer.mozilla.org/docs/Web/CSS/counter-reset {{cssi|counter-reset}}]
* [https://developer.mozilla.org/docs/Web/CSS/cursor {{cssi|cursor}}]
* [https://developer.mozilla.org/docs/Web/CSS/direction {{cssi|direction}}]
* [https://developer.mozilla.org/docs/Web/CSS/display {{cssi|display}}]
* [https://developer.mozilla.org/docs/Web/CSS/empty-cells {{cssi|empty-cells}}]
* [https://developer.mozilla.org/docs/Web/CSS/filter {{cssi|filter}}]
* [https://developer.mozilla.org/docs/Web/CSS/flex {{cssi|flex}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-basis {{cssi|flex-basis}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-direction {{cssi|flex-direction}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-flow {{cssi|flex-flow}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-grow {{cssi|flex-grow}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-shrink {{cssi|flex-shrink}}]
** [https://developer.mozilla.org/docs/Web/CSS/flex-wrap {{cssi|flex-wrap}}]
* [https://developer.mozilla.org/docs/Web/CSS/float {{cssi|float}}]
* '''{{Mono|flood-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/flood-color {{cssi|flood-color}}]
** [https://developer.mozilla.org/docs/Web/CSS/flood-opacity {{cssi|flood-opacity}}]
* [https://developer.mozilla.org/docs/Web/CSS/font {{cssi|font}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-family {{cssi|font-family}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-feature-settings {{cssi|font-feature-settings}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-kerning {{cssi|font-kerning}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-size {{cssi|font-size}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-size-adjust {{cssi|font-size-adjust}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-stretch {{cssi|font-stretch}}] {{Efn|group=lower-alpha|name=font-width}}
** [https://developer.mozilla.org/docs/Web/CSS/font-style {{cssi|font-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-synthesis {{cssi|font-synthesis}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-variant {{cssi|font-variant}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-variant-caps {{cssi|font-variant-caps}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-variant-east-asian {{cssi|font-variant-east-asian}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-variant-ligatures {{cssi|font-variant-ligatures}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric {{cssi|font-variant-numeric}}]
*** [https://developer.mozilla.org/docs/Web/CSS/font-variant-position {{cssi|font-variant-position}}]
** [https://developer.mozilla.org/docs/Web/CSS/font-weight {{cssi|font-weight}}]
* [https://developer.mozilla.org/docs/Web/CSS/gap {{cssi|gap}}] {{Efn|group=lower-alpha|name=grid-gap}}
* [https://developer.mozilla.org/docs/Web/CSS/grid {{cssi|grid}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-area {{cssi|grid-area}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns {{cssi|grid-auto-columns}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow {{cssi|grid-auto-flow}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows {{cssi|grid-auto-rows}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-column {{cssi|grid-column}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-column-end {{cssi|grid-column-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-column-start {{cssi|grid-column-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-row {{cssi|grid-row}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-row-end {{cssi|grid-row-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-row-start {{cssi|grid-row-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/grid-template {{cssi|grid-template}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-template-areas {{cssi|grid-template-areas}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-template-columns {{cssi|grid-template-columns}}]
*** [https://developer.mozilla.org/docs/Web/CSS/grid-template-rows {{cssi|grid-template-rows}}]
* [https://developer.mozilla.org/docs/Web/CSS/hanging-punctuation {{cssi|hanging-punctuation}}]
* [https://developer.mozilla.org/docs/Web/CSS/height {{cssi|height}}]
* [https://developer.mozilla.org/docs/Web/CSS/hyphens {{cssi|hyphens}}]
* '''{{Mono|image-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/image-orientation {{cssi|image-orientation}}]
** [https://developer.mozilla.org/docs/Web/CSS/image-rendering {{cssi|image-rendering}}]
* [https://developer.mozilla.org/docs/Web/CSS/inline-size {{cssi|inline-size}}]
* [https://developer.mozilla.org/docs/Web/CSS/inset {{cssi|inset}}] {{Efn|group=lower-alpha|name=offset-inset}}
** [https://developer.mozilla.org/docs/Web/CSS/inset-block {{cssi|inset-block}}]
*** [https://developer.mozilla.org/docs/Web/CSS/inset-block-end {{cssi|inset-block-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/inset-block-start {{cssi|inset-block-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/inset-inline {{cssi|inset-inline}}]
*** [https://developer.mozilla.org/docs/Web/CSS/inset-inline-end {{cssi|inset-inline-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/inset-inline-start {{cssi|inset-inline-start}}]
* [https://developer.mozilla.org/docs/Web/CSS/isolation {{cssi|isolation}}]
* '''{{Mono|justify-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/justify-content {{cssi|justify-content}}]
** [https://developer.mozilla.org/docs/Web/CSS/justify-items {{cssi|justify-items}}]
** [https://developer.mozilla.org/docs/Web/CSS/justify-self {{cssi|justify-self}}]
* [https://developer.mozilla.org/docs/Web/CSS/left {{cssi|left}}]
* [https://developer.mozilla.org/docs/Web/CSS/letter-spacing {{cssi|letter-spacing}}]
* [https://developer.mozilla.org/docs/Web/CSS/lighting-color {{cssi|lighting-color}}]
* '''{{Mono|line-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/line-break {{cssi|line-break}}]
** [https://developer.mozilla.org/docs/Web/CSS/line-clamp {{cssi|line-clamp}}]
** [https://developer.mozilla.org/docs/Web/CSS/line-height {{cssi|line-height}}]
* [https://developer.mozilla.org/docs/Web/CSS/list-style {{cssi|list-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/list-style-image {{cssi|list-style-image}}]
** [https://developer.mozilla.org/docs/Web/CSS/list-style-position {{cssi|list-style-position}}]
** [https://developer.mozilla.org/docs/Web/CSS/list-style-type {{cssi|list-style-type}}]
* [https://developer.mozilla.org/docs/Web/CSS/margin {{cssi|margin}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-block {{cssi|margin-block}}]
*** [https://developer.mozilla.org/docs/Web/CSS/margin-block-end {{cssi|margin-block-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/margin-block-start {{cssi|margin-block-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-bottom {{cssi|margin-bottom}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-inline {{cssi|margin-inline}}]
*** [https://developer.mozilla.org/docs/Web/CSS/margin-inline-end {{cssi|margin-inline-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/margin-inline-start {{cssi|margin-inline-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-left {{cssi|margin-left}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-right {{cssi|margin-right}}]
** [https://developer.mozilla.org/docs/Web/CSS/margin-top {{cssi|margin-top}}]
* [https://developer.mozilla.org/docs/Web/CSS/mask {{cssi|mask}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-border {{cssi|mask-border}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-mode {{cssi|mask-border-mode}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-outset {{cssi|mask-border-outset}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-repeat {{cssi|mask-border-repeat}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-slice {{cssi|mask-border-slice}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-source {{cssi|mask-border-source}}]
*** [https://developer.mozilla.org/docs/Web/CSS/mask-border-width {{cssi|mask-border-width}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-clip {{cssi|mask-clip}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-composite {{cssi|mask-composite}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-image {{cssi|mask-image}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-mode {{cssi|mask-mode}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-origin {{cssi|mask-origin}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-position {{cssi|mask-position}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-repeat {{cssi|mask-repeat}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-size {{cssi|mask-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/mask-type {{cssi|mask-type}}]
* '''{{Mono|max-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/max-block-size {{cssi|max-block-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/max-height {{cssi|max-height}}]
** [https://developer.mozilla.org/docs/Web/CSS/max-inline-size {{cssi|max-inline-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/max-width {{cssi|max-width}}]
* [https://www.w3.org/TR/css-overflow-4/#max-lines {{cssi|max-lines}}]
* '''{{Mono|min-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/min-block-size {{cssi|min-block-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/min-height {{cssi|min-height}}]
** [https://developer.mozilla.org/docs/Web/CSS/min-inline-size {{cssi|min-inline-size}}]
** [https://developer.mozilla.org/docs/Web/CSS/min-width {{cssi|min-width}}]
* [https://www.w3.org/TR/css-sizing-4/#intrinsic-contribution-override {{cssi|min-intrinsic-sizing}}]
* [https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode {{cssi|mix-blend-mode}}]
* '''{{Mono|nav-*}}'''
** [https://www.w3.org/TR/css-ui-4/#nav-dir {{cssi|nav-down}}]
** [https://www.w3.org/TR/css-ui-4/#nav-dir {{cssi|nav-left}}]
** [https://www.w3.org/TR/css-ui-4/#nav-dir {{cssi|nav-right}}]
** [https://www.w3.org/TR/css-ui-4/#nav-dir {{cssi|nav-up}}]
* '''{{Mono|object-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/object-fit {{cssi|object-fit}}]
** [https://developer.mozilla.org/docs/Web/CSS/object-position {{cssi|object-position}}]
* '''{{Mono|offset-*}}''' {{Efn|group=lower-alpha|name=offset-inset}}
** [https://developer.mozilla.org/docs/Web/CSS/offset-anchor {{cssi|offset-anchor}}]
** [https://developer.mozilla.org/docs/Web/CSS/offset-position {{cssi|offset-position}}]
** [https://developer.mozilla.org/docs/Web/CSS/offset-path {{cssi|offset-path}}]
** [https://developer.mozilla.org/docs/Web/CSS/offset-distance {{cssi|offset-distance}}]
** [https://developer.mozilla.org/docs/Web/CSS/offset-rotate {{cssi|offset-rotate}}]
** <code>{{del|offset-after|Superseded by inset-*.}}</code>
** <code>{{del|offset-before|Superseded by inset-*.}}</code>
** <code>{{del|offset-end|Superseded by inset-*.}}</code>
** <code>{{del|offset-start|Superseded by inset-*.}}</code>
* [https://developer.mozilla.org/docs/Web/CSS/opacity {{cssi|opacity}}]
* [https://developer.mozilla.org/docs/Web/CSS/order {{cssi|order}}]
* [https://developer.mozilla.org/docs/Web/CSS/orphans {{cssi|orphans}}]
* [https://developer.mozilla.org/docs/Web/CSS/outline {{cssi|outline}}]
** [https://developer.mozilla.org/docs/Web/CSS/outline-color {{cssi|outline-color}}]
** [https://developer.mozilla.org/docs/Web/CSS/outline-offset {{cssi|outline-offset}}]
** [https://developer.mozilla.org/docs/Web/CSS/outline-style {{cssi|outline-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/outline-width {{cssi|outline-width}}]
* [https://developer.mozilla.org/docs/Web/CSS/overflow {{cssi|overflow}}]
** [https://developer.mozilla.org/docs/Web/CSS/overflow-block {{cssi|overflow-block}}]
** [https://developer.mozilla.org/docs/Web/CSS/overflow-inline {{cssi|overflow-inline}}]
** [https://developer.mozilla.org/docs/Web/CSS/overflow-wrap {{cssi|overflow-wrap}}] {{Efn|group=lower-alpha|name=word-wrap}}
** [https://developer.mozilla.org/docs/Web/CSS/overflow-x {{cssi|overflow-x}}]
** [https://developer.mozilla.org/docs/Web/CSS/overflow-y {{cssi|overflow-y}}]
* [https://developer.mozilla.org/docs/Web/CSS/padding {{cssi|padding}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-block {{cssi|padding-block}}]
*** [https://developer.mozilla.org/docs/Web/CSS/padding-block-end {{cssi|padding-block-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/padding-block-start {{cssi|padding-block-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-bottom {{cssi|padding-bottom}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-inline {{cssi|padding-inline}}]
*** [https://developer.mozilla.org/docs/Web/CSS/padding-inline-end {{cssi|padding-inline-end}}]
*** [https://developer.mozilla.org/docs/Web/CSS/padding-inline-start {{cssi|padding-inline-start}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-left {{cssi|padding-left}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-right {{cssi|padding-right}}]
** [https://developer.mozilla.org/docs/Web/CSS/padding-top {{cssi|padding-top}}]
* '''{{Mono|page-break-*}}''' {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/page-break-after {{cssi|page-break-after}}] {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/page-break-before {{cssi|page-break-before}}] {{Efn|group=lower-alpha|name=page-break}}
** [https://developer.mozilla.org/docs/Web/CSS/page-break-inside {{cssi|page-break-inside}}] {{Efn|group=lower-alpha|name=page-break}}
* '''{{Mono|place-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/place-content {{cssi|place-content}}]
** [https://developer.mozilla.org/docs/Web/CSS/place-items {{cssi|place-items}}]
** [https://developer.mozilla.org/docs/Web/CSS/place-self {{cssi|place-self}}]
* [https://developer.mozilla.org/docs/Web/CSS/position {{cssi|position}}]
* [https://developer.mozilla.org/docs/Web/CSS/quotes {{cssi|quotes}}]
* [https://developer.mozilla.org/docs/Web/CSS/resize {{cssi|resize}}]
* [https://developer.mozilla.org/docs/Web/CSS/right {{cssi|right}}]
* [https://developer.mozilla.org/docs/Web/CSS/row-gap {{cssi|row-gap}}] {{Efn|group=lower-alpha|name=grid-row-gap}}
* '''{{Mono|shape-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/shape-image-threshold {{cssi|shape-image-threshold}}]
** [https://developer.mozilla.org/docs/Web/CSS/shape-margin {{cssi|shape-margin}}]
** [https://developer.mozilla.org/docs/Web/CSS/shape-outside {{cssi|shape-outside}}]
* [https://developer.mozilla.org/docs/Web/CSS/tab-size {{cssi|tab-size}}]
* [https://developer.mozilla.org/docs/Web/CSS/table-layout {{cssi|table-layout}}]
* '''{{Mono|text-*}}'''
** [https://developer.mozilla.org/docs/Web/CSS/text-align {{cssi|text-align}}] {{Efn|group=lower-alpha|name=text-align-all}}
*** [https://www.w3.org/TR/2018/WD-css-text-3-20181206/#text-align-all-property {{cssi|text-align-all}}] {{Efn|group=lower-alpha|name=text-align-all}}
*** [https://developer.mozilla.org/docs/Web/CSS/text-align-last {{cssi|text-align-last}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-combine-upright {{cssi|text-combine-upright}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-decoration {{cssi|text-decoration}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-decoration-color {{cssi|text-decoration-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-decoration-line {{cssi|text-decoration-line}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-decoration-style {{cssi|text-decoration-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-emphasis {{cssi|text-emphasis}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color {{cssi|text-emphasis-color}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-emphasis-position {{cssi|text-emphasis-position}}]
*** [https://developer.mozilla.org/docs/Web/CSS/text-emphasis-style {{cssi|text-emphasis-style}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-indent {{cssi|text-indent}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-justify {{cssi|text-justify}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-orientation {{cssi|text-orientation}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-overflow {{cssi|text-overflow}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-shadow {{cssi|text-shadow}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-transform {{cssi|text-transform}}]
** [https://developer.mozilla.org/docs/Web/CSS/text-underline-position {{cssi|text-underline-position}}]
* [https://developer.mozilla.org/docs/Web/CSS/top {{cssi|top}}]
* [https://developer.mozilla.org/docs/Web/CSS/transform {{cssi|transform}}]
** [https://developer.mozilla.org/docs/Web/CSS/transform-box {{cssi|transform-box}}]
** [https://developer.mozilla.org/docs/Web/CSS/transform-origin {{cssi|transform-origin}}]
* [https://developer.mozilla.org/docs/Web/CSS/transition {{cssi|transition}}]
** [https://developer.mozilla.org/docs/Web/CSS/transition-delay {{cssi|transition-delay}}]
** [https://developer.mozilla.org/docs/Web/CSS/transition-duration {{cssi|transition-duration}}]
** [https://developer.mozilla.org/docs/Web/CSS/transition-property {{cssi|transition-property}}]
** [https://developer.mozilla.org/docs/Web/CSS/transition-timing-function {{cssi|transition-timing-function}}]
* [https://developer.mozilla.org/docs/Web/CSS/unicode-bidi {{cssi|unicode-bidi}}]
* [https://developer.mozilla.org/docs/Web/CSS/user-select {{cssi|user-select}}]
** [https://developer.mozilla.org/docs/Web/CSS/user-select {{cssi|-moz-user-select}}]
** [https://docs3.w3cub.com/css/-ms-user-select/ {{cssi|-ms-user-select}}]
** [https://www.w3.org/TR/css-ui-4/#content-selection {{cssi|-webkit-user-select}}]
* [https://developer.mozilla.org/docs/Web/CSS/vertical-align {{cssi|vertical-align}}]
* [https://developer.mozilla.org/docs/Web/CSS/visibility {{cssi|visibility}}]
* [https://developer.mozilla.org/docs/Web/CSS/white-space {{cssi|white-space}}]
* [https://developer.mozilla.org/docs/Web/CSS/widows {{cssi|widows}}]
* [https://developer.mozilla.org/docs/Web/CSS/width {{cssi|width}}]
* [https://developer.mozilla.org/docs/Web/CSS/word-break {{cssi|word-break}}]
* [https://developer.mozilla.org/docs/Web/CSS/word-spacing {{cssi|word-spacing}}]
* [https://developer.mozilla.org/docs/Web/CSS/writing-mode {{cssi|writing-mode}}]
* [https://developer.mozilla.org/docs/Web/CSS/z-index {{cssi|z-index}}]
}}

<hr style="border: none;  box-shadow: inset 0 12px 12px -12px #00000080; height: 0.75rem; margin: 2.5rem 1rem 0;" />
<p style="font-size: 1rem; font-weight: 600; margin: 0.25rem 0 -0.5rem; text-decoration: underline #000 solid from-font;">{{Int|coll-rendering_finished_notes_heading}}</p>
{{Notelist|colwidth=36em|group=lower-alpha|notes=
{{Efn|group=lower-alpha|name=current-asof|reference=<span lang="en" dir="ltr" class="mw-content-ltr">This list is current as of changeset [https://phabricator.wikimedia.org/rCSSSffe10a21512f00405b4d0d124eb2c4866749e300 ffe10a21512f] to the css-sanitizer [[git:css-sanitizer|source code repository]], authored at {{#timefl:2025-03-05T12:34:00-08:00|both}}.</span>}}
{{Efn|group=lower-alpha|name=truth-source|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The authoritative reference for these properties will always be the source code for the {{ll|css-sanitizer}} library, specifically the <code>[[gerrit:plugins/gitiles/css-sanitizer/+/refs/heads/master/src/Sanitizer/StylePropertySanitizer.php|src/Sanitizer/StylePropertySanitizer.php]]</code> file.</span> <span lang="en" dir="ltr" class="mw-content-ltr">When reviewing it, a simple method for bringing them into greater focus is to perform a full text search of the contents for the string {{phpi|$props}}.</span>}}
{{Efn|group=lower-alpha|name=vendor-prefixes|reference=<span lang="en" dir="ltr" class="mw-content-ltr">Non-standard properties—including those with vendor prefixes, except for the vendor-prefixed <code>-*-user-select</code> group—have never been recognized by this extension and continue to be automatically rejected, as of {{ymd|2024|01|02}}; see [[phab:T162379]]: ''Decide which non-standard CSS properties to support in TemplateStyles'' for notice of any progress on a resolution to this issue.</span>}}
{{Efn|group=lower-alpha|name=block-ellipsis|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The modern {{cssi|block-ellipsis}} property is present in the extension source code only by its original name, {{cssi|block-overflow}} ([[gerrit:plugins/gitiles/css-sanitizer/+/ffe10a21512f00405b4d0d124eb2c4866749e300/src/Sanitizer/StylePropertySanitizer.php#676|StylePropertySanitizer.php]]).</span> <span lang="en" dir="ltr" class="mw-content-ltr">Though the property was [https://github.com/w3c/csswg-drafts/commit/20b15b4d66b0fdfa8406f1ce28604128f02ee7bb#diff-98396261e9414947537a34ccbec62246077c62dc2046cf781b4d3c9fa2cbf958R793 renamed during drafting by the {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} in {{ymd|2018|08|24}}] and is now only a legacy alias, until the extension is updated only the original property name is accepted as valid.</span>}}
{{Efn|group=lower-alpha|name=grid-column-gap|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The legacy name alias {{cssi|grid-column-gap}} is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, {{cssi|column-gap}}, had been used.</span>}}
{{Efn|group=lower-alpha|name=clip|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The {{del|clip}} property was [https://github.com/w3c/fxtf-drafts/commit/4e95a63a1b09e497cdf36ce0555250bac8b0ea4b#diff-7f6fc2554260a4482e466cfb8ad217e8fbbb95c736de14adbf0cc8a281caf740R116 deprecated by the {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} in {{ymd|2018|07|22}}], and official guidance was added to use the {{cssi|clip-path}} property in its place; it is subject to removal at any time due to definition conflicts with other properties.</span>}}
{{Efn|group=lower-alpha|name=region-fragment|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The modern {{cssi|continue}} property, which is accepted by this extension, must always be used in place of the older {{cssi|region-fragment}} property, which it never accepted as valid.</span> <span lang="en" dir="ltr" class="mw-content-ltr">The {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} describes 'continue' as generalizing the older property ahead of replacing it altogether, but care must be taken during the conversion as different values must be defined to achieve identical behaviors between the two.</span>}}
{{Efn|group=lower-alpha|name=font-width|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The modern {{cssi|font-width}} property is present in the extension source code only by its original name, {{cssi|font-stretch}} ([[gerrit:plugins/gitiles/css-sanitizer/+/ffe10a21512f00405b4d0d124eb2c4866749e300/src/Sanitizer/StylePropertySanitizer.php#543|StylePropertySanitizer.php]]).</span> <span lang="en" dir="ltr" class="mw-content-ltr">Though the original name was [https://github.com/w3c/csswg-drafts/commit/b0660ee070c55cc9b2669498460fc0210d105403#diff-01ee51d59dcf6f0dc934ac6f973361de4667f36aaaea9befa0be6312f1ebe2beR417 deprecated by the {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} in {{ymd|2024|01|23}}] and remains only as a legacy alias, until the extension is updated only the original property name is accepted as valid.</span>}}
{{Efn|group=lower-alpha|name=grid-gap|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The legacy name alias {{cssi|grid-gap}} is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, {{cssi|gap}}, had been used.</span>}}
{{Efn|group=lower-alpha|name=grid-row-gap|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The legacy name alias {{cssi|grid-row-gap}} is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, {{cssi|row-gap}}, had been used.</span>}}
{{Efn|group=lower-alpha|name=word-wrap|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The non-standard property, {{cssi|word-wrap}}, is also accepted as valid by this extension and is directly aliased to the official property {{cssi|overflow-wrap}}.</span>}}
{{Efn|group=lower-alpha|name=page-break|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The {{cssi|page-break-*}} properties from CSS2 were [https://github.com/w3c/csswg-drafts/commit/316eb3768307e0bf976c1b956420f597fab92d22#diff-5cada336cba405b3e1f3934a38df26c0f86441284cc7a457f6609fda3726f75cR1157 deprecated by the {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} in {{ymd|2018|09|15}} and persist only as legacy shorthands] for the [https://www.w3.org/TR/css-break-3/#breaking-controls {{cssi|break-*}} replacement properties from the CSS3 Fragmentation module].</span> <span lang="en" dir="ltr" class="mw-content-ltr">They are subject to removal in the future and users are strenuously encouraged to replace all uses of the older properties explicitly, paying attention to the fact that not all values have a 1:1 equivalent mapping with the replacements' values.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Several popular user agents have already demonstrated flawed and inconsistent behavior when the legacy shorthands are present on a page.</span>}}
{{Efn|group=lower-alpha|name=text-align-all|reference=<span lang="en" dir="ltr" class="mw-content-ltr">Though the creation of the [https://www.w3.org/TR/2018/WD-css-text-3-20181206/#text-align-property {{cssi|text-align-all}} property as a constituent value of the {{cssi|text-align}} shorthand] by the {{Abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}} took place in {{ymd|2018|12|06}}, supporting implementations did not begin [https://wpt.fyi/results/css/css-text/parsing/text-align-all-valid.html?run_id=5132269339803648&run_id=5089047741726720&run_id=5068400927965184&run_id=5138351013494784 appearing until 2025] and, as of the most recent official guidance on {{ymd|2025|03|24}}, the recommendation to eschew the new property and continue to use the shorthand remains in effect.</span>}}
{{Efn|group=lower-alpha|name=offset-inset|reference=<span lang="en" dir="ltr" class="mw-content-ltr">The {{mono|offset-*}} properties were [https://www.w3.org/TR/2025/WD-css-position-3-20250311/ renamed {{cssi|inset-*}} in {{ymd|2025|03|11}} by the {{abbr|the World Wide Web Consortium's Cascading Style Sheets Working Group|W3C-CSSWG}}] in the CSS Position 3 module, which supersedes and replaces CSS Logical 1.</span> <span lang="en" dir="ltr" class="mw-content-ltr">The [https://github.com/wikimedia/css-sanitizer/commit/e0fb30f672d10ecf70322fb69e587334bade7740 'flow-relative offsets' are now renamed in concordance]: {{ltt|noconj=1|{{cssi|inset-block-start}}|{{cssi|inset-block-end}}|{{cssi|inset-inline-start}}|{{cssi|inset-inline-end}}}} properties and {{ltt|{{cssi|inset-block}}|{{cssi|inset-inline}}|{{cssi|inset}}}} shorthands.</span> <span lang="en" dir="ltr" class="mw-content-ltr">The deprecated {{mono|offset-*}} ''properties'' should be distinguished from the still existant {{cssi|offset-*}} ''shorthands'', {{ltt|[https://developer.mozilla.org/docs/Web/CSS/offset-anchor {{cssi|offset-anchor}}]|[https://developer.mozilla.org/docs/Web/CSS/offset-position {{cssi|offset-position}}]|[https://developer.mozilla.org/docs/Web/CSS/offset-path {{cssi|offset-path}}]|[https://developer.mozilla.org/docs/Web/CSS/offset-distance {{cssi|offset-distance}}]|[https://developer.mozilla.org/docs/Web/CSS/offset-rotate {{cssi|offset-rotate}}]}}.</span>}}
}}}}

<div lang="en" dir="ltr" class="mw-content-ltr">
== How can I target mobile/desktop resolutions? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Media queries allow you to target elements at mobile resolution and desktop resolution.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Some advise making your styles mobile friendly by default and wrapping desktop styles within the media query.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Note, MediaWiki [[gerrit:plugins/gitiles/mediawiki/core/+/master/resources/lib/ooui/wikimedia-ui-base.less|has standardised on 640px and 1120px breakpoints]] to represent tablet and desktop.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== How can I target specific skins? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">MediaWiki provides various classes on the <code>html</code> and <code>body</code> elements, including one that indicates which skin is in use.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">These can be targeted by including a simple selector for the <code>html</code> or <code>body</code> element including the needed classes, followed by a space (or in CSS terms, the descendant combinator).</span>

<span lang="en" dir="ltr" class="mw-content-ltr">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.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">See also [[#How can I target mobile/desktop resolutions?|#How can I target mobile/desktop resolutions?]].</span>

<syntaxhighlight lang="css" style="overflow: auto; width: 44rem;">
/* Elements with class foo will have red text in all skins. */
.foo { color: red; }

/* Override that element's color to green for the Vector skin only. */
body.skin-vector .foo { color: green; }

/* Add a red border if the browser doesn't have JavaScript enabled. */
html.client-nojs .foo { border: 1px solid red; }

/* Declare that same border as green for the Vector skin. */
html.client-nojs body.skin-vector .foo { border-color: green; }
</syntaxhighlight>

<syntaxhighlight lang="css" style="overflow: auto; width: 44rem;">
/* This does not work; the 'body' element must be selected! */
.skin-vector .foo { background: orange; }

/* These do not work, either; 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; }
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
== How do I use styles in MediaWiki messages? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">To prevent a malicious user from messing with the parts of the document outside the main content area, all CSS rules automatically get prefixed by the <code>mw-parser-output</code> CSS class.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">If you use a TemplateStyles-based template outside of the content area (e.g. in the {{ll|Manual:Interface/Sitenotice|sitenotice}}), you need to provide that class yourself, by wrapping the template in something like <syntaxhighlight inline lang="html"><div class="mw-parser-output">…</div></syntaxhighlight>.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== In which order do CSS styles override? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">Which CSS rule takes effect is controlled by [https://developer.mozilla.org/docs/Web/CSS/Guides/Cascade/Specificity specificity] (roughly, the complexity of the selector - e.g. <syntaxhighlight lang=css inline>div.foo { margin: 10px }</syntaxhighlight> is more specific than <syntaxhighlight lang=css inline>.foo { margin: 5px }</syntaxhighlight>).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">In case of equal specificity, CSS styles that come later in the document override earlier styles.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">[[MediaWiki:Common.css]], other site scripts, user scripts and gadgets are loaded in the {{tag|head|open}} section of the page.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">TemplateStyles stylesheets are loaded in the {{tag|body|open}}, 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.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">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.</span>

<span lang="en" dir="ltr" class="mw-content-ltr">Note also that "later" has to do with document position, not load order.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">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.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Nevertheless, they add it to the head, so equally-specific CSS rules in the body get precedence over it.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== How can Lua modules interact with styles? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
TemplateStyles can be called from a Lua module using <code>[[Special:MyLanguage/Extension:Scribunto/Lua reference manual#frame:extensionTag|frame:extensionTag]]</code>.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Example code is the following:
</div>

<syntaxhighlight lang="lua" style="overflow: auto; width: 44rem;">
local p = {};

function p.templateStyle( frame, src )
    return frame:extensionTag( 'templatestyles', '', { src = src } );
end

return p;
</syntaxhighlight>

<div lang="en" dir="ltr" class="mw-content-ltr">
== What anti-abuse features are provided? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model (<code>sanitized-css</code>) so changes to them can be tracked or controlled with {{ll|Extension:AbuseFilter}}, using the <code>new_content_model</code> variable.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "{{int|whatlinkshere}}" option, see what stylesheets are used on a page under "{{int|Pageinfo-toolboxlink}}" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "{{int|Recentchangeslinked}}".
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
TemplateStyles also leaves identifying information in the HTML code; to find out where a specific rule comes from, look at the page source, and the enclosing {{tag|style|open}} tag will have an attribute like <code>data-mw-deduplicate="TemplateStyles:r123456"</code>, where 123456 is the revision ID of the stylesheet (viewable with [[Special:Diff]], for example).
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== How were the decisions around TemplateStyles made? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
The idea of including CSS with templates was proposed and accepted in a [[phab:T483|request for comments]]. Technical details were pinned down in [[phab:T155813|a second RfC]] and workflow details were expanded through a [[Special:MyLanguage/Extension:TemplateStyles/Q&A|user consultation]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Who is working on TemplateStyles? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
TemplateStyles was originally a project of the {{ll|Wikimedia Reading Infrastructure team}} (preceded by exploratory work [[User:Coren|Coren]] did as a volunteer), consisting of [[User:BJorsch (WMF)|Brad Jorsch]] (developer), [[User:BDavis (WMF)|Bryan Davis]] (manager) and [[User:Tgr (WMF)|Gergő Tisza]] (developer) at the time. People and responsibilities have since moved around; see the [[Developers/Maintainers|maintainers page]] for current ownership.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Where do I report errors / ask for features? ==
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
Please [https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?tags=templatestyles file tasks] under the TemplateStyles component in [[Special:MyLanguage/Phabricator|Phabricator]].
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Where can I see it in action? ==
</div>
<span lang="en" dir="ltr" class="mw-content-ltr">You can look at some [[Help:TemplateStyles/examples|curated examples]].</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
The feature is enabled on all Wikimedia sites.
</div>

<div lang="en" dir="ltr" class="mw-content-ltr">
== Help with errors  ==
</div>

=== background-image ===
<span lang="en" dir="ltr" class="mw-content-ltr">If you receive the following error when trying to publish the changes to your CSS file:</span>

<div style="padding: 0.5em; color: var(--color-base, #202122); background-color: var(--background-color-neutral-subtle, #f8f9fa); border: 1px dashed var(--border-color-emphasized, #202122); width: calc(60% + 2em); margin-left: 1em;">
<div class="cdx-message--error cdx-message cdx-message--block">
<span class="cdx-message__icon"></span><div class="cdx-message__content">{{int|templatestyles-error-bad-value-for-property|''$1''|''$2''|background-image}}</div>
</div>
</div>

<span lang="en" dir="ltr" class="mw-content-ltr">It could be that the <code>url('...');</code> attribute given to <code>background-image</code> is not pointing to a local resource.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">The parser only allows local resources (and rejects remote ones).</span>
<span lang="en" dir="ltr" class="mw-content-ltr">Only URLs which point to resources at <kbd>//upload.wikimedia.org/</kbd> are permitted, for example <kbd>//upload.wikimedia.org/wikipedia/commons/8/83/MediaWiki-2023-button-proposal.svg</kbd> for the file at [[:File:MediaWiki-2023-button-proposal.svg]].</span>
<span lang="en" dir="ltr" class="mw-content-ltr">These URLs can be obtained by using the URL address that links point to on {{ll|Wikimedia Commons}} file pages.</span>
<span lang="en" dir="ltr" class="mw-content-ltr">These links include those to "Original file" or any of the links to the file's "Other resolutions:" such as <code>1,024 × 1,024 pixels</code>.</span>

<div lang="en" dir="ltr" class="mw-content-ltr">
== See also ==
</div>
* {{ll|Extension:TemplateStyles}} &ndash; <span lang="en" dir="ltr" class="mw-content-ltr">especially the [[Special:MyLanguage/Extension:TemplateStyles#caveats|#Caveats]] section.</span>
* [[w:Wikipedia:TemplateStyles|Wikipedia:TemplateStyles]] &ndash; <span lang="en" dir="ltr" class="mw-content-ltr">guideline page on English Wikipedia.</span>

[[Category:Help{{#translation:}}]]