도움말:TemplateStyles

This page is a translated version of the page Help:TemplateStyles and the translation is 43% complete.

Outdated translations are marked like this.

주의사항: 이 문서를 편집하면 CC0에 따라 당신의 기여한 것을 배포하는 데 동의하는 것으로 간주됩니다. 자세한 내용은 퍼블릭 도메인 도움말 문서를 확인 하세요.

확장기능:TemplateStyles 는 틀의 복잡한 스타일들을 인터페이스 관리자 권한 없이 사용 가능하게 해주는 도구입니다.

작동 방식

<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> 태그는 스타일이 있는 내용 앞(예를 들어 틀의 맨 위)에 위치시키는 것이 좋습니다.

어떤 문제가 해결됩니까?

전통적으로 틀(또는 다른 내용)의 서식을 변경하는 방법은 두 가지가 있습니다: 인라인 스타일을 사용(즉, 틀에 HTML 코드를 사용하고 style="margin: 10px"와 같은 속성을 추가)하거나, MediaWiki:Common.css 와 같은 특정한 특수 시스템 메시지를 사용함으로써. 이 접근법 중 어느 것도 그다지 잘 동작하지는 않습니다.

인라인 스타일의 경우:

내용과 표현부 간의 구분이 없습니다. 내용이 틀에서 비롯되지 않는 경우(예: 문서 안의 표) 대부분의 편집자들이 이해할 수 없는 문서 위키텍스트가 나오게 됩니다.
스타일이 위키텍스트와 혼재되어 있기 때문에 문법 강조와 기타 형식의 CSS 편집 지원에 어려움이 있거나 불가능합니다.
스타일이 각 HTML 요소에 반복 적용되어야 하므로 수많은 복사 및 붙여넣기, 그리고 읽고 정비하기 어려운 코드가 만들어집니다.
스타일 속성은 CSS의 하위 집합으로 제한됩니다. 더 중요한 설명을 말씀드리면 반응형 디자인@media 규칙이 동작하지 않으므로 다양한 화면 크기에 맞추어 틀이 제대로 동작하게 만드는 것이 불가능합니다. 게다가 인라인 스타일은 CSS 스타일보다 우선하므로 사용자, 스킨, 장치에 특화된 사용자 지정은 더 어렵게 됩니다.

Since styles are mixed with wikitext, syntax highlighting and other forms of CSS editing support are difficult or impossible.

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.

Style attributes are limited to a subset of CSS. Most importantly, @media rules needed for responsive design do not work so it's impossible to make templates that work well over a wide range of screen sizes. Furthermore, inline styles take precedence over CSS stylesheets so user-, skin- or device-specific customizations become more difficult.

시스템 MediaWiki:*.css 문서의 경우:

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

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.

Changes are impossible to test without saving first (작업 T112474).

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.

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

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

안전합니까?

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

어느 CSS 규칙이 인식됩니까?

현재 틀스타일은 하나 이상의 주요 브라우저(2017년 초 기준)가 지원하는 대부분의 CSS3 속성을 허용합니다. 단순한 규칙을 넘어 @media, @page, @supports, @keyframe, @font-face/@font-feature-values의 앳(@) 규칙도 지원합니다. (보안 상의 이유로 font-face는 TemplateStyles로 시작하는 이름의 글꼴로 제한됩니다) For a comprehensive list of allowed properties, see the "$props" parts of the StylePropertySanitizer code from css-sanitizer .

비표준 속성(벤더 두문자 포함)은 현재 지원되지 않습니다. 일정에 대해서는 작업 T162379를 참고하십시오.

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 720px and 1000px 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. 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 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; }

How do I use styles in MediaWiki messages?

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

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:Commons.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;

제공되는 악용 방지 기능은 무엇입니까?

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

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

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 ‎<style> tag will have an attribute like data-mw-deduplicate="TemplateStyles:r123456", where 123456 is the revision ID of the stylesheet (viewable with Special:Diff, for example).

틀스타일에 대한 결정은 어떻게 이루어졌습니까?

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

누가 틀스타일에 관여합니까?

TemplateStyles was originally a project of the Wikimedia Reading Infrastructure team (preceded by exploratory work Coren did as a volunteer), consisting of Brad Jorsch (developer), Bryan Davis (manager) and Gergő Tisza (developer) at the time. People and responsibilities have since moved around; see the maintainers page for current ownership.

오류 보고 / 기능 요청은 어디에서 합니까?

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

동작 중인 모습은 어디에서 볼 수 있습니까?

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

이 기능은 현재(2018년 3월 기준) 다음의 위키미디어 사이트에서 활성화되어 있습니다:

같이 보기

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