13 Best CSS Hack
- Jonh
- May 03, 2012
- 0 Comment
1. Target IE6, IE7, and IE8 with only 4 characters (hack)
See the source above for a quick explanation. And don’t ask me to explain why \9 works for IE8…but it does. Use these with caution.
[css]
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
[/css]
source :http://snipplr.com/view/36163/target-ie6-ie7-and-ie8-with-only-4-characters-hack/
2. WinIE PNG Filter
[css]
/* WinIE PNG Filter */
/*\*/
* html selector{
background-image:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=i/image.png);
}
/**/
[/css]
source : http://snipplr.com/view/497/winie-png-filter
3. Opacity Hack
Sets the opacity of an element and its children. Doesn’t validate. Mozilla began supporting the opacity rule in version 1.7, so ‘-moz-opacity’ may not be necessary…
[css]
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
[/css]
source : http://snipplr.com/view/200/opacity-hack
4. CSS Image Preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: “”. Whenever the images are referenced throughout your pages they will now be loaded from cache.
[css]
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
[/css]
source : http://snipplr.com/view/2122/css-image-preloader
5. Crossbrowser Opacity
[css]
selector {
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
[/css]
source : http://snipplr.com/view/10094/crossbrowser-opacity
6. IE6 Fixed Position Fix
IE6 Doesn’t recognize position: fixed. Here is a little hack to fix it. First you must set IE6 to standards mode. You do this by including a strict doctype in the page. Once IE6 is in strict mode include the following in a conditional comment. Anything you want fixed, set as absolute. The example sticks an image to the bottom left corner.
[css]
/* IE6 Fixed position fix */
html, body {
height: 100%;
overflow: auto;
}
body #cornerImage {
position: absolute;
bottom: 0;
}
[/css]
You can use XHTML 1.0 Transitional too. By using the “important!” declaration, you don’t need an conditional comment anymore:
[css]
* { margin:0; padding:0; }
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
[/css]
source : http://snipplr.com/view/2952/ie6-fixed-position-fix
7. Firefox scrollbar hack
[css]
html {overflow-y:scroll;}
[/css]
source : http://snipplr.com/view/4672/firefox-scrollbar-hack
8. IE7 Hack
[css]
/* IE7 only */
*:first-child+html selector{property:value;}
[/css]
source : http://snipplr.com/view/1500/ie7-hack/
9. Firefox CSS-hack
[css]
body{
background:white;
color:black;
}
@-moz-document url-prefix(){
body{
background:grey;
color:white;
}
}
[/css]
source : http://snipplr.com/view/15159/
10. IE7 only star html hack
[css]
/* the following rules apply only to IE7 */ *+html .foo{ }
[/css]
source : http://snipplr.com/view/13711
11. Drop Caps
[css]
.cap
{
float: left;
width: 42px;
font-size: 55px;
line-height: 45px;
font-weight: normal;
color:#2DA44A;
font-family: arial, sans-serif;
}
[/css]
source : http://snipplr.com/view/1008/drop-caps
12. CSS Tabs
[css]
ul.tabset,ol.tabset{list-style:none;margin:0;padding:0;border-bottom:1px solid black;float:left;width:100%;}
ul.tabset li,ol.tabset li{float:left;}
ul.tabset li a,ol.tabset li a{color:black;text-decoration:none;display:block;padding:0.5em;margin-right:0.5em;border:1px solid black;border-bottom:0;}
[/css]
source : http://snipplr.com/view/5174/css-tabs/
13. Conditional CSS for FF, IE7, IE6
Set different values for an element based on browser (specifically, how the browser interprets the CSS). Definitions must be in order as shown below because newer definitions override existing.
The first setting will apply to all browsers. The second setting (using a pound symbol, #) will only apply to Microsoft Internet Explorer. The third setting (an underscore, _ ) will only apply to IE browsers 6.0 and older.
[css]
.sample {
height: 15px;
#height: 15px;
_height: 21px;
}
[/css]
source : http://snipplr.com/view/4564/conditional-css-for-ff-ie7-ie6/
