Is there a straightforward way of targeting CSS for IE10 and below? IE11 works fine (the CSS I'm using is now supported) but I need to add specific CSS for anything below.
I know I can use this up to IE9:
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
But conditional comments are not supported in IE10, and I don't want to target IE9 in the content meta tag as I want to use 11/Edge by default (I don't want to be stuck in the past!).
Using IE specific media queries isn't an option as that will apply the CSS to IE11 as well which I don't want to do. The reason I want to target anything below IE11 only is that I have a set of 'backup' CSS that I want to apply when the default 'proper' CSS (which works with IE11, Chrome, Firefox etc.) can't be applied.
I also tried doing it backwards - having the backup CSS as the default and then having the good CSS specifically target:
IE11+ using _:-ms-fullscreen :root
Chrome using #supports (-webkit-appearance:none)
Firefox using #supports (-moz-appearance:meterbar)
But this didn't work, as IE11 was still picking up parts of the default CSS. Chrome and Firefox displayed the specific CSS correctly but then had all sorts of other issues with the rest of the site styles.
Any ideas on how I can specifically target IE10 without also targeting IE11?
Thanks
Don't check for browser but rather the feature you are trying to use. Modernizr allows to check if a specific feature is supported in your current browser or not -> http://modernizr.com/
Also checking for browser in IE 11 won't work like you would expect, they changed the agent name from IE to Mozilla (read more)
Here is more info regarding #support and modernizr -> http://demosthenes.info/blog/964/A-Browser-Native-Modernizr-Using-supports-in-CSS (scroll down a bit)
Just used this on a website I'm doing for a client to target IE10 and 11:
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
var userAgent = $('html').attr('data-useragent');
if ( userAgent.indexOf('MSIE 10.0') >=0 || userAgent.indexOf('Trident') >=0 ) {
/* YOUR CODE */
}
This adds the attribute data-useragent to the HTML element and populates it with the navigator.userAgent (a good way to identify the browser). Then it uses the 'if' argument to detect a particular string in that attribute, for example IE10 has MSIE 10.0 and IE11 has Trident.
Hope this helps somebody!
Related
I have very little knowledge of coding. I am trying to do research on behalf of our front-end developers. We want to redesign our portal application using CSS 3 and HTML 5. Our main aim is to have an adaptive layout to match the different browser widths our users have access to. There is also excessive usage of iframes in the portal which is why we want the app to adapt to the full browser width. Our users primarily use chrome, firefox but a handful are still using ie 8 with no scope of upgrade. I need advise on the best ways to go about creating visual design using HTML 5 and CSS3 that would render on IE 8 without breaking. Is it possible to create the application using HTML 5 and CSS 3 that would automatically switch to a simpler but efficient layout when the user opens the application in IE 8. Please help.
modernizr.com
jquery.com
see caniuse.com for a listing of unsupported features in your IE and chromium versions.
You should use the HTML5 shiv. It enables the use of HTML5 sectioning elements in legacy IE and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. Include this file: https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js
with this line in your header:
<!--[if lt IE 9]><script src="your-path-here/html5shiv.js"></script><![endif]-->
You can also add a conditional tag to give your HTML a class when the browser is IE8 to add IE8 specific styles when you can't get CSS3 to work.
<!--[if lt IE 7]><html class="ie ie6 lte9 lte8 lte7"><![endif]-->
<!--[if IE 7]><html class="ie ie7 lte9 lte8 lte7"><![endif]-->
<!--[if IE 8]><html class="ie ie8 lte9 lte8"><![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9"><![endif]-->
<!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
By using these conditional tags, you can then overwrite a rule that doesn't work in IE8 and make it work for that browser only. For example, .ie8 .button-style
Something else you can do to support CSS3 elements like drop shadows, gradients, transitions, etc is to use CSS3 Pie. PIE makes it possible to use CSS3 in older versions of IE by including a small JS file.
display: inline-block is your best friend. This property will specify that if two things fit inside of their container side by side, do that, otherwise stack them vertically. If you're having a positioning/display problem, try applying inline-block. Unfortunately, it doesn't work in some older IE versions without this hack:
display: inline-block;
zoom: 1;
*display: inline;
IE8 does support some CSS3 properties. You should check on caniuse.com. Also, for the best cross browser support use CSS3 vendor prefixes.
Good luck!
I'm writing a program to convert documents into HTML pages. The source documents can contain embedded images; I'm converting them into data: URIs to make the resulting HTML page a self-contained document.
This is where I run into a problem: Internet Explorer before version 8 doesn't support data: URIs. Requiring IE8 or newer is acceptable, but I want to make it clear that IE7 isn't working -- missing images may not be obvious enough. Is there something I can put in the markup to make older versions render in an extremely broken fashion, or not render at all, without affecting newer versions or non-IE browsers?
I'd prefer to do this through HTML markup rather than Javascript, to ensure it works even if scripting is disabled.
Wrap what you want / don't want in IE Conditional Comments.
See here for details...
For example:
<!--[if lte IE 7]>
According to the conditional comment this is IE 7 or lower<br />
<![endif]-->
As has been suggested - the conditional tags for IE should do the trick.
Example:
<!--[if lte IE 7]>
<style type="text/css">body{display:none;}</style>
<![endif]-->
The question asks how to keep the page from rendering in IE7 - my previous answer provides the correct example using CSS to hide the body of the page from IE7 or lower. How ever, after reconsidering the question the actual solution would be to wrap the entire page in the following IE condition:
<!--[if gt IE 7]>
<![endif]-->
This would prevent the rendering where as my previous answer just hides it. Only IE 8 and above would render the content inside the condition.
I have been driving myself nuts trying to get comment conditionals to work and I'm not having any luck can someone explain what I'm doing wrong?
Here is my code:
<!--[if IE 10]>
IE IS VERSION 10<br />
<![endif]-->
<!--[if !IE]><!-->
Browser is not IE
<!--<![endif]-->
<!--[if lt IE 9]>
IE IS LESS THAN VERSION 9<br />
<![endif]-->
What is happening is frustratingly inconsistant. When I load the page with the above code in IE8 it get the message "IE IS LESS THAN VERSION 9" Great right? No because when I load the SAME PAGE in IE10 I get the message "Browser is not IE"
Why does it think that IE10 is not an IE browser?! I've been crawling page after page but there doesn't seem to be any thing wrong with my code from what I've found.
CSS Solution:
If you want to apply only CSS base on browser then you can try:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Put your IE-only styles here. Works for IS 10 & IE 11*/
}
JavaScript Solution:
IE 10 does not support conditional statements.
Conditional statements in Internet Explorer 10.. It will treat conditional comments as regular HTML comments, and ignored entirely.
Use a feature detection library such as Modernizr instead of browser detection.
found a solution on impressivewebs in this comment:
Here is Demo to test
The solution is:
if (Function('/*#cc_on return document.documentMode===10#*/')()) {
alert('IE 10');
} else {
alert('Not IE 10');
}
It
doesn’t need conditional comments;
works even if comment stripping compression/processing;
no ie10 class added in Internet Explorer 11;
more likely to work as intended with Internet Explorer 11 running in Internet Explorer 10 compatibility mode;
doesn’t need standalone script tag (can just be added to other JavaScript code in the head).
doesn't need jQuery to test
I'm surprised that no one has added in a css-only solution. If you just want to use css, then use a statement like this:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Put your IE-only styles here. Works for IS 10 & IE 11*/
}
This way you don't have to rely on jquery, or any html markup. Just post it in the css and you are good to go.
Now, is it a hack? Likely. This depends on using the microsoft high-contrast tag, but since no other browser uses the ms tag then you should be good to go.
Finally, check out these pages for more info:
Blog Post
MS Site on the contrast tag
IE 10, 11 and upward no longer support conditional comments.
See this answer: https://stackoverflow.com/a/22187600/1498739
Try add the following meta tag near the top of the page to opt into Internet Explorer 9 behavior:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This is because conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers. This change can impact pages written exclusively for Windows Internet Explorer or pages that use browser sniffing to alter their behavior in Internet Explorer.
IE 10 dropped conditional comments.
You can do something similar in javascript like this:
if ($.browser.msie && $.browser.version === 10) {
// stuff here (like adding an IE10 class to the body or html tag
}
I have this code in my HTML:
<!--[if lt IE 8]>
<script language="javascript">
alert("This page does not display properly in versions of Internet Explorer earlier than 8.\nPlease upgrade to IE8 (or later).");
</script>
<![endif]-->
However, the alert is triggered even when the page is accessed with IE8 whether IE8 is in Compatibility View or not.
Any advice is appreciated.
Regards.
AFAIK, Comp View (Quirksmode) is not enough to test IE stuff. You need the IE F12 (Developer) Tools - they should be included by default. There, you can pick what version of IE to use (Browser Mode) for your page. It has always worked for me. Of course, it is not 100% accurate, but its the closest you will get to an actual copy of the previous versions of IE
You can put some version-specific styles in your CSS then detect them using JavaScript.
.test {
margin-left: 8px; --> for all browsers
_margin-left: 6px; --> for ie6
#margin-left: 7px; --> for ie7 and below
}
Query out the value of margin-left and you can then detect IE7 and 6 easily.
Is there a way — for example with something like <!--[if IE 8]> — to get a stylesheet only for IE8 and IE in «Compatibly View»?
I ran into a (SharePoint-Layout-)Problem, which only occurs if IE8 is in «IE8 Compat View»-Browser-Mode, but works just fine if IE8 is «IE8»- or «IE7»-Browser-Mode. If I get the stylesheet only with <!--[if IE 8]>, the css will be ignored if IE8 is in compatibly view because it 'behaves like IE7' — the css will only be loaded if IE8 is in «IE8»-Browser-Mode. But I need it also if he is in the «IE8 Compat View»-Browser-Mode.
See the SO post "Detect IE8 Compatibility Mode", in which user Mark Kamoski mentions the Microsoft article Defining Document Compatibility.
If you browse to the section Determining Document Compatibility Mode, you can use a test on document.documentMode (and document.compatMode for older browsers) to determine the mode. I don't know of how to roll this into a purely CSS implementation, but you can dynamically generate some CSS using some code to achieve this.