Изменения CSS не отражаются. Зачем?

Ответ 1

Я забыл закрыть { в файле CSS. Вот почему весь код не отображался на странице.

Ответ 2

Обычно причиной является одно из следующих:

1) Ваше правило не применяется

Это может произойти, потому что:

• ваш HTML не очень хорошо сформирован (но обычно браузеры справляются с этим);
• ваш CSS имеет синтаксические ошибки;
• какой-то другой файл CSS (с такими же/похожими правилами) загружается после вашего (порядок объявления считается, последний побеждает);
• некоторые другие правила CSS с более высокой специфичностью загружаются где-то на странице и выигрывают над правилами, которые вы хотите применить (дополнительная информация об этом ответе);
• некоторые другие правила CSS используют ключевое слово !important Important.

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

2) Ваш CSS файл кэшируется

Это может произойти, потому что ваш сервер или ваш браузер кэшируют ресурс CSS. Чтобы принудительно обновить ресурс, нужно нажать CTRL F5 вместо одного F5, только один раз (после того, как вы повторно развернули свой статический ресурс).

Существует хорошо известная SO & Q по этому вопросу, и четко указано, что:

• CTRL F5 работает (работал?) По-разному в разных браузерах;
• обратите внимание, что хотя Ctrl + F5 заставит браузер выбросить кеш и запросить новое с сервера, сервер может игнорировать заголовок no-cache и обслуживать кэшированную страницу на стороне сервера. Таким образом, даже Ctrl + F5 может вернуть старую версию страницы, если сервер игнорирует заголовок no-cache. (от комментария к принятому ответу).

Если сервер игнорирует запрос браузера на очистку кеша (иногда это происходит), самый быстрый способ, который я нашел для решения этой проблемы: введите в адресной строке URL-адрес статических ресурсов и нажмите CTRL F5 на эта страница (это файл CSS), а не на странице, импортирующей ее. Это работает в 100% случаев.

Чтобы сделать это быстро, используйте Open link in a new Tab из браузера DevTools или нажмите на ссылку CSS по HTML, открытому с помощью View Source.

Ответ 3

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

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

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

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

к чему-то вроде этого

<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/>

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

Мой личный любимый метод сочетает код на стороне сервера с mod_rewrite, чтобы добиться перебора кеша. Рабочий процесс следующий.

1) На стороне сервера используется DOMDocument, чтобы искать все файлы ресурсов в сгенерированном HTML-коде, например CSS, JavaScript и т.д. добавляет измененную временную метку, полученную с помощью filemtime.

Пример: /css/main.min.css становится /css/main.min-1422585377.css в коде, который будет возвращен клиенту (браузеру).

2) Когда браузер получает ответ, ему просто придется обрабатывать этот запрос CSS как новый ресурс, если добавленная временная метка не соответствует таковой в кеше (ресурс с другим именем всегда рассматривается как новый запрос).

3) Теперь браузер теперь отправляет запрос на /css/main.min-1422585377.css на сервер.

4) Чтобы перенаправить все запросы к одному и только main.min.css, которые фактически существуют на сервере, мы используем простое правило перезаписи, подобное этому

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

ПРИМЕЧАНИЕ: Я действительно предпочитаю включать отметки времени в самом имени файла, поэтому вместо /css/main.min.css?1422585377 я предпочитаю использовать /css/main-1422585377.min.css, потому что некоторые прокси-серверы, такие как Squid, склонны игнорировать строки запросов и будут обрабатывать только часть имени файла как релевантная.

Ответ 4

Это происходит со мной все время, когда я работаю на своем веб-сайте в своем стеке XAMPP на своем mac. Решение состоит в том, чтобы активировать опции разработчика и выбрать "пустой кеш" из меню разработчиков. Это заставляет браузер обновлять CSS для страницы. Я не знаком с разработкой на других платформах, но вижу, можно ли очистить кеш в своем браузере.

Кроме того, проверьте свой css и убедитесь, что ваш синтаксис верен, в частности, что вы где-то не указали "}".

Ответ 5

Закройте div, который вы начинаете .what-new h3

КОД CSS:

.what-new{
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3{
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;
}

Ответ 6

Если ваш браузер не отражает изменения, внесенные в таблицы стилей CSS, попробуйте следующее:

• Щелкните правой кнопкой мыши документ в окне браузера.
• Перейдите к источнику просмотра страницы.
• В коде найдите ссылку на прикрепленный файл CSS. Перейти к прилагаемому CSS файл и посмотреть, содержит ли он ваши последние изменения. Если не обновить ваш файл CSS и все последние изменения будут отображаться.
• Перезагрузите документ и появятся изменения. Откройте файл CSS в вашем браузере. Перезагрузите файл CSS в своем браузер. Надеюсь, это поможет!

Ответ 7

Для Django, "clearsessions", а затем "runningerver" обновит все настройки в файле .css.

Вы также должны очистить кеш браузера.

Ответ 8

В основном это связано с кэшированием вашего браузера. Удалите кеш, удалив историю и удалив кеши или как предлагаемый выше, просто нажмите ctrl + f5 вместо просто f5

Ответ 9

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

Ответ 10

Много страданий и проделав все формы, упомянутые здесь.

Я нашел в своем CPanel приложение с именем Cachewall, я просто отключу его, и это решит мою проблему

Это может помочь кому-то

Ответ 11

В моем случае ошибка заключалась в том, что я не установил пакет в VS2017 с именем Bundler и Minifier. После установки все изменения, например. main.css автоматически изменилось и main.min.css и веб-публикация взяли фактический файл CSS.

Ответ 12

Я сталкиваюсь с той же проблемой, но я нашел решение. после добавления или изменения свойств css в css_2-play.css

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

изменить имя файла CSS в нечто .css

<link rel="stylesheet" href="style/something.css" type="text/css"/>

не забудьте переименовать файл CSS в Orignal каталоге.

Ответ 13

Вы проверили свои приложения кеша на стороне веб-хостинга?

Кроме того, вы пытались очистить ваши машины DNS? Для этого выполните команду ipconfig/flushdns и посмотрите, вносит ли она какие-либо изменения.