CSS não atualizado no navegador quando eu o altero

14

Estou trabalhando no CSS do meu site wordpress. Quando faço alterações e atualizo a página, as alterações não são refletidas. Quando limpo o histórico do navegador e o cache, as alterações ainda são refletidas. Quando visualizo o código fonte da página e observo o arquivo css, ele possui o conteúdo antigo antes da alteração. Como faço para atualizar isso para que eu possa desenvolver?

David Tunnell
fonte
Você tem um plugin de cache em execução? Seus arquivos CSS podem ser armazenados em cache no servidor.
Pat J
Parece que não tenho um plugin de cache.
22813 David Tunnell
Funciona se você não estiver usando o WordPress? Por exemplo, um arquivo chamado test.htmle um .cssarquivo associado ?
23413 Pat Pat J
Se alguma das respostas ajudou a resolver o problema, aceite-o!
mrwweb

Respostas:

14

Adicione um número de versão aleatória no final do arquivo css que você está anexando. Se você estiver usando as funções ' wp_enqueue_style ' ou wp_register_style , passe um número aleatório (versão) rand(111,9999)para o quarto parâmetro. Se você estiver anexando css como uma tag html, adicione " ?ver=<?php echo rand(111,999)?>" ao final do nome do arquivo. Exemplos estão aqui

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

ou

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

Isso evitará o armazenamento em cache no final do cliente e, possivelmente, no servidor também.

SENHOR
fonte
7

Sei que este post tem mais de um ano, mas pensei em mencionar que o CloudFlare armazena em cache arquivos estáticos, como css, js e imagens, para ajudar a acelerar o carregamento. Algo que levei apenas algumas horas para descobrir, pois estava tendo problemas com minhas alterações no css e não refletiam o recarregamento. O CloudFlare possui o modo de desenvolvimento que você pode ativar por 3 horas. Se você esquecer de habilitá-lo antes de começar a fazer modificações, poderá limpar o cache do gerenciamento do cloudflare.

Shanan
fonte
1
O CloudFlare pensa que, se houver ?ver=, o arquivo não poderá ser atualizado.
Hlcs #
Você está dizendo que toda vez que faço uma alteração no CSS, javascript, preciso limpar o cache do Cloudfare? O que esse modo de desenvolvimento faz realmente? Thnx
Tanvir
0

É possível que seu host esteja usando algo como o Varnish para armazenar em cache a saída do seu site. Eu me deparei com isso no site de um cliente hospedado em uma conta de hospedagem compartilhada com taxa reduzida. O único remédio que encontrei foi apenas ser paciente.

Jeff Purcell
fonte
0

Se você estiver usando um tema filho, é possível enfileirar a folha de estilo do tema filho para ver as alterações imediatamente. Isso resolveu meu problema.

Ramón Puig
fonte
0

Só quero destacar - lembre-se de todos os plug-ins de cache que você instalou. O WP Fastest Cache , por exemplo, pode criar esse problema se você não se lembrar de fazer login no painel do WP e clicar em "Limpar cache -> Excluir cache e CSS / JS minimizado" no menu de navegação.

HappyHands31
fonte
0

Talvez seja velho. Mas preciso apoiar alguém que possa estar procurando ajuda. Eu tive o mesmo problema e verifiquei meus plugins. Havia o plugin "w3 total cache" que acelera o carregamento. Esse é o plugin de cache do lado do servidor, então eu o desativei. As alterações de CSS são visíveis novamente em tempo real. Existem muitos plugins de reforço de carregamento. Portanto, verifique sua lista de plugins e desative-os até concluir o desenvolvimento.

Gimhana Jayasekara
fonte