I have tried refreshing and clearing the cache but it still shows the same old file with no changes. Meanwhile every other browser will show the change made in the css file. I changed the name of the css file and upload it and Safari notices the change and applies it. I don't want to have to change a name file every time. Does anyone know a better solution?
You can add to the end of the file
style.css?v=1 or style.css?v=1.1
works for me
or <link rel="stylesheet" type="text/css" href="<?php echo $filename;?>?v=<?php echo $fileModified ; ?>">
I am solving this issue by appending Last Modified Date of the CSS file as a query parameter, like this:
<link rel="stylesheet" href="/wp-content/themes/wannacat/style.css?ver=1631280487" />
With PHP, you can get it like this:
$version = filemtime(get_stylesheet_directory() . '/style.css');
When the file is updated, Safari (as well as all other browsers) will recognize that they need to fetch the latest version of the file.
Related
This is my first time creating a WP template. I used this tutorial: http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/
I am editing the style.css file that is in the template folder (WCCB Theme - Copy). It is on XAMPP, a local server, so there is no FTPing anything. I edit the file, and refresh my browser and nothing happens. Currently I only have one style in there, making H2s red, and the rest is blank (except for the header comment). Not sure what I'm doing wrong.
1: When I view the source, the file is listed as a stylesheet that is applied.
2: When I go directly to the URL of the file the browser can find it.
3: When I use the developer tools to inspect my H2, it says only user agent styles are being applied.
Initially it appeared as a caching issue, but I have cleared my cache (Chrome). I have no idea what is wrong. How can I get my CSS to udpate?
Go to the template folder (usually under: /var/www/html/wp-content/themes/<your theme>) and edit the file: header.php (don't forget to back it up first!)
replace the line:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
with:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>?v=123" media="screen" />
and refresh the page.
If it wasn't refreshed and you're using WP Super Cache - delete the cache.
Still didn't refresh? run from prompt service httpd restart (it restarts the Apache) and try again.
Worked for me!
I know I had problems like that before. Try ctrl+f5 to do full reload.
Not sure how I fixed this. I deleted the template from the WP admin panel and added it again with a different name and some CSS changes already made. It worked. Now I can change my CSS file and refresh my browser and the changes appear. Not sure what happened.
What I usually do is open the page on the Incognito Mode(Ctrl + Shift + N) - if you are using Mac (cmd + shift + N).
I'm really confused what my Wordpress does with css... I have a plugin that is loading a css using this script:
wp_enqueue_style('shutter', NGGALLERY_URLPATH .'shutter/shutter-reloaded.css', false, '1.3.2', 'screen');
I recently changed the css and now it seem's to be loaded twice. First the older css, then the changed css. On FTP I just see one file.
Why is it behaving like that und how can I fix it?
It's definitly not a Browsercache problem, I tested it in several browser and cleared the cache several times...
Yes, this css cache issue is always make me mad before. But I find the solution.
I don't know how to put it on your function, but here is the idea:
Give command to your html to call new css everytime you modified the css file, call the css with something like "style.css?1202122354" instead of only "style.css". "1202122354" is last modified datetime on style.css
In my header themes, I ussually use this to call my CSS file:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
check out the php functionfilemtime( get_stylesheet_directory() . '/style.css') is outputting last modified time for style.css
Hope you catch the idea, sorry don't know how to put it on your function :D
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 have this head
<head>
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="<?php echo FO_CSS_PATH . 'all.css'; ?>" />
<script type="text/javascript" src="<?php echo FO_JS_PATH . 'jquery-1.8.0.min.js'; ?>"></script>
</head>
FO_CSS_PATH and FO_JS_PATH is correct and fully working on all other browsers.
First of all when I click on a link and open new page, the css is fully loaded (I can see it in developer tools from ie). I don`t think I have any error in my css because if I press F5 (refresh), the page is fully loaded.
So, when I open a page, the css is loading but not working. If I press F5 it is fully working.
PS. I found the same problem on this website: http://forums.asp.net/t/1180199.aspx/1/10, but i'm not working with ASP and there I didn't find a good solution.
First, try with the actual path of the CSS file (no PHP at all) to see if the problem persists. If so, double-check if the problem occurs on another PC with the same version of IE. If the problem is still there, you will have to try another new CSS file that you just created with some random properties just to test.
If it still not work only on some specific versions of IE, I would check for the charset used to create your file (with a great text editor like notepad++). Be sure that the charset used to save the file is the same as the one declared in your php header() or html meta.
It really looks like IE isn't detecting properly the charset of your CSS file or your PHP/html page. When it refreshes, it now detects properly.
EDIT: My sincere apologies! This wasn't an issue with anything but myself - I had a global.css file with correct stuff in it, but below that I included another file with the old CSS in it, in the <head> bit of my HTML. Facepalm.
I have a site I'm developing. I'm using LESS to enhance my CSS to make it easier to write. The problem is, when I change the .less file, the styles rendered in the browser refuse to change. I've looked in the generated .css file, and that updates to reflect the changes made, however the browser doesn't update it's rendered style from the CSS file. I've tried this in Chrome, FF(3 and 4) and Opera, with the same non-updating results.
I've even told the browser to cache nothing, both with PHP and meta tags, to no avail. My Apache config file is almost vanilla, although I am using multiple localhosts (this is a local server). The code used to convert LESS to CSS is given below, and is run every time the page is reloaded:
try
{
lessc::ccompile('global/global.less', 'global/global.css');
}
catch(exception $ex)
{
exit('lessc fatal error:<br />' . $ex->getMessage());
}
There are no exceptions here. the less.php parser checks if the file has been modified, which I removed for a bit, but the CSS file is re-generated on every change, so this must be a caching issue with the browser somewhere... Apache serves up the updated CSS file just fine :-/
Sorry to go on for so long, but I wanted to be clear. If you need anything else, do let me know.
Once I saw in a code the use of timestamp to force the browser to download the css and js files every request, that way:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />
The ?ts=123456789 forces the browser to reload the file whenever the number is different from the previous one.
So I adopted the idea, but instead of timestamp of now, I use timestamp of the modification of file style.css; so it's cached in the browser until be modified on the server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />
I'm using LESS and Laravel, and I finally figured out a good solution:
In my <head> tag, I have:
<link rel="stylesheet/less" type="text/css" href="/less/main.less?ts={{FileHelper::getMostRecentModifiedTimeInFolder(realpath(public_path() . '/less'))}}" />
Then I also created a FileHelper class (based on https://stackoverflow.com/a/6767411/470749):
<?php
class FileHelper {
public static function getMostRecentModifiedTimeInFolder($path)
{
//https://stackoverflow.com/a/6767411/470749
$iterator = new DirectoryIterator($path);
$mtime = -1;
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
if ($fileinfo->getMTime() > $mtime) {
$mtime = $fileinfo->getMTime();
}
}
}
return $mtime;
}
}
I might decide to use this approach only on my local development server and use a different approach for production so that it's not always checking file timestamps on every page load.
Since you can't control browser cache, I would suggest you give versions to your css file. Like global.1.11.css.