As we can see, the approach adds one more HTTP request. For example, IE 8 will load styles.css
and fix-ie8.css
files as separate requests. We can reduce the number of requests by using the conditional comments for the root html
element:
<!--[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><!--<![endif]-->
The root html
element will have an additional CSS class depending on the current version of IE which visitors use. For example, IE 9 browser will add ie9
CSS class. The styles are now combined into a single source
<link href="all-styles.css" rel="stylesheet" />
It contains the fixes for different IE versions:
.card {
background: rgba(0, 0, 0, 0.5);
}
/* Background with opacity is only available on IE 9 and later */
.ie6 .card,
.ie7 .card,
.ie8 .card {
background: #ccc;
}
The issue of the number of HTTP requests is resolved. However, the styles now contain many duplication codes. We can fix the issue by adding more CSS classes to the html
element:
<!--[if lt IE 7]><html class="lt-ie7 lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 7]><html class="lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
Additional styles for card
on IE 6, 7, 8 now can be combined into a single class declaration:
.lt-ie9 .card {
/* Styles for IEs before 9 */
}