Different browsers has different standards for understating CSS attributes, so some CSS properties are not working in all browsers, the easy way to eliminate this issue to use CSS Hacks. Here are some basic CSS Hacks which we can use in regular development and help us to keep our website look same in all browsers. I get a good help from webdevout.net, W3School, stylizedweb.com to learn about CSS Hacks, I try to list CSS Hacks as much as I know, please let me know if anything is missing or wrong in that. Here i am listing about Conditions in CSS, !important, @import, Abstract (*) Hack, Opacity, “min-height” Hack, CSS Reset Hacks.
Conditions in CSS
The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at an unwanted time or other browsers showing the same bugs. Conditional comments only work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.
- Positive
<!–[if condition]> HTML <![endif]–> - Negative
<!–[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!–<![endif]–>
Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:
<link href="common.css" rel="stylesheet" type="text/css">
<!–[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]–>
<!–[if lt IE 7]> <link href="ie6.css" rel="stylesheet" type="text/css"> <![endif]–>
<!–[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="ie7.css" rel="stylesheet" type="text/css"> <!–<![endif]–>
<!–[if !IE]>–> <link href="nonie.css" rel="stylesheet" type="text/css"> <!–<![endif]–>
!important
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.
Internet Explorer 6 and below had a problem with the !important identifier that caused it to be ignored if another declaration of the same property appeared later in the same style declaration block. This can be used to feed Internet Explorer 6 and below special property values that are ignored by other browsers. Internet Explorer 7 fixed this issue.
.div { color: #cc0000 !important; }
div { color: #000000; }
@import
If you’ve ever struggled with Netscape Navigator 4.x, this trick is for you. It all hinges on the fact that NN4.x doesn’t understand what @import means. This is by far the most widely used trick, even though it’s only good for hiding external style sheets.
@import url(http://www.example.org/styles/other-style.css);
Abstract (*) Hack
Abstract used when you want to apply some CSS class especially in ie. here is the way we can use it.
Only for IE6
/* the following rules apply only to IE6 */
* html{}
* html body{}
* html .maindiv{width:500px;}
Only for IE7
/* the following rules apply only to IE7 */
*+html .maindiv{width:800px;}
Opacity
Opacity is use to create transparent element, This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(test.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Firefox*/
-moz-opacity:.60;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
"min-height" Hack
The min-height property sets the minimum height of an element.
CSS .divcss {
min-width:500px;
width:auto; !important
width:600px;
background-color:#CCCCCC;
}
HTML <div class="divcss"> </div>
CSS Reset
<html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}
In regards to the @import() rule to suppress NS4, this can cause a “flicker of un-styled content” problem in Internet Explorer.
While there are other hacks to apply which will fix this problem, I find it easier to go back to using the , but specify the media type as either “all” or “screen,screen”.
As NS4 just ignores any media types it does not understand (and the comma is not used to split them).