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.
Related
Whenever I make a change on my website I have to clear the cache of my browser so I can see said change. Is there a way to automatize this process? I have seen some similar posts here (suggesting using the cache-control meta tag) but all of them are from years ago, and I would love to get some updated answers. Also, I'm not sure if using those meta tags (eg. ) is the right way, as I've seen some people discouraging their usage.
You can add ?xxx to the css and js filenames and browsers will reload them whenever xxx changes. You won't need to rename your source files.
i.e.
<link rel="stylesheet" href="/animations.css?12345678"></link>
You may have seen content managers do this, with random strings generated on each session to force a reload on first load, and then cache for the remainder of the session.
If this is regarding .css and .js changes, one way is by appending something like "_versionNum" to the file name for each release. For example:
script.css // This is the URL for release 1.0
script_1.1.css // This is the URL for newest release [1.1]
You should also refer to this link for more information.
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'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.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am working on my website and whenever I am adding some new lines to my CSS file, it just doesn't want to use the lines I made.
Yet, they should be alright.
.what-new {
padding:2em 0 4em;
text-align:center;
}
.what-new h3 {
font-size:4em;
font-weight:700;
color:#000;
margin:0.5em 0;
Just as an example.
The CSS file is working at one part, but from somewhere it just stops using my file.
Yet, it is linked in the < head >.
<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>
And my HTML code is the following(note that this is just a part of the code):
<div class="what-new">
<div class="container">
<h3>What's new</h3>
<div class="blog-news">
<div class="blog-news-grid">
<div class="news-grid-left">
<h4>06</h4>
<small>of january 2015</small>
</div>
Anyone know a solution for that?
This means that your CSS rule is not applied or that your CSS file is cached.
The possible causes are:
a CSS rule with a higher Specificity is winning over the rule you expect to be applied
a CSS rule with the same Specificity is loaded after your (the order of declaration counts - the latter wins - so check your CSS file imports)
a CSS rule targeting your object uses the !important keyword.
Inspect how the rules are applied through the browser's Developer Tools (open with F12).
HINT: In the CSS panel, the rules are listed by importance in descending order.
your CSS has syntax errors
your HTML is not well-formed
Use some validator.
your browser is caching the CSS file
Force the refresh of the browser-cached resource by pressing CTRLF5.
HINT: This Q&A explores the subject.
your server is caching the CSS file
Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRLF5 on that page (that is the CSS file).
HINT: To open the CSS file's URL fastly, use Open link in a new Tab from the browser's Developer Tools, or click on the CSS link in the HTML opened with View Source.
You are basically facing a caching issue where your browser doesn't feel like actually requesting the new version from the server and instead uses the one cached in the internal browser cache.
Simply using Developer tools to disable cache will work during development but if your workflow is based on putting stuff online frequently you will eventually face a situation where you are not anymore in control which version of your CSS code your visitors see (and you can't count on them using their Developer tools to disable caching).
In order to prevent stuff like this from happening you should use a technique called "cache busting" which essentially means you will be appending stuff to your resource URLs that will change every time your resource files change. Essentially your CSS URL transform from this
<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>
to something like this
<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/>
There is a lot of coverage about cache busting on SO so you might want to take a look at all available options before deciding how you want to handle the issue.
My personal favorite technique is combining server-side code with mod_rewrite to achieve cache busting. The workflow is as follows.
1) Server side code uses DOMDocument to look up for all resource files in the generated HTML code like CSS, JavaScript etc. and appends a modified timestamp retrieved with filemtime.
Example: /css/main.min.css becomes /css/main.min-1422585377.css in the code that will be served back to the client (browser).
2) When the browser receives the response it will simply have to treat that CSS request as a new resource if the appended timestamp doesn't match the one in the cache (resource with a different name is always treated as a new request).
3) Browser now send a request for /css/main.min-1422585377.css to the server.
4) In order to redirect all requests to the one and only main.min.css that actually exists on the server we use a simple rewrite rule like this
RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]
NOTE: I actually prefer to include timestamps in the filename itself so instead of /css/main.min.css?1422585377 I prefer to use /css/main-1422585377.min.css because some proxy servers like Squid tend to ignore query strings and will treat only the filename part as relevant.
This happens to me all the time when I work on my website on my XAMPP stack on my mac. The solution there is to activate the developer options, and to select "empty cache" from the developers menu. This forces the browser to refresh the css for the page. I am not familiar with developing on other platforms, but see if you can empty the cache in your browser.
Also, check your css and make sure that your syntax is correct, in particular that you have not omitted a "}" somewhere.
Please close the div you start .what-new h3
CSS CODE:
.what-new{
padding:2em 0 4em;
text-align:center;
}
.what-new h3{
font-size:4em;
font-weight:700;
color:#000;
margin:0.5em 0;
}
If your browser is not reflecting the changes made in the CSS stylesheets attached, then try the following :
Right click on your document in the browser window.
Go to View Page Source.
In your code find the link to your attached CSS file. Go to your attached
CSS file and see whether it contains your latest changes. If not refresh
your CSS file and all the latest changes will appear.
Reload your document and the changes will appear.
Open the CSS file in your browser.Reload your CSS file in your browser.
Hope this helps!!
You can disable cache in development mode. For example, for Google Chrome: right click-> inspect->Network-> click on Disable Cache
Then, you don't need to clean cache every single time.
For Django, 'clearsessions', followed by 'runserver' will refresh all the setting in .css file.
You should also clean the cache of your browser.
After suffering a lot and having done all the forms already mentioned here.
I found on my CPanel a application called Cachewall, I just turn it off, and this solve my problem
This may help someone
Mainly its due to caching by your browser.
Either delete cache by going to delete history and deleting caches or as
suggested above just press ctrl+f5 instead of just f5
In my case the mistake was, that I did not have installed package in VS2017 with name Bundler & Minifier. After installation, all changes to eg. main.css changed automatically also main.min.css and Web publishing took actual CSS file.
I am facing the same problem but I found a solution. after adding or changing the css properties in css_2-play.css
<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>
change the CSS file name into something.css
<link rel="stylesheet" href="style/something.css" type="text/css"/>
don't forget to rename the css file in the orignal DIRECTORY.
I forgot to close a { in the CSS file.
That's why all the code didn't show up on the page.
For Chrome use Clear Cache Extension. For download this extension click this link.