I'm building a website which I am using XAMPP to test. I am really struggling with the design because whenever I have refreshed the localhost webpage in the browser, the design changes do not seem to have been applied. Last time I finished implementing, I closed XAMPP and my HTML/CSS editor, and when I've opened them and loaded the page again, some of the changes that had previously not been applied were now applied to the page.
I tried to change these values again and refresh the page, to see if it was finally working as expected, and the latest changes failed to apply again.
I have literally no idea what is going on, but it would seem that the changes can only be applied when XAMPP is newly started and the page is loaded for the first time. Can anyone suggest why this might be?
Thanks in advance,
Mark
You could try a cache busting technique where you include your CSS file. Add a ?v=<some numbers> at the end of your CSS file's location.
Something like:
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=e031e80c3d8b">
You could use PHP's time function to generate the hash for you. As it's a Unix timestamp it will change each time you refresh.
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=<?php echo time(); ?>">
Though I wouldn't consider this a long term solution. Without additional info it's hard to make any possible XAMPP related suggestions.
As mentioned in the comments this may be a cache problem. You can use this simple PHP code to add timestamp version automatically without having to set numbers each time you make an update:
Define the timestamp variable
<?php
$timestamp = date("YmdHis"); // output: 20150715164614
?>
Add timestamp to files
<link rel="stylesheet" type="text/css" href="mystyle.css?v=<?php echo $timestamp;?>">
Alternatively, you can disable caching altogether by sending these PHP headers
header('Expires: Sun, 01 Jan 2014 00:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');
quite an annoying little problem with numerous threads with suggestions for solutions/workaround. Emptying the browser cache (Safari) worked for a while for me but simply restarting the Apache servers from the Xampp manager after making the CSS stylesheet changes seemed to work best. I repeated a couple of times to test and after It even seemed to get the developer tools window to work on the fly consistently which it was not doing in XAMPP at all prior. Hard refresh appeared to have no effect interestingly, hope it helps!
I was having this issue too and I'm posting this answer as soon as I found the solution. Having read this thread before (thanks to the earlier answers provided), I knew it had something to do with the cache. Glad I found it now
Access your Developers tools through Inspect and select the Network menu toolbar above. Next, click on Disable cache and reload your webpage.. TADA!!!
Unfortunately, it seems I cannot post images
rename the folder and change path in your css file
Related
We're having a weird problem at work that happens only in chrome. It looks like the css file is getting cached and the content of this file isn't getting re-downloaded.
The problem is that when using a fresh session for example "private session", the image "mainSprite.png" isn't getting displayed.
After some tests, I believe the problem is related to us doing redirects at the beginning if the user isn't authenticated. From what I understand, it might not complete the download of the sprites linked inside the css files. It will cache an invalid object as soon as the redirect starts and then on the following pages, it will fail to display a correct image since it cached something wrong.
The strange thing is that it actually loads the image completely at some point. But it looks like it's not refreshing it in memory...
I did a timeout of one second before starting redirects on first load and images correctly display. This is a quick fix and I can't expect every computer to load in 1 second every images contained in the css.
edit
As far as I can say, it really looks like a race condition. I changed the order of loading. We use require.js. Instead of loading js after css, I start js loading before. And images are getting loaded correctly now on my local server.
if someone is interested to look into it:
http://api.checklist.com
edit 2
When images aren't visible, opening new tabs will have the same problem. Closing the browser and reopening it will work on first load and images isn't being downloaded but loaded from Cache which means that before closing the browser, the image was indeed downloaded.
It looks like the problem coming from your redirects unfortunately i couldn't see your example ( link won't open ). Google chrome has indeed issues with caching it's annoying during development time ( clear up the cache, load new image, do the same for new image..), if you need to clear your cache try the folowing:
try to go to
chrome://chrome/settings/clearBrowserData
in your chrome browser and check the options:
Empty the Cache( i have also Clear download history and Delete cookies and other site and plug-in data )
click on 'Clear Browsing Data' button it should
All what you need to do is to trace your cash list via chrome, and from what I see is that you got this error which make it not cached:
Uncaught TypeError: Object [object Object] has no method 'placeholder'
So if you want to trace, you can use the manifest offline mode or you trace via your code.
Just following and test your page, I did catch where the error is:
file: scripts2.js Line 20 --> $('input[placeholder]').placeholder();
which you need to check the name of the place holder and change it here in this tag.
Thank you
I assume your server/backend app has routes set up. Like this Play! framework example:
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller} {controller}.index
According your summary I suggest to set up a static folder route (where the images are) in config file or htaccess as you want, then check image url in browser url bar (with empty session). That should work!
First I would suggest that you first try to find ways to narrow the redirects. If it possible I would suggest that it would be much more advisable to try to create your content dynamically based on your users authentication using languages like PHP or ASP (just to name two).
The classic way of disabling the caching on a webpage is to set two <meta> tags inside of your <head> </head> tags. However, you should note that these are technically not "correct" as they are not part of any of the "offical" standards documentation. This also means that I would again lean towards my first suggestion of finding a better delivery system which in turn should prevent the problem.
So for "testing" purposes the tags would be:
<HEAD>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
</HEAD>
Maybe I don't understand your question or dilemma (maybe because of lack of explanation or because I can't see your page at that link since I run Chrome), but there's an example I ran across here that works in Chrome by just using Javascript/jQuery to load, instead of CSS:
http://jsfiddle.net/2Cgyg/6/
Use image at URL: http://www.w3schools.com/cssref/img_tree.gif
And although the accepted answer didn't work for me in Chrome, this is the question I got the jsFiddle above, from:
Load Image from javascript
All the caching, etc. is unnecessary, and even something you wouldn't want to do if your images are ever updated to something else - they won't appear without forcing a refresh which you can only do through altering the file name like this to avoid users not seeing your updated image:
myPic.jpg?MMDDYYYY
And you could set the date according to the date you are modifying it.
clean your browser history like cache,cookies
clean the temporary internet file
if problem not solved then reinstall browser your problem is solved definitely
For some reason I can't get the new css to be used in firefox or ie's browser.
I am using php to consolidate all the css into one file, then output it like so:
PHP file:
header('Content-type: text/css');
readfile('layout.css');
readfile('a.css'); //jqueryUI
Here's how I call it from the HTML side:
<link rel='stylesheet' href='stylesheet/css.php?v=1327523109' type='text/css' />
The "v" querystring parameter is simply a php time() function from a tip I got on another search for the problem. Hoping the time() would trick the browser into not loading the cache version, but it is not working and still loading the old css.
When I look in firebug's css file it shows the old css file. However if I directly access the .css page through the url, the output to the browser screen shows all the new css code.
if I render the same page in the chrome browser it shows the new css without any problem...but ie and ff show the old css.
I don't understand what's going on and how to fix it. Can anyone help me?
ctrl + shift + del In both browser will allow you to clear your cache, cookies, temp files, and more via nice checkboxes.
Perhaps the css file is cached in the browser. Try CTRL+F5. If that doesn't work try clearing the cache, if that doesn't work try a reboot. :D
I tried CTRL+F5, Clearing the cache, rebooting...none of that worked right. Then I decided to change the ordering inside the css.php file for the readfile() functions. Once I moved the ordering around it triggered the new css to load. I don't know exactly why this worked, but now the new css loaded.
Decided to answer this here in case someone else comes accross a similar problem and the traditional cache clearing doesn't fix it.
Here is the trick, instead version, just use the PHP filemtime() Function to show your last modified file.
<link rel='stylesheet' href='stylesheet/css.php?<?php filemtime('stylesheet/css.php'?>' type='text/css' />
So every time you modified CSS file, the browser will know what file must be loaded.
hope it help..
When I make a page, link it to a CSS file, and open it in a browser, it works fine.
But if a make a change and refresh the page again between very short time periods, the change is not reflected. But after sometime, when i refresh the page again, the changes appear.
So, somehow the browser keeps the CSS file cached and expires it after sometime. How to make the browser cache no CSS or HTML file.
It would be better if i can block it on a particular domain.
I'm on Ubuntu, using Chrome and Firefox, trying to prevent browsers from caching CSS files on 'localhost'... How to do it...
Thanks...
Something as simple as this should work:
<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}">
Just replace {CURRENT_TIMESTAMP} with the actual timestamp in your server side code. This makes the browser think it's a new file because of the query string and it will be downloaded again. You could also use the actual modification time of the file (filemtime('/path/to/css/screen.css') if you're using PHP) which should prevent unnecessary downloads.
You can open Developer Tools by pressing Ctrl+Shift+J and then you'll find a cog icon in bottom right. When you click on it you should see an option to disable caching.
It would help to know how the website is hosted, as you can configure this in most web servers.
Also, it's a good idea to introduce a cache busting mechanism which would modify the links to the CSS files in question when you change the CSS files' contents. Browsers would then reload the CSS file because the HTML refers to a different URL.
A good example of a cache busting mechanism is the ruby on rails 3.1 asset pipeline which also minifies files and gzips them if the browser supports them:
Rails 3 - Asset Pipeline -- What does it mean to me?
http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/
The seemingly-inelegant but rock solid approach is to give the asset a new name, when the content changes. This solves the problem for all your users, not just you:
<link rel="stylesheet" src="/css/screen_034.css">
<link rel="stylesheet" src="/css/screen_035.css">
<link rel="stylesheet" src="/css/screen_036.css">
Or maybe (but it's more of a pain to change in an IDE, and sometimes causes unrelated problems with caching):
<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034">
Nothing else works quite as well in large scale production environments, where millions of copies of an older css file may be sitting in various intermediate or browser caches. Some clients ignore cache control headers, and you don't really want caching subverted anyway, at least not in production.
In development you can press Ctrl+Shift+J (Chrome) and turn off caching.
In some sourcecodes i see this:
<link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" />
Now is my question: why do people print 201007071609 behind style.css?
This forces the browser to not load the css from cache and rather take the latest version from the server
see related article
Another trick developers do is to add a random string or a timestamp to force refresh the css page.
That's a way to make sure that clients don't cache older versions of the same file. If the URL is different, the client will retrieve the file from the server instead of from cache. So, for example, if a new version of the site was published, that would be a way to make sure visitors see the right CSS.
This forces the browser to retrieve a fresh copy of the file, rather than loading a cached version. This is important when your html has changed and requires an up to date css file to prevent it from displaying incorrectly.
When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
The fix is called "hard refresh"
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.
In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.
Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.
If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.
<link rel="stylesheet" type="text/css" href="styles.css?version=51">
A good way to force your CSS to reload is to:
<link href='styles.css?version=1' rel='stylesheet'></link>
And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.
I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.
I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.
CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!
Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff
This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.
Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.
To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
The Ctrl + F5 solusion didn't work for me in Chrome.
But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):
As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
Select "Empty Cache and Hard Refresh".
Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
While results in a URL like:
http://example.com/blah/main.css?version=1602937140
This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.
If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.
Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.
If you're using ASP.NET web forms, make sure that you are using the right theme:
I just spent about an hour trying to solve this!
Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.
Also the last CSS declaration takes precedence.
I faced the same problem. Renaming the file worked for me.
The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).
You can also empty the caches in most browsers with the following keyboard shortcuts.
Safari: Cmd+Alt+e
Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)