Изменения CSS не отражаются на действующем сайте? – Вот как это исправить –

Каскадная таблица стилей или CSS — это основа дизайна любого современного веб-сайта. Вы можете добавить CSS к любому элементу HTML, используя идентификатор или класс. CSS можно сделать эффективным только для элемента (встроенный), для всех элементов на странице (внутренний) или на всем сайте (внешний). Какой бы метод вы ни использовали для добавления CSS к элементу HTML на странице, вы столкнетесь с одной большой проблемой.

Изменения выглядят нормально в консоли браузера во время тестирования и не отражаются на действующем сайте после применения того же стиля. Если вы правильно добавили CSS, виновником является кеширование, и вам следует проверить, чтобы изменения вступили в силу. В этой статье мы объясним, как сделать изменения CSS эффективными на действующем сайте, удалив различные уровни кеширования.

Получить информацию о CSS

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

• Идентификатор CSS или класс, используемый с элементом.
• URL-адрес страницы или сайта.
• Полный URL-адрес внешней таблицы стилей. Если у вас есть параметр в конце URL-адреса CSS-файла, убедитесь, что вы получили правильный URL-адрес.

В зависимости от вашей платформы управления контентом и настроек сайта вам может потребоваться их использование.

1. Проверьте правильность добавления CSS

Распространенной и рекомендуемой практикой является использование внешней таблицы стилей CSS и связывание файла в разделе заголовка каждой страницы сайта. Иногда вы могли пропустить версию файла или пропустить ссылку на правильный файл в разделе заголовка. Консоль браузера не будет отображать ошибки CSS на уровне страницы, такие как отсутствующий класс или идентификатор. Однако вы все равно можете найти отсутствующий внешний файл CSS, в котором будет отображаться ошибка 404.

Убедитесь, что файл CSS связан с помощью тега в заголовке, как показано в примере ниже:

Другая проблема заключается в том, что редактирование в консоли браузера и добавление CSS на работающий сайт — это две разные вещи. Даже если загружен тот же обновленный стиль CSS, результат на действующем сайте может отличаться по разным причинам. В этом случае вам может потребоваться протестировать, добавив !important; к вашим стилям или удалив код, который имеет приоритет над вашими стилями.

2. Отключите блокировщик рекламы и другие расширения.

Некоторые расширения браузера могут блокировать файлы CSS, загруженные с внешних доменов. Блокировщики рекламы являются лучшим примером, поскольку они блокируют файлы CSS, связанные с рекламой, загруженной на страницу. Если вы внесли изменения в этот CSS-файл, вы не увидите их на странице, поскольку сам файл заблокирован. Вы можете увидеть это в консоли браузера как «Проблемы» с упоминанием «На этой странице не удалось загрузить таблицу стилей по URL-адресу». Нажмите на ссылку ниже «Затронутые ресурсы», чтобы выделить файл, который не загружен в исходном коде.

Не удалось загрузить файл CSS с URL-адреса.

Если вы установили множество расширений браузера, отключите их все и перезагрузите страницу, чтобы проверить, правильно ли загружается CSS.

3. Очистите кеш браузера

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

Итак, очистка кэша браузера – это следующее, что вам следует сделать, если вы посетили ту же страницу/сайт перед внесением изменений. Это также имеет место, когда вы тестируете на локальном сервере.

Вы можете просто нажать «Control+Shift+Delete» (Windows) или «Command+Shift+Delete» (Mac) в браузерах Chrome, Firefox и Edge. Обязательно выберите «Все время» для временного диапазона и убедитесь, что установлен флажок «Кэшированные изображения и файлы».

Удалить сохраненный CSS в Chrome

В Mac Safari перейдите в «Safari > Очистить историю…» и удалите все исторические элементы.

Примечание: Если вы не хотите очищать кеш браузера, используйте режим инкогнито или проверьте другой браузер.

4. Очистите кэш CDN

В настоящее время почти все веб-сайты используют CDN для ускорения доставки контента. Если вы используете Cloudflare или любой другой CDN, который кэширует контент, обязательно очистите кеш для URL-адреса страницы или файла CSS. Если файл CSS содержит строку запроса, вам следует очистить URL-адрес с помощью строки запроса.

После очистки файла CSS и URL-адреса страницы откройте страницу в браузере. Это приведет к извлечению файлов с сервера, поскольку они еще не кэшированы, и вы должны увидеть отражение изменений CSS.

Примечание: Такие сервисы, как Cloudflare, предлагают возможность очистить одну страницу или файл. Эта функция также доступна для пользователей бесплатной учетной записи. Вы можете использовать это вместо очистки кеша всего сайта.

Удалить кэш страниц или файлов в Cloudflare

5. Отключите функции оптимизации CSS.

Обычно все файлы CSS, используемые на сайте, объединяются в один файл, чтобы уменьшить количество HTTP-запросов, отправляемых на сервер. Когда вы отредактировали один из файлов, это может не отразиться в объединенном файле CSS из-за кэширования или по другим причинам. Проблема в том, что вы не можете легко определить, минимизирован ли ваш код и объединен ли он в конечном выходном файле. Таким образом, здесь можно временно отключить объединение функции CSS-файла и тестирование с отдельными файлами. Убедитесь, что файлы загружаются отдельно в исходном коде, и очистите кеш, чтобы отразить изменения.

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

6. Проверьте кеширование плагина.

Системы управления контентом, такие как WordPress, предлагают плагины кеширования для ускорения вашего сайта. Плагины, такие как WP Rocket, активно кэшируют страницы и обслуживают всю страницу как статический файл. Итак, если вы используете плагины, обязательно удалите кеш перед проверкой изменений.

7. Проверьте настройку хостинга.

Большинство хостинг-серверов предлагают кэширование Varnish, а некоторые компании, такие как SiteGround, также предлагают три уровня кэширования на стороне сервера. Если вы включили кеширование на стороне сервера, войдите в свою учетную запись хостинга и очистите кеш. В противном случае старые файлы, загруженные из кэша сервера, не будут отражать ваши последние изменения.

Заключительные слова

Если вы заметили, что изменения CSS не отражаются на действующем сайте, сначала убедитесь, что вы правильно добавили код и что в таблице стилей, загруженной в исходный код, есть ваши изменения. Как уже упоминалось, это немного сложно проверить, если вы объединяете файлы CSS или загружаете критический/используемый CSS в заголовок из нескольких файлов. Возможно, вам придется временно отключить эти функции, чтобы изменения были загружены в исходный файл. Если все в порядке, очистите кеш на другом уровне, чтобы при новой загрузке страницы извлекалось самое последнее содержимое.