Википедия:Стили шаблонов

TemplateStyles (сокращённо — TS) позволяет создавать CSS-страницы для стилизации содержимого без необходимости редактирования администратором интерфейса общего CSS. TemplateStyles облегчает работу редакторов со стилями шаблонов, позволяя вынести CSS на отдельную страницу.

Предыстория

Изначально возможность редактировать TS появилась у администраторов и инженеров в апреле 2018 года с помощью расширения TemplateStyles. В январе 2020 года возможность создавать и редактировать TS по результатам обсуждения появилась у участников, обладающих флагом автопатрулируемого.

Описание

Страницы стилей шаблонов обычно располагаются на подстраницах с названием Шаблон:Пример/styles.css. Содержимое данных страниц при создании проверяется на отсутствие недопустимых определений: например, невозможно добавить стили с декларацией url() (кроме URL изображений из проектов Викимедиа), потому что это даёт возможность XSS.

Стили вставляются на страницу посредством тэга следующим образом:

<templatestyles src="Шаблон:Пример/styles.css" />

Вставка стилей производится перед видимым кодом шаблона, чтобы избежать мелькания неоформленного содержимого (англ. flash of unstyled content).

Стили шаблонов также могут располагаться в других пространствах имён. Чтобы страница в другом пространстве имён считалась движком страницей стилей, нужно изменить её модель содержимого с помощью страницы Special:ChangeContentModel (она доступна только администраторам и инженерам).

Принципы

• Стили шаблона должны применяться только к его выводу. Они также могут применяться к тесно соотносящемуся с шаблоном соседствующему вики-тексту (например, легенде таблицы). Если добавление шаблона к одной части страницы будет полностью или частично менять отображение или стилизацию не связанной части страницы, это будет сбивать с толку.
• Страницы стилей должны быть связаны с конкретным шаблоном или группой шаблонов и названы соответствующе. Это позволяет легко находить и редактировать их. В общих чертах это означает, что страница стилей должна быть подстраницей связанного шаблона, например Шаблон:Мой шаблон/styles.css или Шаблон:Мой шаблон/styles-foo.css, но не Шаблон:styles-foo.css или Шаблон:foo.css.
• Крайне не рекомендуется использовать стили шаблонов напрямую в пространстве статей. Если вам кажется, что это уместно в некотором конкретном случае (к примеру, при единообразном оформлении ячеек таблиц), обратитесь на технический форум — возможно, вам подскажут более удачное решение.
• При именовании классов в стилях шаблонов используйте префикс вида ts-[префикс]-, чтобы избежать коллизий при использовании стилей двух шаблонов с одинаковыми селекторами. Рекомендуется, чтобы часть [префикс] соответствовала названию шаблона (кириллицей или латиницей), подстраницей которого являются создаваемые вами стили. При наличии в названии нестандартных символов заменяйте их на нижнее подчёркивание.
• При редактировании CSS стилей следует пользоваться утверждённым стандартом MediaWiki — Manual:Coding conventions/CSS. В случаях, не описанных в данном документе, рекомендуется использовать стандарты Google.
• Пользуйтесь классами (.class). Не используйте идентификаторы (#id). Пользуйтесь каскадными селекторами (.class .child) как можно меньше. Не используйте !important, кроме как для перезаписи стилей в мобильных представлениях.
• Старайтесь придерживаться принципа «сначала мобильные» и пользуйтесь стандартными значениями системы дизайна Викимедиа при создании адаптивных стилей. Помните, что правила оформления статей относятся и к стилям шаблонов.
• Не используйте некроссбраузерные решения.
• Изображения, которые не требуют атрибуции (например, находящиеся в общественном достоянии), — единственные изображения, которые могут использоваться в качестве фоновых. (Для обычных файлов атрибуция дана на странице описания файла, доступного по клику на изображение. В случае фоновых изображений такой возможности нет.)
• Уровень защиты страниц стилей должен совпадать с уровнем защиты связанного с ними шаблона. Если шаблон относится к критическим, то стили такого шаблона также относятся к критическим и должны иметь тот же уровень защиты.

Возможности

• Доступны все простые свойства CSS3, недоступны вендорные префиксы (-webkit-, -moz-, -ms-, -o-).
• Каждый CSS-селектор в рамках страницы со стилями при вставке стилей на страницу сопровождается классом .mw-parser-output. Это ограничивает использование стилей шаблонов контентной областью страницы (стилизация заголовка, вкладок и т. п. невозможна).
• Доступны правила @media, @keyframe, но не стоит злоупотреблять их использованием.

Специфичные для тем оформления стили

В TemplateStyles можно применять разные стили к разным скинам.

CSS для скиноспефицичных стилей

Скин	Нужный CSS
Cologne Blue	body.skin-cologneblue
Monobook	body.skin-monobook
Modern	body.skin-modern
Vector-2010	body.skin-vector:not(.skin-vector-2022)
Minerva	Просто скин body.skin-minerva Со стандартным размером шрифта html.mf-font-size-clientpref-small body.skin-minerva Со средним размером шрифта html.mf-font-size-clientpref-regular body.skin-minerva С большим размером шрифта html.mf-font-size-clientpref-large body.skin-minerva С тёмной темой html.skin-theme-clientpref-night body.skin-minerva
Timeless	body.skin-timeless
Vector-2022	Просто скин body.skin-vector-2022 С мелким размером шрифта html.vector-feature-custom-font-size-clientpref-0 body.skin-vector-2022 Со стандартным размером шрифта html.vector-feature-custom-font-size-clientpref-1 body.skin-vector-2022 С крупным размером шрифта html.vector-feature-custom-font-size-clientpref-2 body.skin-vector-2022 Со стандартной шириной html.vector-feature-limited-width-clientpref-1 body.skin-vector-2022 С неограниченной шириной html.vector-feature-limited-width-clientpref-0 body.skin-vector-2022 С тёмной темой html.skin-theme-clientpref-night body.skin-vector-2022 Без скрытого правого сайдбара html.vector-feature-appearance-pinned-clientpref-1 body.skin-vector-2022 Со скрытым правым сайдбаром html.vector-feature-appearance-pinned-clientpref-0 body.skin-vector-2022 Со скрытым главным меню html.vector-feature-main-menu-pinned-disabled body.skin-vector-2022 Без скрытого главного меню html.vector-feature-main-menu-pinned-enabled body.skin-vector-2022 Без скрытого содержания html.vector-feature-toc-pinned-clientpref-1 body.skin-vector-2022 Со скрытым содержанием html.vector-feature-toc-pinned-clientpref-0 body.skin-vector-2022

См. также

• Более полная техническая документация на mediawiki.org
• Википедия:Форум/Архив/Предложения/2018/02#CSS для шаблонов — обсуждение по включению расширения TemplateStyles
• Страницы со стилями шаблонов в русской Википедии