Тептар:Стили шаблонов

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, но не стоит злоупотреблять при их использовании.

Ссылки

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