Como posso exibir no navegador as alterações realizadas na folha de estilo sem utilizar a meta tag refresh? Isso só é possível utilizando javascript?
-
1Sim, só é possível com JavaScript (porque é necessário recarregar as folhas de estilo).– bfavarettoCommented 15/09/2015 às 21:47
-
Você está procurando algo como o BrowserSync? Toda vez que fizer uma alteração no HTML, CSS ou JavaScript a pagina vai atualizar e refletir as alterações.– Bruno WegoCommented 15/09/2015 às 22:06
1 Resposta
se você quer que as modificações feitas nos arquivos css sejam automaticamente refletidas na pagina, acho difícil, a menos que você encontre uma forma de notificar o browser que uma nova versão do CSS está disponível.
você até poderia até tentar fazer um controle manual, onde todos os seus arquivos css
teriam um complemento no link informando a versão mais recente, tipo arquivo.css?versao=3
e sempre que você inclui-se uma nova versão no servidor, o mesmo iria notificar o browser usando um websocket.
Se tudo que deseja é não ter o trabalho de usar o CRTL + F5 enquanto estiver montando o layout do seu site/app, então não acho que tenha uma solução simples para o seu problema.
Por um outro lado, se você deseja editar um arquivo CSS através do JavaScript, você pode manipular o CSSStyleSheet.
//Preparação - Criando um CSS Externo para o exemplo.
var blob = new Blob(
[document.getElementById("templStyle").innerHTML],
{ type: "text/css" }
);
var link = document.createElement("link");
link.href = URL.createObjectURL(blob);
link.title = 'blob';
link.rel = 'stylesheet';
document.head.appendChild(link);
//Inicio do Exemplo.
var getStyleSheetByTitle = function (title) {
return [].filter.call(document.styleSheets, function(styleSheet, indice) {
return styleSheet.title == title;
})[0];
}
var getStyleSheetRule = function (styleSheet, selector) {
return [].filter.call(styleSheet.rules, function(rule, indice) {
return rule.selectorText == selector;
})[0];
}
var btAtualizarCss = document.getElementById("btAtualizarCss");
btAtualizarCss.addEventListener("click", function (event) {
var cssBlob = getStyleSheetByTitle("blob");
getStyleSheetRule(cssBlob, "span:hover").style.color = null;
getStyleSheetRule(cssBlob, "label").style.color = "yellow";
})
<span>Span: Hello World</span>
<br />
<label>Label: Hello World</label>
<br />
<button id="btAtualizarCss">Remover Hover do Span e Mudar Cor do Label</button>
<!-- este template será utilizado para poder criar um CSS Externo para este exemplo -->
<script id="templStyle" type="text/trmplate">
span { color: green; }
span:hover { color: yellow; }
label { color: blue; }
label:hover { color: red; }
</script>
Eu setei o title
do <link />
para que eu tivesse uma forma fácil de encontrar o link certo, de outra forma eu teria de procurar o CSS pelo href
.