Menu
I'm working on CSS based library and came across this issue as what is the best way of handling it.
And I know we all have this issue, as IE has some unexpected behaviors when it comes to standard web. So my question is not only for Microsoft Internet Explorer, as there are issues that still presents in Microsoft Edge.
And yes we can handle it using javascript by detecting the browser and the version. But whole idea is to bring it to single CSS file. And the possibility of it.
So using Microsoft provided methods or other css hacks,
<!--[if lt IE 7]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7> <![endif]-->
<!--[if IE 8]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
OR
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
This supports only up to IE9 and it has been discontinued supporting and introduced to CSS queries in the latest. And personally I think this clutter the html markup a bit. Because this looks ugly when we write a CSS based library.
/* For IE 8 & Lower css hacks */
.some-class {
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles */
.some-class {
margin-top: 10px;
}
}
@supports (-ms-accelerator:true) {
/* Microsoft Edge 12+ styles */
.some-class {
margin-top: 10px;
}
}
Well this is much better. And personally I believe this is more suitable when we write a CSS based library. As we will not ask user to import multiple files and confuse the users.
If you notice above CSS hacks & queries, IE9 is missing. So is there a similar way to achieve it? And any other recommended way of doing it? Or any way for handling all IE & Edge version using a single css hack?
626
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.
Open the Google Chrome page Open the Google Chrome page of the specific HTML that you want to inspect. Press "Control" + "U" on the keyboard and a separate page with the source code appears.
Best practice is stop trying to support old IE versions unless you absolutely have to -- unless you have a defined requirement for it, there's not way you need to support anything under IE9 today. And even IE9 is questionable.
Once you've relieved yourself of that burden, you'll find that you probably don't actually need very much (if any) IE-specific CSS at all. And if you do, it can be handled with graceful feature detection rather than hacks.
Use of popular tools such as bootstrap will also help you avoid needing to write any browser-specific styles, as they do the bits that really are necessary for you, and you never need to really worry about them.
I personally haven't had to do any IE-specific styling in some time. If I did find myself needing to, my first port of call would probably be to use the Modernizr library to help me with feature detecting the things I needed to support, rather than trying to do anything specific to an individual browser. Other tools that can help include the various polyfill libraries out there, that try to add support for specific features into older browsers. When I did still need to support IE8, I used to swear by Selectivzr, which helps you with support for some of the CSS selectors that IE6-8 don't support.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
