I'm working on a web page project, with an HTML file and a CSS file only. I use Sublime Text 3 for a better programming environment, I also use XAMPP to debug my code and test it on Chrome.
When I'm saving my programming files, the HTML one is saving, but CSS one is not saving; I checked it in the directory and opened it to view if my editions are saved or no, they are, but they don't show up in the debug using XAMPP and Chrome.
Why aren't my changes showing up in debug?
Try deleting the Chrome Browser's Cache. It might be creating that problem
It doesn't let me comment, but this is adding onto the users answer of clearing the browser cache.
Clear browser cache in chrome: https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop
If the issue resolves after clearing your browsing cache, what I usually do when working with stylesheets is use the Chrome browser in incognito mode, it usually doesn't store cache in that mode, so after closing the tab and revisiting, it should show all of the changes.
fisrt try to clear/delete your browsers cache and if that didnt work try the steps below.
Lets say all your css code is in a file called style.css, what you need to do is:
you can just change the name of your file to something else for example style2.css (dont forget to also change the name in html file)
or
create a new file for example new-style.css.
copy and paste all the css code that you have from style.css to
new-style.css.
and lastly just delete style.css.
after that you can rename new-style.css back to style.css Or you can
keep it like that. doesnt really matter as long as you remember to
change the link name in html as well.
It might not be the best way to solve this problem but it works.
Related
I have been building a website for over a month now, nearly completed. All of a sudden, when I make a change to my style.css file, the change does not appear when I refresh the page in the browser.
The strange thing is that, if I make a copy of the file, called style_copy.css, and link to that and make changes, then the changes do appear in the browser.
Does anyone have a clue as to why this is occurring?
I am browsing on Google Chrome (94.0.4606.61) and editing in Visual Studio Code (1.61.0)
Thanks
First, make sure the css file has been saved.
If the file is already saved, then the issue is most likely because your browser has cached (saved an old version of) the file.
Then, try restarting the browser to clear the cache.
Also, try waiting and reloading, the file will likely update by itself pretty soon.
Instead of restarting the browser, you could also hit CTRL + F5
I'm new in VS Code and I'm trying to figure out what went wrong here because css won't work for me. The link is good because it opens with click + ctrl. Both files are in the same folder. So why isn't it working?
Edit saved:
Seems like you didn't save index.html. See the round dot? It means it's not saved.
Your code seems fine. Also, it's always better to use a browser than using built in preview.
Use an browser and save your files changes for see your proyect.
Save file and try opening it with a browser. I always prefer browser to test a file. Sometimes 2 browsers if it has a problem. I suggest you to use sublime text 3 or notepad ++ with vs code because it can save you from a lot of headaches. :)
When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).
For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!
All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.
Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.
I am using Microsoft Webmatrix to do my coding.
I am using the Chrome Web browser.
I am using Hostgator hosting.
I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?
FIXED!
changed: https://example.com/app/source/css/main.css
to this: https://example.com/app/source/css/main.css?v=1
You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.
One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.
Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.
I was working on some CSS code and then suddenly the server stopped reflecting any changed made on the server. At first I thought it was a caching problem but I disabled caching on my browser and even tried using different browsers but still it's using the old version of my CSS file.
If I download my CSS file from the server and open in the text editor, it shows all the changes I made to the code but they don't reflect on my website at all. The site is using old version of the CSS file that doesn't even exist anymore on the server.
What on Earth is happening with my server? Can it be a router caching problem?
I can't answer this but try to add in your html, where you include the css this: ?v1.
Example: src="resources/yourDir/style.css?v1"
This will force everything to download the new css.
You can add after the ? everything you want. Like a timestamp, just a number or words. Whatever you like.
I am making php website.
but there is some problem with css.
i have copied some of the css from my previous project to the new project.
and if i change something in that css , it is not reflecting in the browser (chrome) even in the inspect elements the added css lines are not visible.
it is the case with every css , in my project/website.
for solving this what i do is i rename css doc , after renaming all the existed lines plus added lines reflects. now if again have to add something again i have to rename the sheet.
May be my browser refers to the old copy of css.and if i change in to that it still refers old copy.
Solution please
You can prevent caching by adding a timestamp to the end of the src attribute:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
While working on such changes that can be cached by your browser, keep the developer tools window open in chrome and check "Disable cache" checkbox in Network tab of developer console. Now after refreshing chrome will always load new changes.
Reference: https://stackoverflow.com/a/7000899/3896470
Adding a version parameter to CSS file URL will help you avoid such issues in the production environment because if something is cached in your browser then it will get cached in your customer's browser too.
Example: link/to/css-file.css?ver=1.0.1 (as answered by #Marek in https://stackoverflow.com/a/35251312/3896470)
I can't add comments so added as answer.
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 StackOverflow uses this technique.
Browser gets old version of CSS file from cache.
To see your changes you can:
Clear browser cache
Change URL to your CSS file
You can just add 'ver' parametr to your url:
link/to/css-file.css?ver=1.0.1
#Shipow solution is good but only if you making changes locally. Don't use this solution on your production server because when you add current timestamp to URL, your CSS file URL will change on every page reload. And your customer's browser will always download this file because URL to this file is every time different.
You have a cache issue.
You may disable cache on your apache server configuration.