Изменения: Справка:Шпаргалка по CSS и JS

Версия от 14:06, 28 декабря 2019

Здесь перечислены все страницы JavaScript и CSS, которые вы можете изменить для улучшения вашей вики. Обратите внимание, что изменения в этих статьях не вступают в силу немедленно. Вам может потребоваться подождать пару минут и очистить кэш браузера. Кроме того, имейте в виду, что все изменения JavaScript теперь проходят проверку и не будут видны сразу (подробнее здесь: Справка:Проверка JavaScript).

Стили

Наиболее распространенные:

Стиль	Расположение	Затрагивание вики	Затрагивание участников	Затрагивание оформления
MediaWiki:Common.css	эта вики	эта вики	все участники	всё
MediaWiki:Wikia.css	эта вики	эта вики	все участники	по умолчанию
Special:MyPage/wikia.css	эта вики	эта вики	только вы	по умолчанию
Special:MyPage/common.css	эта вики	эта вики	только вы	всё
Special:MyPage/global.css	сообщество	все вики	только вы	всё

JavaScript

Наиболее распространенные:

Скрипт файла	Расположение	Затрагивание вики	Затрагивание участников	Затрагивание оформления
MediaWiki:Common.js	эта вики	эта вики	все участники	всё
MediaWiki:Wikia.js	эта вики	эта вики	все участники	по умолчанию
Special:MyPage/wikia.js	эта вики	эта вики	только вы	по умолчанию
Special:MyPage/common.js	эта вики	эта вики	только вы	всё
Special:MyPage/global.js	сообщество	все вики	только вы	всё

Вопросы по кешированию

Каждый файл, который вы загружаете из Интернета, попадает в кэш. Это здорово, потому что это уменьшает трафик для собственного компьютера и для серверов ФЭНДОМА, но это становится проблемой, когда дело доходит до тестирования изменений в проекте. Ждать придется несколько часов, прежде чем изменения вступят в силу, если не использовать следующие приёмы:

Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

Firefox / Safari: удерживая клавишу Shift, нажмите на панели инструментов Обновить, или нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac).
Google Chrome: нажмите Ctrl-Shift-R (⌘-Shift-R на Mac).
Internet Explorer: удерживая Ctrl, нажмите Обновить. Или нажмите Ctrl-F5.

Чаще всего этого бывает достаточно, но иногда, когда вы тестируете свои изменения с помощью другого браузера, вам нужно очистить кэш ФЭНДОМА. Добавьте к URL страницы в адресной строку команду Purge. Например,

http://yourwiki.wikia.com/wiki/MediaWiki:Cheatsheet

необходимо переписать как:

http://yourwiki.wikia.com/wiki/MediaWiki:Cheatsheet?action=purge

Если и это не помогает, то вам нужно просто подождать. После нескольких часов кэш между вами и вики будет обновлён.

Обозначение ошибок в редакторах CSS и JS

Редакторы CSS и JS обладают как подсветкой синтаксиса, так и возможностью проверки кода на ошибки:

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

Стандартные ошибки

Ошибки в CSS
Ошибка	Объяснение
`@import prevents parallel downloads, use <link> instead`	По стандарту для импортирования CSS используется тэг link. Однако MediaWiki не поддерживает добавление данного тэга без помощи JS, так что такая ошибка может быть проигнорирована.
`Expected X but found Y`	Данная ошибка означает, что введённое значение неверно. К примеру, в `color: foo;` foo является неверным значением, так как не является цветом.
`Use of !important`	Использование `!important` в CSS по возможности нужно избегать, так как в дальнейшем с ним сложнее работать. Также участникам будет сложнее задать больший приоритет своему коду в личном CSS. В большинстве случаев использование точного селектора поможет вам избежать применение `!important`.
`Unknown property 'codename'`	Ввиду того, что CSS постоянно обновляется и изменяется, инструмент не всегда распознаёт некоторый код. Тем не менее часть кода всё ещё поддерживается, если применяется для определённого объекта на странице.

Советы

Применение CSS для определённой страницы

Используя CSS классы, вы можете применить стили для определённой страницы. В теге <body> используется уникальный класс, основанный на названии статьи. Например, для данной справочной статьи этот класс будет:

page-Справка_Шпаргалка_по_CSS_и_JS

Формат класса определяется как page-[название статьи]. Стоит учесть, что все пробелы, двоеточия и другие символы, не поддерживаемые CSS в качестве составляющих названия класса, заменяются на нижнее подчёркивание.

Применение JS для определённой страницы

Добавление switch кода на странице MediaWiki:Common.js поможет использовать отдельные скрипты для определённых страниц. Пример:

switch ( mw.config.get('wgPageName') ) {
    case 'Справка:Шпаргалка_по_CSS_и_JS':
        // Дальнейший код будет применяться только для страницы 'Справка:Шпаргалка по CSS и JS'
        break;
    case 'Справка:Проверка JavaScript':
        // Код будет применяться для страницы 'Справка:Проверка JavaScript'
        break;
}

Применение CSS и JS для определённой вики

Используя свой персональный CSS одним файлом, вы всё равно можете настроить участки кода для работы на разных википроектах. Для этого вы можете использовать название вики из базы данных. Узнать это название можно с помощью Генератора кода на Вики Сообщества. Для CSS используйте следующий код:

wiki-[database name]

Для JS можно использовать wgDBname.

Загрузка скриптов

Порядок загрузки различных скриптов следующий:

Основной программный код
Локальные скрипты вики
Персональные скрипты
1. Скрипты общего назначения
2. Скрипты, отвечающие за оформление

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

Использование !important в CSS

В CSS коде вам может понадобится !important, чтобы ваш код был «более важным», чем общий код сайта. Однако следует избегать использования !important абсолютно для всех строк вашего кода. Используйте его точечно.

Дублирование JS

Многие скрипты могут вызывать ошибки на страницах сайта, если запускаются два и более раз. Записывайте код JS таким образом, чтобы каждый его фрагмент запускался строго один раз. Также избегайте добавлять один и тот JS скрипт в разные файлы на одной вики. Это может привести к ошибкам и сбоям в работе сайта.

Вики Сообщества