CSS hacks are always useful for Web Designer and Developers. It become very handy when you are fixing up browser compatibility issues. If you know different types of CSS hacks you can save your time and increase your productivity.
If you are a Web Designer or Developer and looking for a CSS hacks then this post going to help you. In this post I am going to share 4 different types of CSS hacks you can use.
Here's the following list:
Following are the good example of Conditional stylesheet for Internet Explorer. Conditional comments used easily to specify stylesheets that should only be loaded in IE, or even in specific versions of that browser. Don't worry about Non-IE browsers, it treats conditional comments as HTML comment.
Above CSS hack used differently in specific versions of IE, it would look something like this:
If you don't want to use CSS hacks, you can apply conditional classnames to the
This allows you to keep your browser-specific CSS in the same file:
Here’s an overview of the four most popular CSS hacks and which browsers they’re supposed to target:
In the HTML, you can use a minimal version of the conditional classnames technique, like this:
You can then use
as a styling hook in CSS selectors to target IE8 and older versions. Combined with CSS hacks, you can finally target IE8 and older versions without also affecting IE9:
If you have any opinion, please leave a comment or share this post.
If you are a Web Designer or Developer and looking for a CSS hacks then this post going to help you. In this post I am going to share 4 different types of CSS hacks you can use.
Here's the following list:
Conditional stylesheets
Following are the good example of Conditional stylesheet for Internet Explorer. Conditional comments used easily to specify stylesheets that should only be loaded in IE, or even in specific versions of that browser. Don't worry about Non-IE browsers, it treats conditional comments as HTML comment.
<!--[if for IE 8]><link rel="stylesheet" href="for-ie-8.css"><![endif]-->
<!--[if for IE 7]><link rel="stylesheet" href="for-ie-7.css"><![endif]-->
<!--[if for IE 6]><link rel="stylesheet" href="for-ie-6.css"><![endif]-->
<!--[if for IE 7]><link rel="stylesheet" href="for-ie-7.css"><![endif]-->
<!--[if for IE 6]><link rel="stylesheet" href="for-ie-6.css"><![endif]-->
Above CSS hack used differently in specific versions of IE, it would look something like this:
/* Main stylesheet */
.test { color: black; }
/* for-ie-8.css, for IE8 and older */
.test { color: red; }
/* for-ie-7.css, for IE7 and older */
.test { color: white; }
/* for-ie-6.css, for IE6 and older */
.test { color: black; }
.test { color: black; }
/* for-ie-8.css, for IE8 and older */
.test { color: red; }
/* for-ie-7.css, for IE7 and older */
.test { color: white; }
/* for-ie-6.css, for IE6 and older */
.test { color: black; }
Conditional classnames
If you don't want to use CSS hacks, you can apply conditional classnames to the
<html> or <body> element. This approach allows you to write clean and hack-free CSS at the cost of adding hacks conditional comments to your HTML.<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
This allows you to keep your browser-specific CSS in the same file:
.test { color: black; }
.ie8 .test { color: red; } /* IE8 */
.ie7 .test { color: white; } /* IE7 */
.ie6 .test { color: black; } /*IE6 and IE5*/
.ie8 .test { color: red; } /* IE8 */
.ie7 .test { color: white; } /* IE7 */
.ie6 .test { color: black; } /*IE6 and IE5*/
CSS hacks
Here’s an overview of the four most popular CSS hacks and which browsers they’re supposed to target:
.test {
color: black;
color: green\9; /* IE8 and older, but there’s more… */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
color: expression('red'); /* IE6 and above */
}
color: black;
color: green\9; /* IE8 and older, but there’s more… */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
color: expression('red'); /* IE6 and above */
}
Using conditional classnames with CSS hacks
In the HTML, you can use a minimal version of the conditional classnames technique, like this:
<!--[if lt IE 9]><html class="for-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
You can then use
.for-ie8as a styling hook in CSS selectors to target IE8 and older versions. Combined with CSS hacks, you can finally target IE8 and older versions without also affecting IE9:
.test {
color: black;
}
.for-ie8 .test {
color: red; /* IE8 and older */
*color: green; /* IE7 and older */
_color: blue; /* IE6 and older */
}
color: black;
}
.for-ie8 .test {
color: red; /* IE8 and older */
*color: green; /* IE7 and older */
_color: blue; /* IE6 and older */
}
If you have any opinion, please leave a comment or share this post.
Subscribe to TutorialFeed via RSS
7 comments :
nice tips, thanks for the post
I do use conditional statements and conditional tags
But why do we need to use CSS hacks? just cause it's quick or what? I always read that "hacks" are not recommended.
Good stuff defined
I have learnt of one among these and it was quite interesting.
With codes, you have shared very helpful information.
The various tools described in the post are really useful for the web developers.Thanks for sharing this useful data here with us..Great work keep it up...
Thank you for suggesting different CSS hacks which can help to designers and developers and can save time and increases productivity.
Post a Comment