(→Стили) Метка: sourceedit |
Нет описания правки Метка: sourceedit |
||
Строка 123: | Строка 123: | ||
Если и это не помогает, то вам нужно просто подождать. После нескольких часов кэш между вами и вики будет обновлён. |
Если и это не помогает, то вам нужно просто подождать. После нескольких часов кэш между вами и вики будет обновлён. |
||
+ | |||
+ | == Обозначение ошибок в редакторах CSS и JS == |
||
+ | Редакторы CSS и JS обладают как [[Справка:Подсветка синтаксиса|подсветкой синтаксиса]], так и возможностью проверки кода на ошибки: |
||
+ | * После написания или добавления кода на странице появится информация о возможных ошибках синтаксиса. Все ошибки отображаются слева, возле номера строк, в виде восклицательного знака оранжевого цвета или же в виде креста в красном круге. |
||
+ | * Учите, что не каждая отмеченная ошибка требует исправления. CSS (также, как и JS) постоянно развивается и не все браузеры ведут себя одинаково — некоторые оповещения ''не требуют действий''. |
||
+ | |||
+ | <gallery orientation="landscape" position="center" spacing="small" hideaddbutton="true" widths="250"> |
||
+ | CSSlinting.png |
||
+ | CSSimportant.png |
||
+ | </gallery> |
||
+ | |||
+ | === Стандартные ошибки === |
||
+ | {| class="article-table" |
||
+ | |+Ошибки в CSS |
||
+ | |- |
||
+ | ! style="width:40%;" | Ошибка |
||
+ | ! style="width:60%;" | Объяснение |
||
+ | |- |
||
+ | | <code>@import prevents parallel downloads, use <link> instead</code> |
||
+ | | По стандарту для импортирования CSS используется тэг [http://www.w3schools.com/TAGs/tag_link.asp link]. Однако MediaWiki не поддерживает добавление данного тэга без помощи JS, так что такая ошибка может быть проигнорирована. |
||
+ | |- |
||
+ | | <code>Expected X but found Y</code> |
||
+ | | Данная ошибка означает, что введённое значение неверно. К примеру, в <code>color: foo;</code> foo является неверным значением, так как не является цветом. |
||
+ | |- |
||
+ | | <code>Use of !important</code> |
||
+ | | Использование <code>!important</code> в CSS по возможности должно избегаться, так как в дальнейшем с ним сложнее работать. Также участникам будет сложнее задать больший приоритет своему коду в личном CSS. В большинстве случаев использование точного селектора поможет вам избежать применение <code>!important</code>. |
||
+ | |- |
||
+ | | <code>Unknown property 'codename'</code> |
||
+ | | Ввиду того, что CSS постоянно обновляется и изменяется, инструмент не всегда распознаёт некоторый код. Тем не менее часть [https://css-tricks.com/almanac/properties/ кода] всё ещё поддерживается, если применяется для определённого объекта на странице. |
||
+ | |} |
||
+ | |||
+ | == Советы == |
||
+ | === Применение CSS для определённой страницы === |
||
+ | Используя CSS классы, вы можете применить стили для определённой страницы. В тэге <code><body></code> используется уникальный класс, основанный на названии статьи. Например, для данной справочной статьи этот класс будет: |
||
+ | ::<code>page-Справка_Шпаргалка_по_CSS_и_JS</code> |
||
+ | |||
+ | Формат класса определяется как <code>page-[название статьи]</code>. Стоит учесть, что все пробелы, двоеточия и другие символы, не поддерживаемые CSS в качестве составляющих названия класса, заменяются на нижнее подчёркивание. |
||
+ | |||
+ | === Применение JS для определённой страницы === |
||
+ | Добавление <code>switch</code> кода в JS поможет использовать отдельные скрипты для определённых страниц. Пример: |
||
+ | |||
+ | <syntaxhighlight lang="javascript"> |
||
+ | switch ( mw.config.get('wgPageName') ) { |
||
+ | case 'Справка:Шпаргалка_по_CSS_и_JS': |
||
+ | // Дальнейший код будет применяться только для страницы 'Справка:Шпаргалка по CSS и JS' |
||
+ | break; |
||
+ | case 'Справка:Проверка JavaScript': |
||
+ | // Код будет применяться для страницы 'Справка:Проверка JavaScript' |
||
+ | break; |
||
+ | } |
||
+ | </syntaxhighlight> |
||
== Смотри также == |
== Смотри также == |
||
*[[Справка:Включение дополнительных JS и CSS]] |
*[[Справка:Включение дополнительных JS и CSS]] |
||
+ | *[[Справка:Персональный CSS и JavaScript]] |
||
*[[Справка:Monobook]] |
*[[Справка:Monobook]] |
||
*[[Справка:Конструктор тем]] |
*[[Справка:Конструктор тем]] |
Версия от 12:52, 6 декабря 2016
Здесь перечислены все страницы JavaScript и CSS, которые вы можете изменить для улучшения вашей вики. Обратите внимание, что изменения в этих статьях не вступают в силу немедленно. Вам может потребоваться подождать пару минут и очистить кэш браузера. Кроме того, имейте в виду, что все изменения JavaScript теперь проходят проверку и не будут видны сразу (подробнее здесь: Справка:Проверка JavaScript).
Стили
Наиболее распространенные:
Стиль | Расположение | Затрагивание вики | Затрагивание участников | Затрагивание оформления |
---|---|---|---|---|
MediaWiki:Common.css | эта вики | эта вики | все участники | всё |
MediaWiki:Wikia.css | эта вики | эта вики | все участники | по умолчанию |
MediaWiki:Monobook.css | эта вики | эта вики | все участники | Monobook |
Special:MyPage/wikia.css | эта вики | эта вики | только вы | по умолчанию |
Special:MyPage/monobook.css | эта вики | эта вики | только вы | Monobook |
Special:MyPage/common.css | эта вики | эта вики | только вы | всё |
Special:MyPage/global.css | сообщество | все вики | только вы | всё |
JavaScript
Наиболее распространенные:
Скрипт файла | Расположение | Затрагивание вики | Затрагивание участников | Затрагивание оформления |
---|---|---|---|---|
MediaWiki:Common.js | эта вики | эта вики | все участники | всё |
MediaWiki:Wikia.js | эта вики | эта вики | все участники | по умолчанию |
MediaWiki:Monobook.js | эта вики | эта вики | все участники | Monobook |
Special:MyPage/wikia.js | эта вики | эта вики | только вы | по умолчанию |
Special:MyPage/monobook.js | эта вики | эта вики | только вы | Monobook |
Special:MyPage/common.js | эта вики | эта вики | только вы | всё |
сообщество | все вики | только вы | всё |
Вопросы по кешированию
Каждый файл, который вы загружаете из Интернета, попадает в кэш. Это здорово, потому что это уменьшает трафик для собственного компьютера и для серверов Фэндома, но это становится проблемой, когда дело доходит до тестирования изменений в проекте. Ждать придется несколько часов, прежде чем изменения вступят в силу, если не использовать следующие приёмы:
Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: удерживая клавишу Shift, нажмите на панели инструментов Обновить, или нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac).
- Google Chrome: нажмите Ctrl-Shift-R (⌘-Shift-R на Mac).
- Internet Explorer: удерживая Ctrl, нажмите Обновить. Или нажмите Ctrl-F5.
Чаще всего этого бывает достаточно, но иногда, когда вы тестируете свои изменения с помощью другого браузера, вам нужно очистить кэш Фэндома. Добавьте к URL страницы в адресной строку команду ?action=purge
. Например,
http://yourwiki.wikia.com/wiki/MediaWiki:Cheatsheet
необходимо переписать как:
http://yourwiki.wikia.com/wiki/MediaWiki:Cheatsheet?action=purge
Если и это не помогает, то вам нужно просто подождать. После нескольких часов кэш между вами и вики будет обновлён.
Обозначение ошибок в редакторах CSS и JS
Редакторы CSS и JS обладают как подсветкой синтаксиса, так и возможностью проверки кода на ошибки:
- После написания или добавления кода на странице появится информация о возможных ошибках синтаксиса. Все ошибки отображаются слева, возле номера строк, в виде восклицательного знака оранжевого цвета или же в виде креста в красном круге.
- Учите, что не каждая отмеченная ошибка требует исправления. CSS (также, как и JS) постоянно развивается и не все браузеры ведут себя одинаково — некоторые оповещения не требуют действий.
Стандартные ошибки
Ошибка | Объяснение |
---|---|
@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
кода в JS поможет использовать отдельные скрипты для определённых страниц. Пример:
switch ( mw.config.get('wgPageName') ) {
case 'Справка:Шпаргалка_по_CSS_и_JS':
// Дальнейший код будет применяться только для страницы 'Справка:Шпаргалка по CSS и JS'
break;
case 'Справка:Проверка JavaScript':
// Код будет применяться для страницы 'Справка:Проверка JavaScript'
break;
}