I've just finish a redesign/reskin of a website that's been up for over a year. New html, new css, new images.
How can I force all visitors to refresh their cache so they don't try to look up last year's assets and get a broken page?
I've read about META refresh but this doesn't seem like the right solution. Is this my only option?
simply adding a query-string to the include will make the browser think that its a new file and you won't have to change the name or even update it on all pages at once.
example
<script type="text/javascript" src="myfile.js?v=123"></script>
<link href="cssfile.css?v=321" rel="stylesheet" type="text/css" />
The easiest way is to change CSS file's name and refer to new file.
Related
I am facing a problem with CSS, I am linking it and changing the body color, and nothing has changed, and when I open a view page source, the modification appears on the CSS page already?
Make sure that you type <link rel="stylesheet" type="text/css" href="theme.css"> in the <head> of your html document, the code you tope is correct, both documents are in the same file and that you save your CSS file before you check your result.
If you want a better answer, post your code.
can someone explain what is the difference in accessing CSS in browser by putting question mark ? in the end and why the new CSS is not making any affects on Website.
I have deployed a new CSS on web server but its not making any affect.
I tried to open the URL in browser as below:
www.mysite.com/styles/css/main.css
and it loads the older version of CSS.
Then I tried it as below and it loads the new version of CSS.
www.mysite.com/styles/css/main.css?
After doing all this. New CSS change does not affecting the website. Its still displaying the old design.
Kind Regards
You need to add something after the ? then change it when you change the CSS. What is happening is a browser will cache anything that doesn't change for a specific period, it does that by checking file names. so main.css? is still main.css? Anything after the question mark is a query string, generally it's used to pass data to a particular file. In this case it's just used to change the file string so the browser will update it every time it changes without affecting the file itself.
There are a couple of ways you can handle this, the first is manually changing the version, probably the easiest idea if you have a single header file, as in a template system that always loads the same head data.
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver1/>
Then on next change:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver2/>
If you'd rather do it automatically you can add a bit of PHP script to the css line like this:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?time=<?php echo filemtime('./assets/css/main.css');?>" />
This is essentially adding a value that changes every time you save the file and results in something like this, the next time I save the file that time= value will change:
<link rel="stylesheet" type="text/css" href="http://localhost/refficient/trunk/assets/css/main.css?time=1350305706" />
browser cache is the reason,Adding ? after css is not recommended.Open your hosting space and clear cache and thread pool as well.
I'm looking at this webpage:
http://fortawesome.github.io/Font-Awesome/get-started/
In the first and second method, in order to use the font you will need to add a line of code like this:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Question: Does the entire content of the folder get downloaded when I add this line to my source code? The entire content of that folder is about 1MB however it really wouldn't make sense for the entire folder to get downloaded every time I just want to use a single icon.
Any help would be much appreciated
The content does not get downloaded automatically, you have to download it yourself and reference it in your Project. Alternatively you can use the CDN <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
I'm working on a simple CRUD application to keep track of phones using Webmatrix 3. My Default.cshtml file displays the table.
When clicking on a row it goes to the EditPN.cshtml page for the user to edit the information for that record.
Now, following this tutorial I look into the value of UrlData[0] in my EditPN page.
Everything works fine with just one problem: since the URL ends up being something like this:
http://localhost:64053/EditPN/2223334444 my paths for CSS and JS files are off. My brute force solution has been to have both:
<link href="_css/myStyles.css" rel="stylesheet">
<link href="../_css/myStyles.css" rel="stylesheet">
in my _Layout.cshtml.
That way both http://localhost:64053/Default.cshtml and http://localhost:64053/EditPN/222333444 will have the CSS styles.
Since I don't like that, I tried to format the URL string to be this: http://localhost:64053/EditPN?pn=2223334444. Didn't work.
Tried this too: http://localhost:64053/EditPN.cshtml?pn=2223334444. Didn't work either. It doesn't even go to the EditPN.cshtml page.
How can I solve this issue? Oh, and BTW, I don't want to use the Webmatrix helpers. I want to keep things under JS, jQuery, etc.
You should prefix the url to your css and js files with a ~/, which tells web pages to work out the relative path:
<link href="~/_css/myStyles.css" rel="stylesheet" />
when i write localhost/profil the css works.
But when i write localhost/profil/ the css doesn't work.
app.use(express.static(__dirname+'/public'));
app.get('/profil',[checkCo],require('./routes/profil.js'));
Why?
thanks!
edit:
it's because it thinks that profil/ is a folder, so how can i get around this?
You likely need to use absolute paths within your HTML.
For example, instead of
<link rel="stylesheet" href="style.css">
you need to do
<link rel="stylesheet" href="/style.css">
In the first example, the browser tries to access style.css in the current directory the user is navigated to. So if the user is navigated to /profil/, it tries to load the css from /profil/style.css. In the second example, the browser is told to load the css from /style.css no matter what.