3

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?

2
  • 1
    Sim, só é possível com JavaScript (porque é necessário recarregar as folhas de estilo).
    – bfavaretto
    Commented 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 Wego
    Commented 15/09/2015 às 22:06

1 Resposta 1

3

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .