도움말:TemplateStyles

TemplateStyles enables the complex behavioral and aesthetic styling of templates through the use of referenced external CSS files that are wiki pages themselves. Notably, the ability to create/modify the CSS files is included in the default permissions for autoconfirmed users and so doesn't require involving someone with interface administrator privileges.

<templatestyles src="[.css로 끝나는 문서]" /> 태그를 문서에 삽입하여 CSS에 따라 구문 분석되는 하위문서에서 CSS를 작업할 수 있으며 문서상에서 ‎<templatestyles> 태그를 입력하여 새니타이징(sanitized)하고 불러오기(loaded)할 수 있습니다 (직접이든, 문서에서 사용되는 틀을 통해 끼워넣기 되는 경우든).

[특정 문서]는 sanitized-css (새니타이즈드 CSS) 콘텐츠 모델을 포함해야 하며 이는 .css로 끝나는 틀 이름공간의 하위 문서의 기본값입니다. 권장되는 사용 패턴은 Template:Foo/styles.css와 같은 하위 문서 아래에 Template:Foo를 위한 스타일을 저장하는 것입니다. [특정 문서]에 이름공간 없이 올 경우, 기본값은 틀 이름공간이 됩니다. 예를 들어, <templatestyles src="Foo/styles.css" />는 Template:Foo/styles.css를 불러옵니다.

문서를 로드할 때 부분적으로 렌더링되는 경우 잠재적으로 스타일이 없는 내용이 표시되는 일을 막으려면 ‎<templatestyles> 태그는 스타일이 있는 내용 앞(예를 들어 틀의 맨 위)에 위치시키는 것이 좋습니다.

틀스타일은 편집자가 특정 문서에 스타일 규칙을 연결시키고 위험한 구조체를 걸러내면서 모든 CSS 스타일시트 기능을 지정하고 미리 보기/디버그 도구를 가지고(이를테면 TemplateSandbox ) 예측한 바대로 작업할 수 있게 해줍니다.

접근성과 유지보수의 장벽을 낮추면 틀이 시각적으로 설계되는 방식에 더 많은 혁신을 주고 유지보수의 부하를 덜어주며 화면 옵션(특히 2016년 3월 30일 같이 현재 위키백과 조회수 중 절반을 차지하는 모바일 장치)에 대한 더 나은 융통성을 제공할 것입니다.

전통적으로 틀(또는 다른 내용)의 서식을 변경하는 방법은 두 가지가 있습니다 (이 접근법 중 어느 것도 그다지 잘 동작하지는 않습니다.):

• 인라인 스타일을 사용(즉, 틀에 HTML 코드를 사용하고 style="margin: 10px;"와 같은 속성을 추가)하거나
• MediaWiki:Common.css 와 같은 특정한 특수 시스템 메시지를 사용하는 것입니다.

• 내용과 표현부 간의 구분이 없습니다. 내용이 틀에서 비롯되지 않는 경우(예: 문서 안의 표) 대부분의 편집자들이 이해할 수 없는 문서 위키텍스트가 나오게 됩니다.

• 스타일이 각 HTML 요소에 반복 적용되어야 하므로 수많은 복사 및 붙여넣기, 그리고 읽고 정비하기 어려운 코드가 만들어집니다.
• 스타일 속성은 CSS의 하위 집합으로 제한됩니다. 더 중요한 설명을 말씀드리면 반응형 디자인에 대한 @media 규칙이 동작하지 않으므로 다양한 화면 크기에 맞추어 틀이 제대로 동작하게 만드는 것이 불가능합니다. 게다가 인라인 스타일은 CSS 스타일보다 우선하므로 사용자, 스킨, 장치에 특화된 사용자 지정은 더 어렵게 됩니다.

• 편집은 인터페이스 관리자 에게 국한되므로 참여에 주된 장애물이 됩니다.
• 어느 CSS 규칙을 사용할지 제한할 방도가 없기 때문에 편집 제한을 해제할 수 없으며 그 중 일부는 독자의 IP 주소를 추적하기 위해, 심지어는 일부 오래된 브라우저의 스크립트를 실행하기 위해 오용될 수 있습니다.
• 처음 항목을 저장하지 않고 변경사항을 테스트하는 것은 불가능합니다. T112474
• 모든 스타일시트는 모든 문서에서 불러들여야 하므로(실제로 문서에 사용할지의 여부에 관계 없이) 대역을 낭비하며 스타일 규칙의 디버깅을 더 어렵게 만듭니다.

네! 틀스타일은 모든 코드를 읽고 재직렬화하고 이스케이프 처리를 하고 화이트리스트와 일치하지 않는 CSS 규칙을 제거하는 온전한 자격을 갖춘 CSS 파서 를 포함합니다. 파서는 원격 자원(이를테면 배경 그림)을 거부하도록 충분히 세밀히 조정되어 있지만 로컬 자원은 허용합니다. CSS 셀렉터는 문서 내용 밖의 요소를 참조할 수 없도록 재기록됩니다. (예를 들어 절대 위치를 이동하는 등 문서의 일부를 이동함으로써 문서 밖의 영역을 시각적으로 수정하는 것은 현재 금지되어 있지 않습니다. 위키텍스트와 인라인 스타일과 함께 이미 가능한 만큼 현재 상황에서 변경된 사항은 없습니다.)

As of 2025년 3월 5일 (수), 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. Beyond simple rules, @media, @page, @supports, @keyframe, @font-face/@font-feature-values at-rules are also supported (with font-face restricted to fonts whose name starts with TemplateStyles, for security reasons).

The CSS var() function is permitted only in properties taking a single color value and inside calc()functions. Setting custom properties is not permitted.

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.

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. See also #How can I target mobile/desktop resolutions?.

/* 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:1pxsolidred;}
/* Declare that same border as green for the Vector skin. */
html.client-nojsbody.skin-vector.foo{border-color:green;}

/* 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;}

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 mw-parser-output CSS class. If you use a TemplateStyles-based template outside of the content area (e.g. in the sitenotice ), you need to provide that class yourself, by wrapping the template in something like <div class="mw-parser-output">...</div>.

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.

localp={};
functionp.templateStyle(frame,src)
returnframe:extensionTag('templatestyles','',{src=src});
end
returnp;

별도 문서에 CSS를 저장하기 위한 디자인적인 선택은 부분적으로는 표준 악용 방지 도구 집합과 쉽게 연동하기 위해 결정되었습니다. 틀스타일 CSS 문서는 자체 콘텐츠 모델(sanitized-css)이 있으므로 이에 대한 변경사항은 new_content_model 변수를 사용하여 확장기능:편집필터 로 추적 또는 통제가 가능합니다.

CSS를 포함시키는 일은 틀 끼워넣기와 동일한 방식으로 추적되므로 "여기를 가리키는 문서" 옵션을 통해 어디에서 스타일시트가 사용되는지, "문서 정보"(및 어느 편집기를 사용하는지에 따라 잠재적으로는 편집 화면) 아래에서 어느 스타일시트가 사용되는지, "가리키는 글의 최근 바뀜"을 사용하여 어느 최근 바뀜이 문서에 영향을 줄 것인지를 확인할 수 있습니다.

틀에 CSS를 포함하는 아이디어는 특정 RfC에서 제안되어 받아들여졌습니다. 자세한 기술 내용은 2차 RfC에서 결정되었고, 사용자 협의의 상세한 워크플로를 통해 확장되었습니다.

파브리케이터의 틀스타일 구성요소 밑에 일감을 추가해 주십시오.

일부 준비된 예제를 볼 수 있습니다.

이 기능은 모든 위키미디어 사이트에서 활성화되어 있습니다:

If you receive the following error when trying to publish the changes to your CSS file:

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

• 확장기능:TemplateStyles – 특히 #Caveats 문단.
• Wikipedia:TemplateStyles – guideline page on English Wikipedia.

• Help/ko