My page's CSS is not loaded properly until refresh it, as shown in the following pictures. I've been surfing on the internet to solve this issue but couldn't find a solution, and source of the problem.
First enter the page,
After refreshing the page
If you include your styles and script by wp_enque.... functions you need update versions your files than all browsers clear this cached files.
Related
I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
I'm working on my website, matthewbellanalytics.com, and I have been trying to make some changes to the contact.css CSS of the contact page. I edited the CSS file and the changes that I was seeing offline weren't reflected online.
Specifically, I changed the background-color:blue, which worked offline as seen here:
I then replaced that file on my hostgator server and I double checked that it was replaced correctly by re-downloading the CSS file from my cPanel.
background-color:blue was definitely still part of the code.
But when I view the website online. background-color:blue, is mysteriously not part of the CSS file anymore.
I assumed this must be a caching issue so I cleared the cache on both firefox and chrome, but still no luck. I then tried opening the website on Opera which I haven't done before so there should be no cache. No luck.
The online page still isn't updating to blue, and looks like this:
Check the css file path. In server the path might vary.
I was able to solve it in chrome, but not firefox, by going into the developer tools and disabling the cache from there under the "network" tab. No other method of clearing cache seems to work.
I am having this problem for long time. Whenever I update my existing stylesheet it not take effect in browser instantly. If I view page source and click on my stylesheet, ex:<link rel="stylesheet" href="assets/stylesheets/theme-custom.css"> recently added codes are not shown. It updates after few hours. This happens both in Firefox & Chrome.
Why this happening? And how can I get rid of it?
Due to performance reasons browser cache loaded css files. So if you update your css you have to clear your cache. You can also reload the page with clearing it by pressing CTRL + R.
At the following linked page you can find approaches how to deliver your css and force browsers to get the current version (like adding timestamps or anything else as parameter):
https://css-tricks.com/can-we-prevent-css-caching/
EDIT:
You can also just disable the caching completely in the settings or developer tools of your browser.
I have come across a strange issue with my company's site, and it seems to only affect my computer. Changes that I have made to the raw HTML are not reflected in my browser (Firefox).
I have taken the following steps to resolving this issue, without any luck:
Ensured that the page was uploaded successfully to the correct directory (downloading the file from the server shows that it is the same file as the one just uploaded).
Cleared my browser history and cache, refreshed the page.
Opened the page in other browsers (IE, and Chrome).
RDP'd into our server and opened multiple browsers that way.
A colleague of mine sits directly across from me and he has opened the page in the same version of Firefox that I typically use and he can see the changes. He and I both work on the site regularly.
The strangest part is that I have made changes to this page before, and they showed on my screen instantly. These changes are still in place and visible, yet some HTML elements that existed before I made those changes do not show on my screen currently (despite still existing in the HTML).
Has anyone else ever experienced such a phenomenon? Is there anything else that I can try in order to resolve this issue?
Have you tried forcing cache refresh? Try it by clicking Ctrl + F5