Jump to content

Help:TemplateStyles/ru

From mediawiki.org
This page is a translated version of the page Help:TemplateStyles and the translation is 46% complete.
Outdated translations are marked like this.
Languages:

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

Как это работает?

Редакторы могут добавить <templatestyles src="[some page]" /> на страницу, и содержимое [some page] будет обработано как CSS, очищено от недопустимого содержимого и загружено на страницы, где используется тег ‎<templatestyles> (напрямую или через установленный на страницу шаблон).

[some page] должен иметьмодель содержимого sanitized-css (Sanitized CSS), которая будет использована по умолчанию на "подстраницах", относящихся к пространству имён данного Шаблона и иметь расширение в конце .css. Рекомендуется хранить стили для шаблона «Шаблон:Foo» на подстранице этого шаблона, или на подстранице того шаблона, на который они больше всего влияют, например:Шаблон:Foo/styles.css Если у [some page] отсутствует префикс пространства имён, по умолчанию используется пространство имён Template:(Шаблон:). Так, например, <templatestyles src="Foo/styles.css" /> загрузит Template:Foo/styles.css.

Тег ‎<templatestyles> должен быть помещён перед оформляемым содержимым, например, в верхней части шаблона, чтобы избежать потенциально нежелательного содержимого, если страница частично отображается при загрузке.

Какие проблемы это решает?

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

Снижение порога вхождения должно позволить развязать участникам руки, чтобы они могли создавать инновационные и визуально привлекательные шаблоны, при этом требуя меньше расходов на поддержание их работоспособности, лучшей адаптации под разные платформы (особенно под мобильные устройства, с которых приходится уже больше половины просмотров в ).

Изначально, существовало только два способа использования CSS-стилей в шаблонах (или в других типах страниц), которые никогда не работали достаточно хорошо:

  • Использование inline-стилей по месту (то есть непосредственно HTML-кода с атрибутами, вроде style="margin: 10px;")
  • Использование глобальной таблицы стилей, в частности MediaWiki:Common.css

При использовании стилей по месту

  • Не соблюдается принцип разделения содержимого и оформления. Если содержимое не берётся из шаблона (например, для таблиц), исходный текст становится непонятным для многих редакторов.
  • Поскольку стили смешиваются с викитекстом, внедрение подсветки синтаксиса и других методов, облегчающих редактирование CSS затруднено или невозможно.
  • Стили приходится повторять для каждого элемента HTML, вместо того, чтобы написать один стиль и использовать его там, где нужно. Большое количество скопированных фрагментов становится сложно поддерживать.
  • Нельзя использовать атрибуты, недоступные в inline-свойствах CSS. Что ещё важнее, @media-запросы, необходимые для реализации отзывчивого дизайна остаются недоступны, а значит невозможно сделать шаблоны, меняющие внешний вид в зависимости от размера экрана. Кроме того, inline-стили в иерархии CSS находятся на самом верху, а значит их невозможно модифицировать или перезаписать для приведения к соответствию с темами оформления или пользовательскими стилями.

При использовании системных страниц (MediaWiki:*.css)

  • Редактирование доступно только участникам с флагом администратора интерфейса , что сильно усложняет работу прочих участников.
  • И ограничения на редактирование нельзя снимать, потому что нет никакого контроля используемых CSS-правил, а значит участники могут добавить в них вредоносный код, который позволил бы им отслеживать ip-адреса пользователей, а в некоторых старых браузерах даже исполнять произвольный код.
  • Нет возможности предварительного просмотра без сохранения страницы. T112474
  • Все таблицы стилей загружаются для всех страниц, вне зависимости от того, используется ли данный стиль или нет, что ведёт за собой излишний расход трафика.

Это безопасно?

Да! Расширение включает в себя парсер CSS , который проверяет CSS-код, экранируя всё, что похоже на код и удаляя CSS-правила, которые не поддерживаются текущей версией парсера. Парсер работает достаточно хорошо, чтобы не допустить включения ссылок на внешние ресурсы (например, в качестве фоновых изображений), но не мешает использовать локальные. CSS-селекторы переписываются так, чтобы они не могли ссылаться на элементы, не относящиеся к содержимому статьи. (Пока не решена проблема возможности визуального изменения областей за пределами содержимого статей путём размещения частей статьи в служебных областях, например с помощью абсолютного позиционирования. Однако, такая возможность доступна и через inline-стили.)

Доступные свойства и правила CSS

На 5 марта 2025, TemplateStyles поддерживает более 331 свойств CSS, включая большинство наиболее часто используемых свойств, поддерживаемых одним или несколькими распространёнными браузерами. Кроме простых правил, поддерживаются запросы @media, @page, @supports, @keyframe, @font-face/@font-feature-values (конкретно font-face подерживает только шрифты, название которых начинается с TemplateStyles — в целях безопасности).

Функция var() разрешена только только для передачи цвета, а также внутри функции calc(). Присвоение собственных значений не допускается.

Разрешённые свойства, которые не будут отсеяны css-sanitizer-ом [a][b][c]
Примечание: Каждое свойство снабжено ссылкой на документацию по его использованию, но стандартный значок внешней ссылки убран, чтобы не было путаницы со сносками, оформленными в виде верхних индексов.

Примечания:

  1. ↑ Список представлен для версии парсера ffe10a21512f, размещённой в репозитории, по состоянию на 20:34, 5 марта 2025.
  2. ↑ Более актуальный список можно найти в исходном коде библиотеки css-sanitizer , в частности в файле src/Sanitizer/StylePropertySanitizer.php. Чтобы его найти, можно воспользоваться полнотекстовым поиском, введя в него строку $props.
  3. ↑ Нестандартные свойства, включая свойства с префиксами браузеров, но не -*-user-select, не будут распознаны расширением и будут отсеяны, по крайней мере на . См. phab:T162379: Decide which non-standard CSS properties to support in TemplateStyles, чтобы отслеживать изменения по этому решению.
  4. ↑ Современное свойство block-ellipsis присутствует в исходном коде расширения только по его первоначальному названию, block-overflow (StylePropertySanitizer.php). Хотя свойство и было переименовано по решению W3C-CSSWG и поддерживается лишь как ссылка для целей совместимости, до нового обновления будет работать только оригинальное название свойства.
  5. ↑ 5.0 5.1 5.2 5.3 5.4 5.5 5.6 5.7 The page-break-* properties from CSS2 were deprecated by the W3C-CSSWG in and persist only as legacy shorthands for the break-* replacement properties from the CSS3 Fragmentation module. They are subject to removal in the future and users are strenuously encouraged to replace all uses of the older properties explicitly, paying attention to the fact that not all values have a 1:1 equivalent mapping with the replacements' values. Several popular user agents have already demonstrated flawed and inconsistent behavior when the legacy shorthands are present on a page.
  6. ↑ Свойство clip считается устаревшим по решению W3C-CSSWG от , а официальное руководство рекомендует использовать clip-path вместо него. Оно может быть удалено в любой момент, так как конфликтует с другими свойствами.
  7. ↑ Также устаревшее ключевое слово grid-column-gap будет распознано как допустимое и обработано так же, как если бы было вставлено современное ключевое слово column-gap.
  8. ↑ Вместо устаревшего свойства region-fragment, которое никогда не поддерживалось расширением, следует всегда использовать современное свойство continue, которое поддерживается. W3C-CSSWG трактует свойство 'continue' как обобщение более старого свойства перед полной его заменой, однако при замене следует быть осторожным, так как для достижения одинакового результата иногда приходится использовать разные значения.
  9. ↑ Современное свойство font-width присутствует в исходном коде расширения только по его первоначальному названию, font-stretch (StylePropertySanitizer.php). Though the original name was deprecated by the W3C-CSSWG in and remains only as a legacy alias, until the extension is updated only the original property name is accepted as valid.
  10. ↑ The legacy name alias grid-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, gap, had been used.
  11. ↑ 11.0 11.1 The offset-* properties were renamed inset-* in by the W3C-CSSWG in the CSS Position 3 module, which supersedes and replaces CSS Logical 1. The 'flow-relative offsets' are now renamed in concordance: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties and inset-block, inset-inline и inset shorthands. The deprecated offset-* properties should be distinguished from the still existant offset-* shorthands, offset-anchor, offset-position, offset-path, offset-distance и offset-rotate.
  12. ↑ The non-standard property, word-wrap, is also accepted as valid by this extension and is directly aliased to the official property overflow-wrap.
  13. ↑ The legacy name alias grid-row-gap is also accepted as valid by this extension and is evaluated exactly as if its modern replacement property name, row-gap, had been used.
  14. ↑ 14.0 14.1 Though the creation of the text-align-all property as a constituent value of the text-align shorthand by the W3C-CSSWG took place in , supporting implementations did not begin appearing until 2025 and, as of the most recent official guidance on , the recommendation to eschew the new property and continue to use the shorthand remains in effect.

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 640px and 1120px 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 element's color to green for the Vector skin only. */
body.skin-vector .foo { color: green; }

/* Add a red border if the browser doesn't have JavaScript enabled. */
html.client-nojs .foo { border: 1px solid red; }

/* Declare that same border as green for the Vector skin. */
html.client-nojs body.skin-vector .foo { border-color: green; }

/* This does not work; the 'body' element must be selected! */
.skin-vector .foo { background: orange; }

/* These do not work, either; 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:Common.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;

What anti-abuse features are provided?

The design choice to store CSS in separate pages was made in part to make integration with the standard anti-abuse toolset easy. TemplateStyles CSS pages have their own content model (sanitized-css) so changes to them can be tracked or controlled with Расширение: AbuseFilter , using the new_content_model variable.

CSS inclusion is tracked the same way as template transclusion, so you can see where a stylesheet is used via the "Ссылки сюда" option, see what stylesheets are used on a page under "Сведения о странице" (and possibly on the edit screen, depending on what editor you use), and see what recent changes might be affecting a page using "Связанные правки".

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

How were the decisions around TemplateStyles made?

The idea of including CSS with templates was proposed and accepted in a request for comments. Technical details were pinned down in a second RfC and workflow details were expanded through a user consultation.

Who is working on TemplateStyles?

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.

Where do I report errors / ask for features?

Please file tasks under the TemplateStyles component in Phabricator.

Где я могу увидеть это в действии?

Вы можете посмотреть на некоторые кураторские примеры.

Эта функция включена на всех сайтах Викимедиа.

Help with errors

background-image

If you receive the following error when trying to publish the changes to your CSS file:

Неверное или неподдерживаемое значение для свойства background-image в: строка $1 символ $2.

It could be that the url('...'); attribute given to background-image is not pointing to a local resource. The parser only allows local resources (and rejects remote ones). Only URLs which point to resources at //upload.wikimedia.org/ are permitted, for example //upload.wikimedia.org/wikipedia/commons/8/83/MediaWiki-2023-button-proposal.svg for the file at File:MediaWiki-2023-button-proposal.svg. These URLs can be obtained by using the URL address that links point to on Wikimedia Commons file pages. These links include those to "Original file" or any of the links to the file's "Other resolutions:" such as 1,024 × 1,024 pixels.

Смотрите также

Retrieved from "https://www.mediawiki.org/w/index.php?title=Help:TemplateStyles/ru&oldid=8409163"