Создаю сайт, нужно очищать историю браузера чтобы изменения отобразились. А как сделать чтобы заказчику не нужно было очищать историю браузера?

Question

[Анна Чумаченко]

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

Comments

[sim3x]

Именно историю?
Зачем?

Answer 1

[Dymok]

1. Вместо полной очистки истории достаточно нажать Ctrl+F5.
2. При изменении файла стилей в конец добавлять версию файла и обновлять ее каждый раз, например: style.css?v=2

Answer 2

[Дмитрий Гординский]

Как вариант - менять название CSS файла, или дописывать в конце GET параметр с версией, которую инкреминтировать при кадом обновлении. Бразер будет видеть новый фал, и не будет подтягивать старый из кеша.

Answer 3

[happyer]

Если сайт на хостинге стоит то в файл php.ini нужно написать строку opcache.enable=Off или если есть строка opcache.enable=On поменять на значение Off
есть другой вариант но более не удобный
нажимать все время ctrl+R или ctrl+F5 таким образом очищается кэш страницы

Answer 4

[Глеб Старков]

Добавьте к стилям свою версию
<link rel="stylesheet" href="style.css?v=2">

И после изменения css меняйте версию, v=3 и т.д.

Answer 5

[coderisimo]

Нужно очищать КЭШ, а не историю. Самый простой способ - заставлять браузер принудительно использовать НОВУЮ версию css файла.
<link rel="stylesheet" href="style.css?v=1.1"> вот здесь вся магия : ?v=1.1
если сделали изменения
<link rel="stylesheet" href="style.css?v=1.2" итд...

Answer 6

[Николай Чуприк]

Ещё добавлю. Прикрутить less.js на стороне клиента. CSS будет каждый раз собраться будто свеженьким, до того невиданным.

Comments

[Анна Чумаченко]

это вместо переименовывания файла css? а можно поподробнее...

[Николай Чуприк]

Препроцессор less.js, когда он работает на стороне клиента, берет less-файл и динамически, как любой скрипт преобразовывает его в css. При этом проблемы с обновлением в этом случае не возникает, т.к. таблица стилей — не какой-то файл, который браузер кэширует, а результат работы препроцессора.

<link rel="stylesheet/less" type="text/css" href="css/style.less" />
<script src="js/less.js"></script>

[tema_sun]

Не надо так делать. CSS не настолько часто обновляется, чтобы его совсем не кешировать.

Answer 7

[Денис Янчевский]

Как вариант, добавить обертки

function enqueue_versioned_script( $handle, $src = false, $deps = array(), $in_footer = false ) {
	wp_enqueue_script( $handle, get_stylesheet_directory_uri() . $src, $deps, filemtime( get_stylesheet_directory() . $src ), $in_footer );
}
 
function enqueue_versioned_style( $handle, $src = false, $deps = array(), $media = 'all' ) {
	wp_enqueue_style( $handle, get_stylesheet_directory_uri() . $src, $deps = array(), filemtime( get_stylesheet_directory() . $src ), $media );
}

и подключать с помощью них вместо стандартных функций

function themename_scripts() {
	enqueue_versioned_style( 'themename', '/style.css' );
	enqueue_versioned_script( 'themename', '/js/scripts.js', array( 'jquery'), true );
}
 
add_action( 'wp_enqueue_scripts', 'themename_scripts' );

Ссылка будет меняться автоматически и браузер заказчика будет загружать новую версию файла без необходимости очищать кеш в браузере

<link rel='stylesheet' id='themename-css' href='http://example.com/wp-content/themes/themename/style.css?ver=1429693860' type='text/css' media='all' />

<script type='text/javascript' src='http://example.com/wp-content/themes/themename/js/scripts.js?ver=1429694775'></script>

Подробнее: Как принудительно обновить js и css-файлы в WordPr...