리버티게임:연구소/CSS 파서 함수 대체

요청

CSS 확장 기능은 백괴게임 시절부터 15년 넘게 게임을 더 예쁘고 화려하고 독창적으로 만들 수 있도록 위키 문서에 css를 자유롭게 쓸 수 있는 #css 파서 함수 기능을 제공해왔습니다.

하지만, 최신 업데이트 버전에서는 보안을 위해 일부 문법을 제한하는 업데이트가 진행되었으며, 내부 테스트 결과 상당수의 문서가 깨짐이 확인되어 업데이트를 진행할 수 없었습니다. 하지만, 구 버전에서 계속 머무를 수도 없었습니다. 당장 미디어위키 1.44 이후 버전부터는 구 버전의 CSS 확장 기능이 호환되지 않기 때문입니다. 또한, 어떻게든 최신 CSS 확장 기능으로 업그레이드 하여도 차세대 위키텍스트 엔진인 Parsoid를 여전히 지원하지 않는 등 미래에도 지속적으로 지원될 지 여부가 불투명합니다. 즉, 앞으로를 생각하면 CSS 문법에 대한 대규모 수정 작업은 언젠가는 진행할 수밖에 없는 필연적인 일이 되었습니다.

따라서 이번 기회에 CSS 확장 기능과 #css 파서 함수의 역할을 이번에 새로 설치한 TemplateStyles(틀스타일) 확장 기능과 파서 태그에 넘겨주려고 하며, 이번 1.43 버전이 지원 종료되기 전에 다음 LTS 버전으로 넘어갈 것을 목표로 하고 있습니다.

다시 말해, CSS 확장 기능 및 #css 파서 함수가 리버티게임에서 단계적으로 지원 종료될 예정입니다.

이를 위해, #css 파서 함수는 가능한 한 파서 태그로 변경하고, 그것이 불가능하다면 CSS 확장 기능의 최신 버전과 호환되는 문법으로 수정할 예정입니다.

하지만 지난 15년 동안 쌓아 온 모든 문서에 대해 전환 작업을 진행하는 것은 어렵고 오래 걸릴 일이라는 것은 저도 잘 알고 있습니다. 따라서 여러분의 도움이 절실합니다. 미디어위키 1.43 지원 종료 시기까지 1년 넘게 이 작업을 장기적으로 진행할 계획이며, 관리단과 기여자 모두가 함께 힘을 합쳐서 이 일을 완수할 수 있으면 좋겠습니다. 감사합니다. — hsl(토론, 기여, 게임, 메일) 2026년 4월 5일 (일) 07:01 (KST)

지침

문서 내부에 직접 css를 작성해 적용하는 #css 파서 함수와는 달리, 파서 태그는 sanitized-css 콘텐츠 모델을 가진 별도의 css 문서만을 적용할 수 있습니다.

따라서, 기존의 #css 파서 함수 내부에 작성한 모든 css 코드를 sanitized-css 콘텐츠 모델의 css 문서로 옮겨야 합니다.

주의할 점은, sanitized-css 콘텐츠 모델에서는 일부 css 문법만 사용 가능합니다. 다음 문서에 없는 문법이라면 사용이 불가능 할 것입니다. 또한, 문서가 렌더링되는 mw-parser-output 클래스를 가진 요소의 하위 요소에만 스타일이 적용됩니다. 즉, 문서 영역 바깥쪽의 UI 스타일을 변경할 수 없습니다. 다만, css 문서 저장 시 문제가 되는 문법을 오류창에 친절히 알려주므로 모든 문법을 일일이 미리 대조할 필요는 없습니다.

• mw:Help:TemplateStyles#Allowed CSS properties and rules
• mw:Extension:TemplateStylesExtender

먼저, .css로 끝나는 하위 문서를 만듭니다. 기본 이름공간이나 틀 이름공간에서는 이러한 문서에 sanitized-css 콘텐츠 모델이 자동으로 적용됩니다. 편집기가 위키 편집기가 아닌 css 코드 편집기 형태인 것으로 콘텐츠 모델을 쉽게 확인할 수 있습니다. 단, 사용자 이름공간은 일반 css 콘텐츠 모델이 적용되므로, 도구 메뉴의 문서 정보를 누르고, 콘텐츠 모델 변경 버튼을 눌러야 합니다. 또는, 특수:콘텐츠모델변경의 양식을 이용해 문서를 생성할 수도 있습니다. 콘텐츠 모델 변경은 .css로 끝나지 않는 문서나 이미 다른 콘텐츠 모델로 생성해버린 문서에도 적용할 수 있는 방법입니다.

또는 다음 양식에 sanitized-css로 만들 문서의 제목을 입력할 수도 있습니다.

영

←

×

1	2	3	4	5	6	7	8	9	0	-
q	w	e	r	t	y	u	i	o	p	⬆
a	s	d	f	g	h	j	k	l	,	.
z	x	c	v	b	n	m	Space (_)

그리고, css 코드를 해당 문서로 옮기고 저장 버튼을 누릅니다. 이때, 사용할 수 없는 문법이 있다면 경고창이 뜨며 문서가 저장되지 않습니다. 경고창을 참고하여 문제가 되는 문법을 적절히 수정해 주세요.

문서를 저장했다면, 원래 문서의 #css 파서 함수 부분을 다음과 같이 파서 태그로 교체해 주세요. (CSS 문서) 부분에 상위 문서 부분을 포함한 하위 문서의 전체 문서 제목을 입력하면 됩니다.

<templatestyles src="(CSS 문서)" />

문서를 저장하고 나서 파서 태그 부분에 오류가 표시되는지, 이전과 동일하게 표시되는지 확인해 주세요.

도움이 필요한 문서

sanitized-css 문서를 생성하기 어렵거나 태그를 적용하기 어려운 문서를 이 문단에 작성하면 변환 작업을 도와드리겠습니다.