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.
Related
I am a beginner in web development and I need help from other experienced web developers. For compatibility issues with IE, I came across Paul Irish's Conditional comments but I am very green to it. Where does the code below go, after doctype html or in the head tag?
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class=""><!--<[endif]-->
And what exactly is the code in those classes supposed to be with an example please.
The comment block is designed go in place of the html tag, so after the doctype declaration.
However...
With that in mind- I would tend to urge you to not target IE or worse still, specific versions of IE in your CSS.
You should always strive to create a layout, (HTML and styles) which is(are) cross browser compatible, supporting progressive enhancement and graceful degradation. I appreciate this is not always terribly easy, but in increasingly complex sites it is a far better approach than attempting to specifically cater for differing versions of different browsers, instead of learning how to implement CSS/featuresets supported by all.
In the long run, especially if you are learning CSS- you will inevitably experience initial frustration but you will learn a lot more by not using conditional comments.
As noted in the comments on this answer, conditional comments are basically accepting you are, or will be, introducing error, and coding around it - the point is you should never accept you are introducing error in the first place but code to prevent it from arising at all. You should implement fault tolerance in your CSS by using styles and properties which gracefully degrade.
The code you posted would go just under the doctype declaration.
<!DOCTYPE html>
// THE CODE HERE
The class names are given so that CSS can be applied to certain versions of IE since not all CSS works in every version of IE.
For example you could set an element to have a fixed height only in IE8
html.ie8 #someElement {
height: 200px;
}
THAT code in particular goes after the DOCTYPE tag as it is a conditional replacement for the <html> opening tag.
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6"><!endif>-->
...etc.
<head>...</head>
<body>...</body>
</html>
The classes (ie6, ie7, ie8, etc.) are meant to contain styling to address styling inconsistencies across browsers.
In this respect, you might want to look at Normalize and Reset which aim to make your life a bit easier in terms of cross browser rendering.
You can replace your html-tag with this, so it goes below the doctype. It sets different classes in the html-tag that you can use both in CSS and JavaScript, if you want to set special styling for a certain browser, or if you want to include fallback-scripts for older versions of IE.
I came across this site Better conditional classnames for hack-free CSS
which explains other different ways of using the conditional comments.
It has descsribed three ways of applying conditional comments:
The “bubble up” conditional comments method
The “preemptive” conditional comments method
The “bubble up” conditional comments method without including the conditional comments in the head of the document.
And for more information on different platforms for using the Conditional Comments go to this site http://conditionalcomment.com which has the various codes you seek.
PHP can go anywhere. If you want to use it for browser detection and alternate CSS, place it in the head. And, use it just like any other PHP string in the body. If you check for many different browsers, browser versions, or OSes, then you might want to make it a file and include the file in the head. Just go to you will get the code: killersites
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 have recently decided to completely drop support for IE7 and below for a lot of different reasons. What I wanted is for when the site is viewed in IE7 or below a message saying "Your browser is out of date. Click here to update."
Below is my take on this within the current skeleton I will (hopefully) be using for all my future projects. I know its messy but it works, just wanted to make sure its safe to use and if I have missed out on anything, feedback and bug spotting would be highly appreciated.
http://jsfiddle.net/JcZjY/
Cheers!
Tom.
Aside what's already been stated in the comments, it looks fine to me. If you'll be using HTML5 elements, don't forget to use HTML5shim or HTML5shiv(they're the same) to keep everything working in IE8.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
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.
I'd been designing my website using Firefox 3.up & IE 8 as a reference. I recently happened to see it on IE 7, it looks hideous :[. I thought strict mode was supposed to solve all compatibility issues. I would tweak it for IE 7 but its going to be a hell lot of work.
What do you guys suggest? Should i tweak it for IE 7 or is there another solution to solve the compatibility problems? And how do i avoid such problems in the future? (don't say no one's going to be using IE in the future, but i hope that's true).
The Doctype definition-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I thought strict mode was supposed to solve all compatibility issues.
No, just lots of them.
Should i tweak it for IE 7 or is there another solution to solve the compatibility problems?
Yes.
And how do i avoid such problems in the future
Fix them as you go along. Don't leave IE7 testing until the end.
when you develop you should use something like IETester from the start. Every time you make a handful of significant adjustments to the site, you should take a few minutes and test it in all the browsers you are supporting. IETester will let you test IE 5.5-9 in one or two clicks.
There is no magic bullet for IE compatibility. It's the bane of every web developer, and there is no answer to it. You need to be aware of which things work in IE and which don't and try to avoid using the latter, or have a backup plan ready on how to deal with the problems. With carefully crafted CSS you can usually get to 95+% cross-browser compatibility, which leaves you only with a few quirks you'll need to deal with (using IE specific workarounds, graceful degradation etc.). This does take some experience though; until then, test frequently across all browsers!
Welcome to the world of web development. :o)
For layout, CSS would normally do the trick. Use a specific CSS for IE versions that looks hideous using CSS conditional statements:
e.g.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
See this article for more information. Do not, I repeat, do NOT assume that browsers adhere to all html standards (esp IE). It is a good practice to always test your website using different OS, Browsers and browser versions.