CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
Tamás Pap
Tamás Pap

Reputation: 18303

Reload CSS stylesheets with javascript

I want to reload all CSS stylesheets in a html page via javascript, without reloading the page.

I need this only while developing to reflect css changes without refreshing the page all time.

A possible solution is to add a ?id=randomnumber suffix to the css hrefs with javascript, but I don't want to do that.

I want to reload the stylesheet some way, without changing it's url, and the browser will decide if it needs to load a new version of that css or not (if server responds with a 304 - Not modified).

How to accomplish this?

Upvotes: 17

Views: 34619

Answers (5)

Humbertda
Humbertda

Reputation: 374

An alternative for Grunt would be to use Prepros.

It also use a file watcher on your project folder, but for all your files. (js, css, php) and reload the page on every change. (+ If this is a small visual change like css, it wont refresh the page, it will make a smooth transition. (Works for colors, positioning, etc.))

Like Grunt, it compile and minify your files, and allow you to make a live preview on a specified url (not only localhost). (There are plenty more of functionalities)

Using a special port, it even synchronize events such as clic, mouse wheel, inputs, etc.

Upvotes: 0

ChongFury
ChongFury

Reputation: 161

First, add an id (if not present) to your stylesheet link tags like so:

<link id="mainStyle" rel="stylesheet" href="style.css" />

Next, in Javascript (also utilizing jQuery) add the following function:

function freshStyle(stylesheet){
   $('#mainStyle').attr('href',stylesheet);
}

Lastly, trigger the function on your desired event:

$('#logo').click(function(event){
    event.preventDefault();
    var restyled = 'style.css'; 
    freshStyle(restyled);
});

By updating the value of the linked stylesheet, even if it's the same value, you force the client to look again; when it does, it'll see and (re)load the latest file.

If you're running into issues with cache, then try appending a random (psuedo) version number to your filename like this:

var restyled = 'style.css?v='+Math.random(0,10000);

Hope this helps. Dillen's examples above also work, but you can use this if you want to just target one or a set of stylesheets with minor adjustments.

Upvotes: 6

Warlock
Warlock

Reputation: 7481

It's very simple in the GoogleChrome browser.

Press F12, click the cogwheel at the right bottom corner and select option Disable cache (while DevTools is open).

enter image description here

enter image description here

Upvotes: 0

Michael Jasper
Michael Jasper

Reputation: 8068

There are much better ways to accomplish:

I need this only while developing to reflect css changes without refreshing the page all time.

One way is to use Grunt.js to watch for file changes, and then livereload the page.

The workflow is like this:

  • Save css document
  • Grunt watch sees the change
  • live reloads the css on the page

This can be chained with other Grunt functions, such as {sass|less|stylus} preprocessor compilation, to create a workflow like this:

  • save a Sass file
  • watch sees change
  • sass is compiled and minified to cdn location
  • new css is loaded onto the page

Other front-end automation resources:

Video from a Google employee: http://www.youtube.com/watch?v=bntNYzCrzvE

http://sixrevisions.com/javascript/grunt-tutorial-01/

http://aboutcode.net/vogue/

Upvotes: 3

Dillen Meijboom
Dillen Meijboom

Reputation: 964

In plain Javascript:

var links = document.getElementsByTagName("link");

for (var x in links) {
    var link = links[x];

    if (link.getAttribute("type").indexOf("css") > -1) {
        link.href = link.href + "?id=" + new Date().getMilliseconds();
    }
}

In jQuery:

$("link").each(function() {
    if $(this).attr("type").indexOf("css") > -1) {
        $(this).attr("href", $(this).attr("href") + "?id=" + new Date().getMilliseconds());
    }
});

Make sure you load this function after the DOM tree is loaded.

Upvotes: 13

Related Questions