Force the Browser to Use the Newest Version of my Stylesheet

Web hosting, SEO, etc... related
Post Reply
User avatar
Nipuna
Moderator
Moderator
Posts: 2729
Joined: Mon Jan 04, 2010 8:02 pm
Location: Deraniyagala,SRI LANKA

Force the Browser to Use the Newest Version of my Stylesheet

Post by Nipuna » Fri Dec 09, 2011 5:28 pm

When I was finding a solution for why CSS styles don't appear right after applying, I found the solution Here is the link

http://www.impressivewebs.com/force-bro ... tylesheet/

And here is the content of the site. If you have more questions read that posts' comments people left.

If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.


Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.

So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users? Here’s one way to do it:

Code: Select all

    <link rel="stylesheet" href="style.css?v=1.1">  
Notice that I’m pointing to my CSS using the commonly known <link> element. But I’ve also added what’s called a query string to the end of the file name.

The browser will view a file name of style.css as different from a file name of style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.

If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.

You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want. And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.

After reading and going trough the Wikipedia links. I found out the easiest way to do this without editing codes if you don't need to always change styles.

http://en.wikipedia.org/wiki/Wikipedia: ... s_browsers

And again easiest method of them all is (I found this by reading Wikipedia link that I gave above)
Mozilla Firefox and other related browsers

Hold down the ? Shift key and click the Reload button on the navigation toolbar.
Post Reply

Return to “Web Related”