I'm building a website and I would like to include different versions of my style sheet based on the document mode the browser is in (not the browser mode).
For example of the documentmode = ie8 I might want to load main_ie8.css but if the documentmode = ie9 I might want to load main_ie9.css
I have a number of users that run IE9 in compatibility mode. This defaults the document mode to ie7 standards. I use the following meta tag to force the document mode to IE9 standards in IE9:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The problem is the browser mode is still set to IE compatibility. So the user agent is still set to IE7.
Since there is no way on the server side to determine the document mode the browser is running in and conditional comments are also based on the browser mode not the document mode, how can I load my css files based on the document mode rather than the browser mode.
Use this code to detect browser mode and document mode.
var j = jQuery.noConflict();
j(document).ready(function(){
/* detect usage of IE Developer Tools using different Mode for Browser and Document */
if(j.browser.msie) {
var browserVersion = j.browser.version.slice(0,j.browser.version.indexOf("."));
var documentVersion = document.documentMode;
}
}
});
Send an ajax 'get' call to a sample.php script:
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//do the settings based on the response from php
/*you can echo the css file name to be picked
based
on browser mode or document mode*/
var response=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://<?php echo IP; ?>/yourapp/sample.php?mode="+,true);
xmlhttp.send();
Hope it helps!
You could run a conditional javascript that tests the document mode, then appends the css. Something like:
if (BrowserDetect.browser == 'Explorer')
{
if (document.documentMode == 7 && BrowserDetect.version > 7)
{
// user is running IE in compatability mode
// load special CSS
}
}
Got this idea from a similar posts' answer at https://stackoverflow.com/a/13732003/3100667
If this is more of an issue of browser support for CSS styling, which it sounds like, you could also work around it by loading shims and polyfills to enable CSS3 support in older IE versions. The popular HTML5 Shiv is a good starting place.
A collection of other polyfills that may help fix a specific problem you're targeting is at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
You can try conditional comments
http://www.quirksmode.org/css/condcom.html
<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>
Related
Sorry for the title ,it is indeed confusing.
I have some javascript code that works in every browser except IE 7 and 8 (it throws errors). So as a work around I would like the code not to run on certaing pages of all browsers where its redundant.
I would like the solution to be in javascript because I only want to disable in some pages instead of apply the rule to all.
I think for example this function can help you to skip the javascripts on javascript side:
http://msdn.microsoft.com/en-us/library/ms537509%28v=vs.85%29.aspx
Or you can do this on php side also:
PHP: If internet explorer 6, 7, 8 , or 9
You can use IE conditional statements in the head tag to include JS only when the browser is IE of a specific version:
<!--[if lt IE 8]>
<script src="myscript.js" type="text/javascript"></script>
<![endif]-->
The code is wrapped in a comment statement on purpose!
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
<![if !IE]>
<script src="script.js"></script>
<![endif]>
I really don't understand you question well. But if you want disable the script of IE
You can try this(for example):
For disabline script for IE -
<!--[if !IE]><!-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
Read this 1
For disabling script for IE 8 -
<!--[if !(IE 8)]><!-->
<script src="path/to/external/script"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
and
<!--[if !(gte IE 8)]><!-->
<script src="path/to/external/script"></script>
<script>
// your inline script goes here
</script>
<!--<![endif]-->
Read this 2
Removing a Script block :
set a id to your script,
<script id="sample">
...
</script>
and use this code,
$("#sample").remove();
I guess what you're looking for is document.location in combination with a browser detectio. But be aware that most browsers can fake the instances. If you're using jQuery I'd suggest you use the $.support property instead of trying to get the user agent.
http://api.jquery.com/jQuery.support/
Greetings
Niveaulos
How can I fix this? eg:
snd = new Audio("foo/bar.wav")
alert("abc") //in IE this line wont run??!
snd.play()
If you detect the feauture (the supported type),
your script will not throw an error in other browsers (mobile etc.),
that doesn't support audio.
You could make it crossbrowser conditional ie.
if (typeof window.Audio != 'undefined') {
/* var snd = new Audio("foo/bar.wav"); ... */
}
or consider to use Modernizr.
IE8- does not support the <audio> element. See http://caniuse.com/#feat=audio. If you can separate your script, you can do this:
<!--[if lte IE 8]>
<script>
alert("Old IE.");
</script>
<![endif]-->
<!--[if IE 9]>
<script>
snd = new Audio("foo/bar.wav");
alert("IE9");
snd.play()
</script>
<![endif]-->
<!--[if !IE]> -->
<script>
snd = new Audio("foo/bar.wav");
alert("Not IE (Or IE10+)");
snd.play()
</script>
<!-- <![endif]-->
IE10 drops conditional comments altogether, so it will use the !IE script.
I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.
<head>
<script type="text/javascript">
var cs;
function nav() {
var txt= navigator.appCodeName;
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>
</head>
<body onload="nav ()">
<p id="cab"></p>
</body>
</html>
This is not really the way to implement dynamic css. Instead you should be using conditional commenting:
<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->
See HERE
Also see THIS answer
You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:
The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.
The JavaScript you've written has a couple of issues:
The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.
If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):
function setCss() {
var cssFileName;
if(navigator.appCodeName.toLowerCase() == 'mozilla') {
cssFileName = 'mozilla-style.css';
}
else {
cssFileName = 'ie-style.css';
}
// Create the element
var cssFileTag = document.createElement("link")
cssFileTag.setAttribute("rel", "stylesheet")
cssFileTag.setAttribute("type", "text/css")
cssFileTag.setAttribute("href", cssFileName)
// Add it to the head section
document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}
As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement
<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->
You also have some syntactic issues in your code, the line
<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />
will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.
What's the shortest javascript code to sniff if the browser is IE8.
I want to do something special just for IE8
I don't want to wire up a library that gives me back all the browsers and the versions.
I just want to write one or two lines to work out if it's IE8.
thanks
zo
The best way I found is to use conditional styles, or conditional compiling:
var isIE8 = false;
<!--[if IE 8]>
<script type='text/javascript'>
isIE8 = true;
</script>
<![endif]-->
Then in your code, you can simply check this value:
<script type='text/javascript'>
if (isIE8) {
alert('Your browser is IE8');
}
</script>
You can do this in HTML, by using this:
<!--[if IE 8]>
<script type="text/javascript" src="IE8.js">
<![endif]-->
Also take a look at this tutorial: http://msdn.microsoft.com/en-us/library/ms537509%28v=vs.85%29.aspx
In your HTML, you can include markup for certain IE browsers using conditional comments:
<!--[if IE 8]>
<script type="text/javascript" src="ie8_hacks.js">
<![endif]-->
I have a segment of HTML code which includes a conditional comment:
<!--[if IE]>
<link rel="stylesheet" ...>
<[endif]-->
This code was tested and works correctly when included in the HEAD section of the page, on the initial page rendering.
I would like to introduce the same conditional CSS to an existing page using JavaScript in an Ajax response.
I have tried:
var comment = document.createComment("[if IE]>\n<link rel=\"stylesheet\" ...>\n<[endif]");
Wicket.Head.addElement(comment); //this is framework code that just appends the element to the HEAD node of the page. I debugged and verified that it's doing the appendChild(...) call.
The above code does not cause the stylesheet to be applied in Internet Explorer 7. Is there a way, using JavaScript, to introduce the conditional style in a way that Internet Explorer understands?
Just to be clear, I am trying to use JavaScript to create a conditional style, not trying to write browser-conditional JavaScript.
You can use conditional comments inside innerHTML as follows:
var div = document.createElement("div");
div.innerHTML = "<!--[if IE]><i></i><![endif]-->";
if (div.getElementsByTagName("i").length) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "ie_only.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
Very simple:
/*#cc_on document.createStyleSheet("ie.css"); #*/
Do you know Modernizr?
Also, it is great to use this in the HTML open tag (replace the no-js with js!)
<!--[if lt IE 7 ]><html lang=en-us class="no-js ie6"><![endif]-->
<!--[if IE 7 ]><html lang=en-us class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang=en-us class="no-js ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang=en-us class=no-js> <!--<![endif]-->
So you can do this in CSS:
.ie7 .myDiv {
foo:bar;
}
Can also be accessed in javascript with:
if( document.body.className.indexOf("ie") > -1 ){
//
}
// or using jQuery
if( $(document.body).hasClass("ie6") ){
}
All this is unnecessary.
public void renderHead(IHeaderResponse response)
if (WebSession.get().getClientInfo().getClientProperties().isBrowserInternetExplorer()) {
response.renderJavaScriptReference(new JavaScriptResourceReference(MyClass.class, "ie.js"));
}
If you choose to use Modernizr be aware of https://issues.apache.org/jira/browse/WICKET-3433