Изменения CSS, не размышляющие над сайтом
Используйте css, как показано ниже:
установите left: -100%; в .hide вместо использования в #sidebar
Почему?
если вы устанавливаете left: -100%; в #sidebar после того, как анимирование show завершает left возврат к объявлению, как в #sidebar, и не остается, как вы установили в @keyframes
#sidebar {
background-color: #e0e0e0;
border: 1px solid red;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
.hide {
animation-name: hide;
animation-duration: 1s;
left: -100%;
}
.show {
animation-name: show;
animation-duration: 1s;
}
8 ответов
Я нашел, что это довольно типичная проблема в большом количестве моих проектов. Я предложил бы две вещи...
Если это - просто приложение, что Вы работаете над Вами, может использовать Cachebuster CSS во время разработки.
После идеи позади Cachebuster я нашел, что, часто добавляя метку времени файла CSS, поскольку строка запроса прочь ссылки CSS поможет в сообщении браузера, что файл отличается... что-то как... whatever.css? 12212009035543
Я занимался этой проблемой в прошлом и закончил тем, что писал httpmodule для контакта с нею.
Это довольно просто, это просто находит все ссылки сценария/CSS в главном теге (у них теперь должен быть runat=server), и добавляет номер версии блока к ссылке, таким же образом как Tim K описывает. Таким образом, я уверен, что мои клиенты всегда выбирают новейшую CSS/сценарии, когда мое приложение обновляется в производстве и никогда не должно заниматься этой проблемой снова.
Действительно необходимо видеть, является ли это стороной сервера или стороной клиента. Если сервер все еще вручает старый CSS затем ясно, Вы имеете, не случайно натыкаются на сторону клиента.
Я иногда видел времена, где я должен был показать CSS в браузере, и затем в следующий раз, когда я был к реальной странице, это используется что новый CSS. Обычно просто удар обновления делает это.
У Вас есть какие-либо веб-кэши как Akamai включенными где-нибудь?
При попытке перейти к странице CSS от компьютера, который никогда не видел старой версии, какую версию она показывает?
Править: Измененный ответ для отражения рассматриваемых редактирований.
Вы могли бы хотеть использовать контрольный инструмент, как Живые Заголовки Http для Firefox, видеть запросы и ответы на и с сервера. Это обычно решает много проблем для меня. Смотрите на "Истечь" заголовки и условные запросы (как: "If-modified-since"). С учетом вышесказанного, смотрите на сервер и клиентское местное время и часовые пояса - могло бы случиться так, что они значительно отличаются, и условное выражение ДОБИРАЮТСЯ, запросы ", кажется," обработаны правильно, из-за будущего или иначе исказили метки времени.
Можно вызвать для загрузки текущей CSS непосредственно из сервера с добавлением случайного уникального значения к URL, как http://example.com/Cssfolder/135.css?983274928374 и http://example.com/cssfolder/134.css?08973249827. Нет никакого способа, которым это когда-либо кэшировать, если Вы не используете то же случайное значение дважды.
Таким образом, Вы изучаете, где далее искать решение Вашей проблемы: В сервере, прокси ISP/a или Вашем браузере.
Возможно, кэш Интернет-провайдера, как в этом случае?
Когда я разрабатываю, и я должен быть уверен, что вижу изменения, поскольку я работаю, я прикрепляю CSS в страницу т.е.
<style type="text/css">
/* your css */
</style>
Или Вы могли постоянно менять имя самого файла CSS, не очень полезный в продуктивной среде, но возможно хорошо при разработке.
Я знаю, что это не решает проблему, но для разработки его хорошо.
Я написал в блоге сообщение о том, как мы преодолели эту проблему здесь:
Как избежать проблем с кешированием таблиц стилей JavaScript и CSS в ASP.NET
В принципе, во время разработки вы можете добавить случайное число в строку запроса после имени файла CSS. Когда вы выполняете сборку выпуска, код переключается на использование номера версии вашей сборки. Это означает, что в вашей производственной среде ваши клиенты могут кэшировать таблицу стилей, но всякий раз, когда вы выпускаете новую версию сайта, они будут вынуждены повторно загрузить файл.