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.
Related
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
I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:
the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html
In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)
When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).
After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.
If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.
This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!
Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here:
https://bugs.chromium.org/p/chromium/issues/detail?id=647151
https://bugs.chromium.org/p/chromium/issues/detail?id=648023
I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):
app.use(express.static('public', {maxAge: '5d'}));
I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer.
I'm sorry I can't explain this problem in details.
Edit: this solution has one major flaw: when I edit my files, the browser still loads the older versions. Therefore, I turn this max-age property off when I wish to see the changes in files. If anyone has better fix, please share.
Try clearing your cache in chrome, then restart chrome and try again.
(A 304 response header is not an error necessarily. It just means that the browser should load the resource from cache. Basically the browser says "Hey, Can I use the same copy of that CSS file that you gave me last time, or has it changed?" and the Server says "It hasn't changed, go ahead and use the copy you have" AKA 304)
If that doesn't fix the issue, you may look into ETags
Not sure how to really categorize this question, but on this page, the file http://d1el287zd12c0j.cloudfront.net/assets/hitgrid-0a8239a14fba0de87431c06cd75774f3.css seems to be completely ignored by browsers. It appears to load successfully and no different than any other css file on the page, but the styles in it are simply not applied to the page.
The content-type, encoding and everything appears to be working as expected. Roughly the same content "applies" fine on my local installation of the app.
I'm at a loss as to what's going on here.
I just check it out and everything went right.
Try to make the filename shorter in the CDN. Large names tend to make error in some way or maybe check if no other stylesheet is interfering with the styles
If that didn't work, answer these questions and Ill try to git it a try again
Which OS are you using?
2. Are you using wordpress?
I deleted mistakly my child theme in wordpress site.
Is there any way I can get CSS contant somewhere cached over internet?
I accidentally wiped a CSS file, the website was still cashed so I inspected one of the elements and viewed the cached css resource and copied it from there.
If you were using Chrome, and had open the style.css file at least once then you may use this method to recover the cache:
chrome://cache/
You will get all the list of cached data there. Then ctrl+f to find the style.css for the same.
Once you find it. Copy all the data => Go Here and paste it in the text box.
See if it works.!
or you can try to open cache:domain.com as well.
I have a Spring App with ThymeLeaf and Dojo that is causing me a problem. The CSS files are showing up aborted in Firebug when I reference them from my HTML file. However, when I go directly to the file by putting a copy of the CSS URL in the address bar, it works. In addition, the Dojo code works, but it fails when it gets to the CSS file. So, I have tried a CSS link only and with Dojo and both fail. I have searched this one for hours, but I cannot find anyone else having this problem.
Thanks in advance,
Joe
Figured out the issue. I turned on debug on the server and tested a JS and CSS file. They both behaved the same from the server perspective and it looked like the CSS file was being sent correctly. So, I tried IE and it worked fine. After reinstalling Firefox, the software works as expected. Wish I had figured out this issue earlier