I'm having a problem with a site that I just made live - I had to correct some CSS issues related to the background and some image placements. Everything of course looks great in VS Code. I open it in Chrome and Firefox and they look completely different - and wrong. Developer tools showed they were using the old CSS stylesheet (which was originally loaded, then replaced). If I open an incognito window, all is perfect. Any reason this would be? I'm new to this (changing careers) so I appreciate your insight!
This is most probably because the css file is cached in your browser. To fix this problem, you can use cache buster in the URL. For ex, your CSS URL is
https://www.abc.xyz/static/css/core.css
So, whenever you make changes in the CSS file, change the URL to this
https://www.abc.xyz/static/css/core.css?version=1.0.1
?version=1.0.1 changes the file URL and hence it is not loaded from cache. Just change the version number when you make the changes to the file so the URL is new again
Related
I'm really confused as to why my browser is not updating my CSS? I've viewed it on other computers/browsers and cleared the cache but the CSS doesn't seem to update in the browser even if it is already updated via FTP.
Here's the link to the github environment that displays correctly:
https://melvinalvarez.github.io/archive2.0/
Here's the link to the url where it doesn't show the changes:
https://www.melvinalvarez.com/
the "image.css" file is not updating in the browser even if it looks updated in the FTP?
What could be the problem? I updated the files together with my index.html but the css files are the ones that does not seem to update.
I attached screenshots of the difference in the css file that does not seem update on the browser. This is what displays via FTP (I use Forklift which I think is similar to FileZilla)
image-one
and then here is what the browser displays (the css code that links the image to the blank div is missing)
image-two
Hope you can help!
I found out that this was a CloudFlare issue and purging their cache would solve the css mismatch. Hope this helps anyone encountering the same problem.
I have developed my portfolio and locally everything works good, though when I upload it on my hosting the CSS renders differently.
I have hard refreshed on Chrome and tried also on Firefox, but still stays different.
What can be the problem and the solution?
This is my network tab
Thanks!
CSS is auto cached by Cloudflare when it is on, try putting “.css?newcache0x” in your HTML tag, where X you add +1 every time you change something in your CSS file, so it will create a new cache.
Example:
< link rel=“stylesheet” href="…/bootstrap-3.3.7/css/bootstrap.min.css?newcache01" >
I've changed my fonts in the server, but the browser get the old version of the css file where fonts are writed, how to reset the cache?, i've tried to delete browser cache and delete the old file css, but they still are getting the old cs, i've tried to reload the server, how to fix that?
I've noticed this happen only in Firefox, which is very annoying, however, if this is the same situation as you here, refresh with SHIFT + CMD + R (if you're on a mac, I presume the windows alternative is CTRL + SHIFT + R)
That'll clear your cache for that page too + SHOULD show your fonts :)
Make sure your browser isn't displaying local fonts — I spent almost one hour trying to figure out how to clear the font cache in Firefox, while the issue had nothing to do with that.
Check your webserver logs : are font files downloaded ? If not, then it's likely you're using local fonts.
Consider this real case scenario :
#font-face{
font-family: SuperFont;
src: url('../fonts/Superfont.ttf'),
}
I copypasted this code from somewhere, removing part of the src definition, not noticing the ending comma which made this line invalid CSS. Therefore the font was not downloaded.
However, since I had Superfont already installed locally, it seemed to work because the browser recognized the font-family. Well, until I decided to change the font file, but keeping the font-family definition to spare further modifications of the CSS file…
Morality : when testing fonts, use an unambiguous custom font-family name.
Have you tried viewing the page in a different browser to ensure the old font isn't still being added to the page?
If you're still using the same CSS file, you can navigate to the CSS file and do a hard refresh on that Ctrl+F5.
Also, I've found that closing the page completely before clearing your cache can help too!
Do a : Ctrl + F5 on your browser
When I update a js file in my asp.net project, I refresh the browser and the change shows up as expected. If I change a css file or an .aspx file, the change does not show in the browser. Not when I clear the browser's cache, not when I restart IIS (iisrestart). What could this possibly be?
PS. I have tried chrome and firefox
Your browser loves to cache files such as CSS, JS and XML docments.
Do a "hard refresh" to tell your browser to download everything again.
Typically, it's CTRL-F5
You can also append a random number to the end of the file name so that it's never the same and the browser will snatch it up each time.
I have observed weirdness like this in chrome, but not firefox.
When you open it in firefox with firebug, are you seeing a 304 code? That might help separate server side issues from client issues.
I've had this problem a couple of times. Adding a random querystring value on the end of the URL for CSS seemed to fix things. So if your URL was /css/styles.css, just put in some code to add a random number on the end so the URL looks like /css/styles.css?random=2345.
We've reached the end of our tether here trying to overcome a nasty and intermittent FOUC in Firefox 3.5.x+ for a new release we're working on.
We've tried:
Disabling Javascript in FF
Using Quirks mode rendering by removing the DOCTYPE
Moving from #import for additional CSS to <link>
Switching concatenation on and off
Removing CSS files from the concat, one at a time
Switching the local cache off in Firefox
etc
Our previous release never exhibited any FOUC issues, so it's something we've done to this release. Changes we've made so far include:
Using Base64 encoded images over Data URIs for all decorative imagery, served via CSS.
Separating 'framework'-related CSS files from page-specific CSS and bundling them as two separate CSS files
To recreate the problem... use Firefox 3.5.x or 3.6.x, then:
Head on over to: http://my.publisher-subdomain.env.yola.net/
Login with username: 'stack#yola.com' and password: 'stackoverflow'
Once logged-in, you should be at http://my.publisher-subdomain.env.yola.net/sites/
Click the Account link in the main nav.
The Account page should load, and you should see a FOUC. If the FOUC does not occur, clear your cache and reload the page.
Your help would be greatly appreciated! :)
UPDATE:
The dev environment is still exhibiting the FOUC, but only if FireFox is running low on memory or has a lot of extensions installed. Latency and rendering speed definitely affect the visibility of this FOUC.
Although this is a very old question, I found it when I was searching for a solution to the same problem. So, I wanted to post the solution for future reference. I just needed to move the reference to my CSS files above the references to external Javascript that needed to be in my header.
I can be wrong, but this could be a concurrent connections issue. According to my Firebug's "Net" tab
the HTML page simply takes a lot of time to load - maybe also because it is on a development server? - and the style sheet gets loaded after the HTML page.
I can't claim to entirely understand what's happening here, but I would try putting the style sheet onto a different domain as a first measure. That should make Firefox establish a connection straight away.
It would probably also be a good idea to go back to normal images instead of data: URIs - that would reduce the size of the style sheet, and data: URIs won't work at all in IE < 8.