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!
Related
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!
I am new to CSS3 concepts and am trying to understand the same.
I assume that the main benefits of using CSS3 is that it eliminates using images for doing stuff like gradients, rounded borders, etc
My question is if I want to support older browsers, say IE8, what are my options;
Will it automatically fallback to some rendering on older borwsers (e.g. normal borders instead of rounded)
Can I get the same effect on older IE browsers (e.g. rounded borders) using some other libraries ? (i.e. rounded borders or gradients on IE)
In CSS3 examples, I see a lot of things or properties like -webkit, -moz, -o , etc What are these used for ? Is there any specific order that is required for these to have older IE fallback support ?
In most cases yes. Sometimes browsers have partial implementations which may differ from majority of others. You can check CSS3 support on this awesome resource - Can I use? - border radius
It shows you information per browser / per version, has annotation about partial supports and shows global support percentage.
For implementing fallbacks on older browsers you would want to use feature detection library like Modernizr. It adds bunch of css classes to html element based on users client and its CSS3 support. e.g.
<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms ....
When it comes to implementation of fallbacks there are different techniques for each different case. Below are examples of fallbacks for background gradient using Modernizr:
/* 1px wide bg.png image with gradient stretched to div width */
.no-cssgradients div.header {
background: url(images/bg.png) repeat-x;
}
/*
IE-specific implementation
Uses filters supported only by IE browsers
*/
.no-cssgradients div.header {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
Next technique you can employ is detection of IE version by using conditional comments. You will have to add following code snipped on top of your index.html
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Now each specific version has it's own set of lt-* classes. Afterwards I create iefixes.css file where I put all nasty ie fixes. It is very convenient as all hacks are in one place and as soon as you drop support for some verison you can easily delete part of them or even remove whole file. e.g.
/* Applied for all IE version < 9 (IE6-8) */
.lt-ie9 .header {
margin-left: 20px;
}
How to create IE-only stylesheet
These are CSS vendor prefixes. CSS browser prefixes are a way for browser vendors to add support for new CSS features. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. No difference in the order applied. Source
There are number of tools which automatically add vendor prefixes, you may want to preprocess your css source during a build, then you don't have to maintain them yourself.
Prefixfree / Autoprefixer
Yes, but not all CSS3 properties are recognized, e.g. keyframe animation
Depends on which effects. There are some libraries doing this.
those are vendor-specific properties. In older browsers / those browsers that does not support the CSS standards, they adopt these vendor-specific properties in order to show the CSS properties. MDN has a very detailed CSS section to tell which CSS requires vendor-specific properties and which doesn't.
1) Yeah, though your mileage may vary. Sometimes it'll fall back as you suggest, sometimes it'll go crazy (if you're doing something particularly complicated). Some things (e.g. animation) have no equivilent fallback.
2) Your best option is http://css3pie.com/ - a quick plugin that adds (most) css3 options to older IE browsers. IE8 usage is fairly low in most countries (approximately 15% globally), though as Raptor points out still high in places like China if the international market is a concern. Ironically, you're probably more stuck on IE6 as there are still some companies using that because of legacy code.
3) The prefixes are/were necessary to make CSS3 work on some browsers. A list of what's currently required can be found at W3 Scools and Can I Use?, but a lot of them have been dropped now and you can go with the vanilla versions.
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 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
Okay, I Ruled out a lot of fancy CSS3 properties for my website, but I would like to include animations.
The way I have made my animations was by using Adobe Edge PR 4. Unfortunately, I just figured out that the HTML5 animations are not compatible with IE8 (Oh, here I go ranting about IE8 Backwards-Compatibility again... )
How can I Put in a message in place of it, which will only appear in Internet Explorer 8 or lower?
It works in all browsers I have tried, apart from IE8 or Earlier. I do not wish to move to flash, as I would like better mobile device compatibility.
You could use a conditional comment...
<!--[if lte IE 8]>
<p>The animations are not supported in your browser.</p>
<![endif]-->