Правки стилей сайта производятся очень часто. Бывает, что нужно немного изменить цвет, положение, размеры или оформление определенного элемента сайта. Сначала инспектором веб браузера необходимо проверить правильность написания самих css правил:
Надпись inspector-stylesheet говорит о том, что данное правило добавлено не в css файлах, а вручную через инспектор. Если через инспектор необходимые изменения внешнего вида корректируемого элемента были достигнуты, то далее необходимо эти изменения внести в файл стилей сайта.
Если неизвестно из какого файла берутся стили сайта, то это можно посмотреть в исходном коде страницы (в большинстве браузеров вызывается через ctrl+u):
Файлов со стилями может быть подключено несколько. Также могут присутствовать отдельные файлы плагинов, если таковые установлены на сайте. Ваша задача найти основной файл стилей, который отвечает за внешний вид основного шаблона сайта.
Далее необходимо внести изменения в css файл, обычно новые стили с соответствующими комментариями добавляются последними строками в файл.
Но иногда изменения стилей не применяются, это может происходить по нескольким причинам:
- Изменения на самом деле применились,но результата не видно из-за не обновленного кеша веб браузера. Всегда после изменения стилей необходимо делать очистку кеша через ctrl+F5.
У меня на мобильном телефона в веб браузере chrome часто бывает такой глюк: даже после очистки кеша сайт отображается неправильно. Берешь телефон друга, открываешь на нем сайт — там изменения применены. А на твоем телефоне, даже после очистки истории — нет.Вообще для проверки изменения в стилях удобно использовать режим инкогнито, в нем браузер не сохраняет кешированные версии сайта у себя в памяти, а все время делает загрузку с веб сервера.
- Из-за плагинов кэширования. Например, в cms вордпресс такими плагинами являются autoptimize и fastest cache. Данные плагины используются на сайте для ускорения его загрузки. То есть при открытии сайта на устройстве клиента плагин вернет страницу, сохраненную у себя в файлах, а не то, что реально выполнит сервер. Это действительно сокращает время ответа сервера.
В свежих версиях данных плагинов такой проблемы нет, так как после изменения файла стилей плагин заново генерирует свой кеш.
- Кеш самой cms. Многие самописные и не самописные(например битрикс и джумла) движки также используют внутренний кеш.
- Если изменения внесены в css, который не используется при отображении данной страницы. Для различных страниц сайта могут использоваться разные шаблоны с разными файлами стилей. Поэтому изменения могут примениться на одних страницах, которые использую измененный файл стилей, а на других страницах, который данный файл не используют — нет.
- Изменения не применяются, потому что они переназначаются css правилами расположенными ниже по коду, либо в других файлах стилей, вызывающихся после данного. Это должно быть видно в инспекторе браузера, новые правила будут зачеркнуты, а рядом должны находится перебивающие их правила.
- Ошибка в коде правила. Если правила внесены в css файл с синтаксической ошибкой из-за которой веб браузер их не понимает и не применяет.
- Если сайт работает используя сеть cloudflare для защиты и ускорения работы, то правила css могут не применяться из-за включенного кеширования на стороне сервиса. В личном кабинете cloudflare можно сбросить этот кеш либо временно активировать developer mode, при котором кеширование отключено.