I've just started maintaining a very large legacy codebase that uses html5shiv. I notice from the documentation that it is supposed to be declared in a conditional comment after the style sheet links like this:
<link rel="stylesheet" type="text/css" href="/css/example.css">
<!--[if lt IE 9]>
<script src="scripts/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
However in my codebase it is declared before the style sheet links and without the conditional comments like this:
<script src="scripts/html5shiv/dist/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="/css/example.css">
I'm just trying to get a better understanding of why the docs recommend declaring in a comment and after the css. Is not doing so going to cause any trouble and if so what sort? The reason I ask is I was considering removing it due to us no longer supporting old versions of IE and was wondering if doing so is likely to cause any issues in newer browsers.
the conditional comments only load the html5shiv code on the condition that the version of Internet Explorer is lower than 9. Other browsers, such as Firefox and Chrome, will also ignore this tag and won't execute the script, thus saving bandwidth.
html5 shiv is based on a simple workaround: it directs IE to create the elements with JavaScript (they don't even need to be inserted into the DOM).
Related
I read this answer to another so question, which is exactly what I need. Although, as stated in the answer, it looks bad in IE7. I would like it to look ok in IE7. The first column does not need to be fixed in IE<=7, but the table (and the first column) should be readable.
Does anybody have any idea how to hide some parts of the CSS in IE7, so it looks like a normal table? If so, you can always fork http://jsfiddle.net/emn13/YMvk9/ to show me :)
You could write a separate stylsheet for IE to use:
<!--[if IE]>
<link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->
<!--[if !IE]>
<link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->
This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.
The second stylesheet there will be used only if the browser is not IE so if everything displays correctly in Chrome and Firefox, you can leave those rules untouched. Then just copy the rules you need for IE into it's stylesheet.
Best practice is to write the CSS so that it displays the same in all browsers, but this is a lot less frustrating!
Hope this helps
Reference: http://www.quirksmode.org/css/condcom.html
I fixed the issues and attached the files http://jsfiddle.net/fJJvG/2/. One thing, you must download the jquery plugin from http://jquery.com/ and put in your header. then you will get the result.
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
Does IE8 not support the following CSS media query:
#import url("desktop.css") screen and (min-width: 768px);
If not, what is the alternate way of writing?
The same works fine in Firefox.
Any issues with the code below?
#import url("desktop.css") screen;
#import url("ipad.css") only screen and (device-width:768px);
css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script's site) it "doesn't work on #imported stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements".
In the same vein you have the simpler Respond.js, which enables only min-width and max-width media queries.
Internet Explorer versions before IE9 do not support media queries.
If you are looking for a way of degrading the design for IE8 users, you may find IE's conditional commenting helpful. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.
For example:
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
This won't allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.
The best solution I've found is Respond.js especially if your main concern is making sure your responsive design works in IE8. It's pretty lightweight at 1kb when min/gzipped and you can make sure only IE8 clients load it:
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
It's also the recommended method if you're using bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9
IE8 (and lower versions) and Firefox prior to 3.5 do not support media query. Safari 3.2 partially supports it.
There are some workarounds that use JavaScript to add media query support to these browsers. Try these:
Media Queries jQuery plugin (only deals with max/min width)
css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers
Taken from the css3mediaqueries.js project page.
Note: Doesn't work on #import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements.
An easy way to use the css3-mediaqueries-js is to include the following before the closing body tag:
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script
src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
Edited answer: IE understands just screen and print as import media. All other CSS supplied along with the import statement causes IE8 to ignore the import statement. Geco browser like safari or mozilla didn't have this problem.
Media queries are not supported at all in IE8 and below.
A Javascript based workaround
To add support for IE8, you could use one of several JS solutions. For example, Respond can be added to add media query support for IE8 only with the following code :
<!--[if lt IE 9]>
<script
src="respond.min.js">
</script>
<![endif]-->
CSS Mediaqueries is another library that does the same thing. The code for adding that library to your HTML would be identical :
<!--[if lt IE 9]>
<script
src="css3-mediaqueries.js">
</script>
<![endif]-->
The alternative
If you don't like a JS based solution, you should also consider adding an IE<9 only stylesheet where you adjust your styling specific to IE<9. For that, you should add the following HTML to your code:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->
Note :
Technically it's one more alternative: using CSS hacks to target IE<9. It has the same impact as an IE<9 only stylesheet, but you don't need a seperate stylesheet for that. I do not recommend this option, though, as they produce invalid CSS code (which is but one of several reasons why the use of CSS hacks is generally frowned upon today).
Prior to Internet Explorer 8 there were no support for Media queries. But depending on your case you can try to use conditional comments to target only Internet Explorer 8 and lower. You just have to use a proper CSS files architecture.
http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php
I used #media \0screen {} and it works fine for me in REAL IE8.
IE didn't add media query support until IE9. So with IE8 you're out of luck.
I'm redesigning my Tumblr blog and I use CSS3 Pie to add some eye-candy to Internet Explorer. The problem with this is that CSS3 Pie uses Internet Explorer specific files (.htc) that can only be served from the same domain as the HTML file, which is something I can't do on Tumblr.
The thing is that without that file the website breaks on IE6 & IE7 (I'm using HTML5 syntax and apparently these browsers don't really like it even with some help from Modernizr).
So, do you know any ways of adding such files from another domain than the one that serves the HTML? No matter how hacky it is.
I would suggest using conditional comments for IE to gracefully alert users their browsers are not supported, or to reformat the content for IE users.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->
Another alternative, which I'm guessing is easier than the ".htc" hack you are suggesting. Is to use a basic java-script redirect. If the user is using IE (less than IE9) redirect them to a simplified, IE only, web page.
Just made a site using great standards compliant semantic HTML and CSS. It looks great in Gecko, Web Kit, but IE7 mangles it (of course). Any progress yet on this front, or do I have to go through a tonne of hacks as is standard with IE.
Try this
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
Or you could write a separate css file for IE7
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
There are several well-known hacks for hiding IE-specific demangling rules from comformant browsers. Most of them depend on IE mis-parsing certain things, e.g. "* html ... { }" which other browsers will ignore. A simple google search will show any number of these.
My rule is first to make the page work in FF (or similar), and then break it so it works in IE.
I find that developing a site first for IE, then adapting it to other browsers is less time consuming than the other way around. But, it's a little late for that!
I would suggest that you have a separate CSS file for IE (just copy and paste and rename current CSS) then have a browser sniffer and script that requests the IE CSS for IE users. Then rewrite just the IE CSS. Does that make sense? At least that way, the site is still up for the other browsers and you're just working on IE.