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.
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 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!
What does <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> this and other similar IE code lines mean in an HTML5 document?
If I have to make certain css features compatible to IE8 or lower version, does above mentioned code line or html class as mentioned within it helps?
If #2 answer is 'No', then should I use conditional IE stylesheet as mentioned in this article -- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
If #3 answer is also 'No', then what should be done to make css features compatible in older IE versions. Any reference website / demo would be a great help!
This is a conditional IE statement. They are only read by IE. Any other browser will read them as any normal comment, note the <!-- and --> at the beginning and end of the statement respectively. IE has special code that recognizes this comment and uses whats inside the comment as regular HTML. In specific to your pasted code above, the IE conditional statement is applying a class of ie6 to the HTML tag. In this way you can provide IE only fall backs for certain elements by first referencing that class in your css selector. For example .ie6 #header {} will only apply to the header if the IE6 class is present, and that class will only be present in IE6 because of the conditional statement.
Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->
You could use an IE stylesheet if you so choose, either way you would achieve essentially the same result. I personally would use the above method with the class on the HTML tag, and then a separate css file that is loaded normally called ie.css. Inside this file, you would have nothing but IE styles. Note that with this method the stylesheet does not need to be setup in a conditional IE statement. It's only real purpose in being a separated stylesheet is for organizational purposes. I would also only do this if you have a moderate to large amount of IE conditional code. If you have minimal IE fall-back code, simply include the code next to your the code it is fixing inside your master stylesheet.
You can also expand IE support to a certain extent using things like Modernizr and Selectivizr
All the examples you've discussed in the question are aimed at detecting whether the browser is IE (and the IE version), and then trying to deal with it from there.
Please note that this is not considered best practice.
If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.
What I recommend is to look up a library called Modernizr. This is almost certainly a better starting point for what you're trying to do than any of the ideas in your question.
For fixing specific browser features, The Modernizr team also provides a list of additional libraries called "polyfills". Work out which features you need to support, and look through the list to find a polyfill script that does what you need. Some of them are best loaded via Modernizr; others can be run on their own.
I'd avoid doing any browser or version detection, unless it's absolutely a last resort.
One thing to bear in mind when using polyfills: There are a lot of browser features that are missing in older IE versions. There are also polyfill scripts that will help you implement the majority of them. However, please don't think that you can simply include every single polyfill and turn old IE versions into a more modern browser.
The simple fact is that old IE versions are old and slow. Adding polyfills will make them slower. You should carefully consider each feature, and decide whether it's really necessary to polyfill it. Will the site still be usable without it? In many cases you will be better off simply letting old browsers work without certain features.
As #FDL pointed out, use a conditional stylesheet if you've got a moderate amount of styles to apply various versions of IE.
For minimal positioning tweaks, I use html classes (like ie8 or ie9) and just drop the modifications into my master stylesheet.
For example:
.filter-bar .item { float: left; vertical-align: top; }
.ie8 .filter-bar .item { position: relative; top: 2px; } /* fix a gap in IE8 */
1) It means if you have Internet Explorer version 7 and below, include this class inside the html tag
2) Yes, you can have css like this:
html.ie.ie6 .someClass {
color: red;
}
This will only get applied if IE is version 7 and below
3) You can do that too. Sometimes you need to combine both
4) N/A
I am trying to find out if there is a summary for all the css fixes for the classes added (such as lt-ie9, lt-ie8, lt-ie7 etc) in the IE statements as in the code shown in Paul Irish's website: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
if there is no such summary, do I fix the css issues (and add those fixes I come across in books/online) after actually testing the browsers ?
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
A lot of the time, you won't (or shouldn't) need the IE-specific classes. Writing code specific to a particular browser or version is considered bad practice in today's web; in most cases it is better to detect whether the feature you need is supported, rather than checking the browser itself.
This has a number of advantages; the main one is that it frees you from having to learn about all the browser features out there and which browsers support them. It also means that if someone visits your site using another old browser that doesn't have a given feature, your code will continue to work. But it also has advantages for making your code cleaner and easier to work with in the future. There is a library called Modernizr that does a similar thing to the code you quoted, but adds classes according to features supported by the browser. In fact, the same Paul Irish who wrote the code you quoted is also lead developer for Modernizr.
You can check IE's support for various features in various versions in either http://CanIUse.com or http://QuirksMode.org/css/. CanIUse is better for checking newer browser features, but Quirksmode is better for checking the basic CSS features as it has finer grained details.
Many features that are missing from old IE versions can be implemented via "polyfill" scripts. For example, http://CSS3Pie.com/ is a script that adds support for border-radius, CSS gradients and other features to old IE versions. A lot of the time it's better to simply let the browser do its thing and ignore the missing features (eg rounded corners are nice, but the site won't stop working if they're missing), but if you find yourself needing certain features and you absolutely have to support them in all browsers, there's a good list of polyfill scripts here you can try (that list is provided by Modernizr, by the way, so they should all work well with it).
So for the missing features in old IE versions, you shouldn't need the IE-specific classes.
The only time you are likely to need the IE-specific classes is for dealing with browser bugs.
There isn't a definitive list of all known IE bugs (not that I know of anyway), but there are plenty of sites on the web that give details of them and how to deal with them.
First, make sure that IE renders the page in standards mode. If you're in quirks mode or compatibility mode, you may get issues. Avoiding quirks mode in particular will get rid of the worst of the layout weirdness that historically gave IE a bad name.
If you're in the unfortunate position of needing to support IE6, you will need to know about the various bugs it has and how to work around them. There are quite a lot of them, and being able to segregate those bug fixes so they only apply to affected IE versions is important so your IE classes will come in handy.
Later versions of IE have fewer bugs; IE8 is relatively well behaved and frankly doesn't generally require much in the way of browser-specific bug fixes. IE7 can still be problematic though, and IE6 is just horrible. The key here is knowing when you're being hit by a specific bug, and issuing the CSS fix accordingly.
For this, the answer to your second question is: Yes, you just need to test, test, test, and when you see something in whatever version of IE that is weird, you need to investigate it, work out the cause, and if it's a bug, deal with it as appropriate.
Yep, test in each browser, add any thing required afterwards.
There is a service, which may help you to see css features support.
http://caniuse.com/
So you can see which code will make a difficulties in lower browser versions.
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]-->