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.
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 wrote some conditional comments in my html file and opened it with file://path/test.html. It looked fine. I fired up my app server and pointed my IE 8 browser to http://myserver.com/ap/test.html. the results were different. Can anyone explain why this is happening and what might be done about it?
the source
<html>
<body>
conditional
<p>
<!--[if IE 8 ]>
<p>Only IE 8 will see this</p>
<![endif]-->
<!--[if gt IE 7 ]>
<p>Only gt IE 7 will see this</p>
<![endif]-->
<!--[if IE]>
<p>IE sees this.</p>
<![endif]-->
<!--[if ! IE]>-->
<p>not IE</p>
<!--<![endif]-->
<!--[if (gt IE 8)|(!IE)]><!-->
<p>Every one except IE 8 will see this (gt IE 8)|(!IE)</p>
<!--<![endif]-->
<p>after conditional
</body>
</html>
from opening in file with IE 8:
conditional
Only IE 8 will see this
Only gt IE 7 will see this
IE sees this.
after conditional
With same browser in another tab pointing at app server:
conditional
IE sees this.
after conditional
My goal is to insert one header on IE 8 browsers and a differetn one on all others. So alternate solutions to that problem would be welcome
As of IE10, conditional comments are no longer supported and should not be used.
For best results, the first line in your page should be <!DOCTYPE html>; this will allow older versions of IE to use what used to be called "standards mode" and enable whatever standards support is available for that particular version of IE.
In general, such tasks are better accomplished using feature detection, rather than browser detection. Conditional comments were a proprietary feature supported by older versions of IE; code that relies proprietary features tends to break without warning when said feature are no longer supported.
Without a clearer idea of the underlying problem you're trying to solve, it's hard to know what to advise, but given some scenario that absolutely applies only to IE, one that does not have an easier, more elegant solution, here's one way to detect IE8 that doesn't rely on proprietary features:
var isIE8 = window.document.documentMode == 8;
Unlike conditional comments (which fail when they're not supported), this code will return a value even if the documentMode property isn't available or is removed in some future version of IE.
Hope this helps...
-- Lance
I need to run some css only for IE and not for other browsers.
I was using conditional comments:
<!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]><html class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]><html class="ie8 ie"> <![endif]-->
<!--[if gte IE 9]><html class="ie"> <![endif]-->
<!--[!(IE)]><!--><html class="no-ie"> <!--<![endif]-->
But this code doesn't work for IE11 and reading this article http://reference.sitepoint.com/css/conditionalcomments I discovered that earlier ie versions don't have conditional comments any more.
Then I tried to change the line 4 with this one
<!--[if gte IE 9]><!--><html class="ie"> <!--<![endif]-->
But I can see the ie class also in not ie browsers.
Is there a smart way to distinguish between IE and other browsers?
Thanks!
Answer
You can use Javascript to read the window.navigator property and get the userAgent from the resulting string like so:
var agent = window.navigator.userAgent;
if ( agent.indexOf('Trident') > -1 )
document.querySelector('body').classList.add('ie-css');
Demo Here
If you need versions
You can use UA Parser JS to get a nice object with all the details. This would be a "safer" approach than the above but you must include the library as well:
var parser = new UAParser(),
browser = parser.getBrowser();
console.log( browser.name, browser.major ); // -> "IE 10.0"
Demo Here
Caution
You might be aware of the this but using browser sniffing is an old and bad technique out in the wild. It leads to legacy and unmanageable code very quickly. Try and avoid detecting versions of IE.
Use feature detection instead.
In general, you should not be trying to detect whether the user is on IE11 or not. The latest version of IE is generally on a par with other browsers (in terms of HTML, CSS and JS support) for most use cases.
However, even Microsoft acknowledge that in rare cases you might need to uniquely identify it. For this, they recommend querying the user agent string. See http://msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx and http://msdn.microsoft.com/en-us/library/ie/ms537503%28v=vs.85%29.aspx.
You should not need to distinguish between newer versions of IE and other browsers. IE is a much improved product these days and just as compliant to web standards as Chrome or Firefox.
The conditional comments are just to be used for IE 9 and below.
If there is something particular you need to detect for, feature detection is the way to go. This can be used for all browsers.
Have a look at Modernizr
I'm trying to display a span A if the browser is IE 6 or lower or a span B if the browser is greater than IE 6 or is not IE.
<!--[if lte IE 6]><!--><span>You're using IE 6 or lower.</span><!--<![endif]-->
<!--[if (!IE)|(gt IE 6)]><!--><span>You're using IE 7 or greater or another browser.</span><!--<![endif]-->
This works perfectly in every Internet Explorer version I have, but in Chrome and in Firefox both of the spans are displayed. I'm guessing that they don't recognize this conditionals as they are Microsoft-specific.
Is there a way to this without recurring to JavaScript?
Your first conditional comment should be:
<!--[if lte IE 6]><span>You're using IE 6 or lower.</span><![endif]-->
This is a single comment (<!-- … -->), and will be treated as such by most browsers. Only IE will see it as anything other than a comment, and only IE <= 6 will display the span.
Compare that to what you have now:
<!--[if lte IE 6]><!--><span>You're using IE 6 or lower.</span><!--<![endif]-->
This is two comments (<!--[if lte IE 6]><!--> and <!--<![endif]-->) with some markup in between them. Since only IE understands that the comments are in any way special, other browsers will display the content but not the two comments.
You can find a very thorough guide to conditional comments on Quirksmode.
This works perfectly in every Internet Explorer version I have, but in Chrome and in Firefox both of the spans are displayed.
Well, they would.
Conditional comments are an IE feature. Only. Other browsers treat them as normal comments.
Here is a test case.
As you can see I used two types of comments. Downlevel-revealed and downlevel-hidden ones to support non-IE browsers. For more on this topic, read Microsoft's post on this.
get rid of the second comments and
Only keep:
<!--[if lte IE 6]> code <![endif]-->
You're commenting the code itself, and it doesn't show up.
I have made my site in html5 and added the following to the head section:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="modernizr-1.7.min.js" type="text/javascript"></script>
for some reason when I view my site in IE 6, 7 and early versions of mozilla and safari it only displays the html and the style sheet is not being accessed (there are no styles applied). I don't know what to do, someone please help!
IE6 barely supports HTML4, never mind HTML 5 :P Seriously though. IE6 is 10 years old, it's never going to properly support HTML5. You may find a JavaScript based workaround but it'll be flakey. See http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
I wonder if the problem is your slightly complicated media attribute.
Quoting here,
Since legacy browsers (e.g., Netscape
4.x) only support screen, you can hide all CSS from them by adding a
non-supported media type such as:
screen, projection or simply all
Maybe IE6, 7 and the others don't have full support either and so just fail to load the CSS.