May 8, 2021

How to provide IE only style sheets.

For providing IE-only style sheets, conditional statements allow us to do so in an HTML document.

The first option is to declare an IE-only style sheet inside a conditional comment that targets all versions of IE, like this:

<!–[if IE]>
<link rel=”stylesheet” href=”css/ie.css” type=”text/css”>
<![endif]–>

You can also declare it using the @import directive.

For targeting IE8 and its earlier versions, you can use the following statement: The last part of the conditional comment stands for “less than or equal to.”

<!–[if lte IE 8]>
<link rel=”stylesheet” href=”css/ie_lte8.css” type=”text/css”>
<![endif]–>

Other possible values are lt for “less than,” gte for “greater than or equal to,” and gt, used for “greater than.”

Now, another option is to use multiple conditional comments to provide a different style sheet for each version of IE you need to fix, like this:

<!–[if IE 6]>
<link rel=”stylesheet” href=”css/ie_6.css” type=”text/css”>
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie_7.css” type=”text/css”>
<![endif]–>
<!–[if IE 8]>
<link rel=”stylesheet” href=”css/ie_8.css” type=”text/css”>
<![endif]–>

In this way, you can add IE specific stylesheets to your html document.

It is important to note that this strategy is becoming less popular as newer versions of Internet Explorer are no longer widely used, and it is no longer recommended to use this method to deal with layout issues. To ensure that your site operates properly across all modern browsers, utilise feature detection and progressive enhancement approaches.

About The Author

Nohman Habib

I basically work in the CMS, like Joomla and WordPress and in framework like Laravel and have keen interest in developing mobile apps by utilizing hybrid technology. I also have experience working in AWS technology. In terms of CMS, I give Joomla the most value because I found it so much user freindly and my clients feel so much easy to manage their project in it.