Стили подключаются поверх стилей Шикимори
Будьте готовы переписывать уже существующие стили и сталкиваться со свойствами с прописанным !important
. К примеру:@media screen and (max-width: 1024px) {
body {
background: none !important;
}
}
Ваш стиль оборачивается в медиа-запрос
По умолчанию все ваши правила оборачиваются в медиа-запрос:@media (min-width: 1024px) {
/* Ваш стиль */
}
Отменяется добавлением своего медиа-запроса (даже пустого).Даже если в вашем импортируемом стиле есть
@media
-запрос, вам всё равно нужно добавить медиа-запрос, чтобы стили работали нормально:@media { /* Пустой медиа-запрос */ }
«script» вырезается. Любой!
Подстрока script
будет вырезаться где бы она не находилась – будь то название вашего фонового изображения или же названия класса. К примеру .description
.@charset не распознаётся
Обычная строка @charset "UTF-8";
сломает идущее следом правило.Особенности @import
@import
встаивается в стиль
Все@import
'ы автоматически скачиваются на сервер Шикимори и встраиваются в готовый пользовательский стиль в открытом виде вне медиа-запроса, которым оборачиваются другие правила.@import
можно писать где угодно
Из-за предыдущей особенности вы можете указывать@import
там, где вам будет удобнее.@import
можно делать напрямую с гитхаба
Опять же из-за первой особенности@import
не требует жесткой привязки кcontent-type
импортируемого стиля: просто указывайте ссылку наraw.githubusercontent.com
!@import
кешируется!
Эта информация для авторов стилей! Стили по ссылке из import загружаются лишь один раз и кешируются сайтом. Из-за этого, изменяя импортируемый стиль, вы не увидите изменений на Шикимори: чтобы они отобразились, вам потребуется вручную сбросить кеш. Сделать это можно на странице /tests/reset_styles_cache – в поле ввода укажите ссылку на загружаемый стиль и нажмите кнопку «Submit».
Пример:
спойлер
Обработанный CSS
CSS в настройках
@import url(https://example.com/css/import.css);
body {
color: red;
}
Обработанный CSS
/* https://example.com/css/import.css */
.example::after{content:'Imported!';}
@media only screen and (min-width: 1024px) {
body {
color: red;
}
}
Сброс кеша необходимо делать после обновления стилей. Сделав сброс кеша один раз, изменения увидят все пользователи импортирующие ваш стиль.
@EngiNier@HN71, Вопрос так вопрос. CSS файл который ты импортируешь может содержать столько кода сколько ты напишешь в него сам в своем редакторе. Ограничений нет. Это как задать вопрос, а сколько можно написать текста в word файл. Ограничением будет только то сколько может сьесть shikimori.Насчет таких мелочных файлов как css - можно даже не говорить, ибо в обычных условиях они все до 500 KB максимум. И это 500KB это овер много стилей.
Но best practice это делить твой огромный css-файл на составляющие. Каждый отдельный будет отвечать за что-то одно. Будь то профиль либо страница тайтла. У
@grin3671 например очень хорошо оптимизирован стиль в этом плане, если глянуть на его структуру.В любом случае. Эти стили только с твоей стороны работают. Все что может произойти это бешенные лаги из-за количества применяемых стилей и плохой оптимизации кода, в частности анимаций @keyframes и из-за потягивания необдуманно больших 9999х9999 картинок себе в профиль.
Также бывает что в IDE например стоят ограничения на количество строк.....
Но я не слышал чтоб кто-то в стилях доходил до предела. И имел файлы css размером даже выше 300KB. Это кривые руки или не понимания как надо css в принципе.
@HN71все страницы сайта на которых должен использоваться стиль перестали открываться выдавая заглушку cloudflare о недоступном сайте
открывались только страницы пользователей со своими стилями
так как страница редактирования стиля не открывалась пришлось редактировать стиль через api
также через api не было скомпилированного стиля, из чего можно сделать вывод, что два гигабайта стилей сайт не переваривает
можешь сделать так, чтобы сайт при ошибке импорта откатывал стиль на предыдущую версию, а не просто уходил в молчание ?
или чтобы на странице редактирования стиля всегда был стандартный стиль ?
или возможность отключать стили через добавление чего-нибудь вроде
?css=0
в конец ссылки ?@EngiNier,@flyoffly@HN71, если это ситуация конкретно с shiki, то как вариант все файлы на твоей стороне опустошить и заресетить через страницу /tests/reset_styles_cache.Если с своего не можешь зайти на reset page тогда зайди с другого аккаунта. разнице нет на каком ресетить.
@HN71в моём случае сайт спотыкается на этапе скачивания или обработки и поэтому кеширования не происходит, при попытке сброса сайт просто ничего не находит так как ничего импортировано не было
нужно либо редактировать стиль через api, либо строчить администратору на почту
@EngiNier@HN71, Ответ на вопрос лежит у создателя сайта, ибо он регулирует какой обьем импорта может есть сайт.Тут напрашивается только вопросы?
просто миллион /* комментариев */
Пальцем в небо. Если ты просто для себя тестишь прочность этого сайта, то не совсем понятен смысл и цель этого задания)
@HN71а вдруг большие стили криво обрабатываются сайтом и можно будет делать import стилей в обход обеззараживателя ?
год назад такие импорты можно было делать простым подставлением между @ и import слешей, комментариев и пряча саму команду в названии файла /comments/6371327
примерно такая же ситуация была с импортом списков два года назад
можно было загружать файлы весом до стандартного лимита загрузки и эти файлы оставались храниться на сайте даже если не были валидными списками