Редактирование: РуСказки:Стили шаблонов

{{Руководство}}
{{Заготовка-РуСказки}}
'''TemplateStyles''' (''сокращённо'' — '''TS''') — позволяет создавать CSS-страницы для стилизации содержимого без необходимости редактирования администратором интерфейса общего CSS. TemplateStyles облегчает работу редакторов со стилями шаблонов, позволяя вынести CSS на отдельную страницу. Изначально возможность редактировать TS появилась у [[РуСказки:Администраторы|администраторов]] и [[РуСказки:Инженеры|инженеров]] в апреле 2018 года с помощью [[mw:Extension:TemplateStyles|расширения TemplateStyles]]. С января 2020 года возможность создавать и редактировать TS  есть у участников, обладающих флагом [[РуСказки:Автопатрулируемые|автопатрулируемого]].

== Описание ==
Страницы стилей шаблонов обычно располагаются на подстраницах с названием <code>Шаблон:Пример/'''styles.css'''</code>. Содержимое данных страниц при создании проверяется на отсутствие недопустимых определений: например, невозможно добавить стили с декларацией <code>url()</code> (кроме URL изображений из проектов Викимедиа), потому что это даёт возможность XSS.
<!-- (Снимать закомментированность по мере вычитки).
Стили вставляются на страницу посредством тэга <code><nowiki><templatestyles></nowiki></code> следующим образом:
<source lang="html">
<templatestyles src="Шаблон:Пример/styles.css" />
</source>
Вставка стилей производится ''перед'' видимым кодом шаблона, чтобы избежать {{iw|Мелькание неоформленного содержимого|мелькания неоформленного содержимого||Flash of unstyled content}} ({{lang-en|flash of unstyled content}}).

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

== Принципы ==
* Стили шаблона должны применяться только к его выводу. Они также могут применяться к тесно соотносящемуся с шаблоном соседствующему вики-тексту (например, легенде таблицы). Если добавление шаблона к одной части страницы будет полностью или частично менять отображение или стилизацию не связанной части страницы, это будет сбивать с толку.
* Страницы стилей должны быть связаны с конкретным шаблоном или группой шаблонов и названы соответствующе. Это позволяет легко находить и редактировать их. В общих чертах это означает, что страница стилей должна быть подстраницей связанного шаблона, например {{хорошо|Шаблон:{{var|Мой шаблон}}/styles.css}} или {{хорошо|Шаблон:{{var|Мой шаблон}}/styles-{{var|foo}}.css}}, но не {{плохо|Шаблон:styles-{{var|foo}}.css}} или {{плохо|Шаблон:{{var|foo}}.css}}.
* Крайне не рекомендуется использовать стили шаблонов напрямую в пространстве статей. Если вам кажется, что это уместно в некотором конкретном случае (к примеру, при единообразном оформлении ячеек таблиц), обратитесь на [[ВП:Ф-Т|технический форум]] — возможно, вам подскажут более удачное решение.
* При именовании классов в стилях шаблонов используйте префикс вида <code>ts-{{var|[префикс]}}-</code>, чтобы избежать коллизий при использовании стилей двух шаблонов с одинаковыми селекторами. Рекомендуется, чтобы часть <code>{{var|[префикс]}}</code> соответствовала названию шаблона (кириллицей или латиницей), подстраницей которого являются создаваемые вами стили. При наличии в названии нестандартных символов заменяйте их на нижнее подчёркивание.
* При редактировании CSS стилей следует пользоваться утвержденным стандартом MediaWiki — [[mw:Manual:Coding conventions/CSS|Manual:Coding conventions/CSS]]. В случаях, не описанных в данном документе, рекомендуется использовать [https://google.github.io/styleguide/htmlcssguide.html#CSS стандарты Google].
* Пользуйтесь классами (<code>.{{var|class}}</code>). Не используйте идентификаторы (<code>#{{var|id}}</code>). Пользуйтесь каскадными селекторами (<code>.class .child</code>) как можно меньше. Не используйте <code>!important</code>, кроме как для перезаписи стилей в мобильных представлениях.
* Старайтесь придерживаться принципа «[[Адаптивный веб-дизайн#Сначала мобильные («Mobile first»)|сначала мобильные]]» и пользуйтесь [[phab:source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less|стандартными значениями системы дизайна Викимедиа]] при создании [[Адаптивный веб-дизайн|адаптивных стилей]]. Помните, что [[ВП:Оформление статей|правила оформления статей]] относится и к стилям шаблонов.
* Не используйте [[Кроссбраузерность|некроссбраузерные]] решения.
* Изображения, которые не требуют атрибуции (например, находящиеся в общественном достоянии), — единственные изображения, которые могут использоваться в качестве фоновых. (Для обычных файлов атрибуция дана на странице описания файла, доступного по клику на изображение. В случае фоновых изображений такой возможности нет.)
* [[ВП:Правила защиты страниц|Уровень защиты]] страниц стилей должен совпадать с уровнем защиты связанного с ними шаблона. Если шаблон относится к [[Википедия:Правила защиты страниц#Критические шаблоны и модули|критическим]], то стили такого шаблона также относятся к критическим и должны иметь тот же уровень защиты.

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

== Ссылки ==
* [[mw:Help:TemplateStyles|Более полная техническая документация]] на mediawiki.org
* [[Википедия:Форум/Архив/Предложения/2018/02#CSS для шаблонов]] — обсуждение по включению расширения TemplateStyles
* [[Special:Search/все: contentmodel:sanitized-css|Страницы со стилями шаблонов]] в русской Википедии
-->
[[Категория:РуСказки:Справка по шаблонам]]