How can we disable browser cache during application development process so that whenever we make any changes to the css or js files in localhost(or any development environment) we don't have to do a hard refresh on the browser to see the changes
Try this for all css and js. This example you should add time in all css and js
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
or
<link href="/css/styles.css?ver=<?php echo time();?>" rel="stylesheet">
or
<script src="/js/site.js?ver=<?php echo time();?>"></script>
Most browsers (Chrome and Firefox are shown in the screenshots below) have an option in the Network tab of the Developer's Tools to disable caching while the Developer Tools are open.
caching is good for fast development, but in case of chrome you can right click on the refresh button and find the options:
Hope this helps?
Related
is there any general reason for which Font Awesome doesn't show up in IE 10?
Another question - what's the #font-face thing all about? Do I have to use it? I haven't done it so far and it works well in Firefox and Chrome, could that be the reason for IE?
(excuse my ignorance, I'm a complete newbie)
I had the same issue, the actual cause was https secured connection
I was using https protocol changed it to http
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
I Hope it helps
If it is working on other browsers, make sure you are not in compatibility mode or have not accidentally put your site on the compatibility list in IE.
If it doesn't work in others, it has to have 2 classes: fa AND fa-blah (assuming Font Awesome 4.x; Font Awesome 3.x has different notation)
Also, check your developer tools F12 to make sure all the fonts and CSS/JS is loading into the site.
So, I have been asked to fix an issue where a favicon isn't appearing in IE8 at work, but can't seem to figure out why it isn't working. I've even read the official Microsoft documentation on the subject, but haven't managed to get anywhere with this.
I have included the following in head of the site template, where $sitebase is set to http://www.slinkynote.com/ in the config file. The favicon image is a 32px by 32px .ico file.
<link href="<?php echo $site_base;?>favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="<?php echo $site_base;?>favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
Does anyone have any experience with this issue? It appears fine in FF and Chrome.
Thanks,
Dan.
The problem seems to be that IE8 caches the icon in the browsing history (and NOT its temporary Internet files) ... if it fails once in IE, it will not try again for a while (I don't know how long, but long enough to be very annoying) ... anyway, the following simple header links work fine:
<link rel="shortcut icon" type="image/icon" href="/favicon.ico">
<link rel="icon" type="image/icon" href="/favicon.ico">
I'm not sure why you need them both, probably cross-browser compatibility. But the href does NOT need a hostname with www in it, or any hostname at all. It works even on a local machine
However, if IE8 has messed up its cache then this will drive you crazy. Luckily the solution is simple: change the links to the following (just add x) and make sure the icon will load first time (or else you will just mess up the cache again) ...
<link rel="shortcut icon" type="image/icon" href="/xfavicon.ico">
<link rel="icon" type="image/icon" href="/xfavicon.ico">
Afterwards change the links back to what you wanted originally, then the icon will reload the next time and thereafter be cached successfully.
You are using PNG image in ICO file, and setting wrong mime type. Make another icon but ACTUAL icon file and put it in the place of current one.
Whilst debugging a website I found this tag below the body of the page I was debugging:
<link rel="stylesheet" type="text/css" href="data:text/css,">
and I thought that some crazy Javascript-Error was adding this to my site. But I could not find anything like that in all of the project's source-code.
After checking back with Firefox I noticed, that only Chrome displays this tag in the Elements-, Resources- and Network-View. It is not visible in the "View Source" of Chrome though.
What is this about?
I experienced the same strange css link, and found that it is due to the AdBlockPlus (ADB) extension for Chrome that I have enabled. When I disable that extension, the link no longer occurs.
I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>
Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.
Is there any way to add a firefox or mozilla stylesheet?
Thanks for you help
Judi
<!--[if FIREFOX]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->
You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:
#-moz-document url-prefix() { CSS BLOCK }
Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.
You might also try out the CSS Browser selector:
http://rafael.adm.br/css_browser_selector/
This simple JS file allows you to append things like .gecko and .ff3 to your CSS.
* APPENDED - 2014 *
I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.
One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:
Ex:
if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) {
link rel="stylesheet" href="one.css" type="text/css" media="screen"
}
else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}
Also in the preg_match function you should enter the agents that you want.
Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.
No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.
See conditional comments for more details.
No, conditional comments are entirely an Internet Explorer thing AFAIK.
However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>
this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.