CSS
Raiting:
8

CSS hacks


Browsers and standards are in the eternal race. Because there is mismatching in the standards due to different ways of rendering pages, a lot of time of a web designer goes to make up these mismatching (using hacks). As a result, the designer deals with the browsers instead of effective work, losing precious time of work.

A cross-browser is a feature of website that displays and works in all popular browsers identically.

Hack is a correction of a bug or addition of a new feature through the use of other undocumented or incorrectly realized feature. (c) Lurkmore

Dirty hack is a quick solution to any problem in the short term, which negatively affects a code of inner beauty and clashes with its internal structure. (c) Lurkmore

CSS-hacks for the Internet Explorer browser


ZOOM:1 :
Hack that is designed to identify hasLayout
* { Zoom : 1 ; }
PNG in IE6 :
For IE6 connects htc-file iepngfix.htc, for the proper operation of background images PNG for all elements in the file cssf-ie6.css. It is used IE PNG Fix v1.0 RC4 of the latest version.
* { Behavior : url ( "css /iepngfix.htc"); }<mumblecut />

If bytes are important, for example: using a filter for IE:
.class {
background : none ;
filter : progid : DXImageTransform.Microsoft.AlphaImageLoader (
src = '/images/png-image.png',
sizingMethod = 'scale'
);
}

Separation of styles from IE6 :
html> body .class { }
head+body .class { }
html:first-child .class { }

Separation of styles from IE6 and IE7 :
html >/**/body { }
Separation of styles from IE6 - IE8 :
* |html .class { }
html:not([lang*=""]) . class { }

Conditional comments in IE :
Conditional comments only work in IE on Windows; they are the usual comments for other browsers, so they can be used. Syntax is:
<! [If condition]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <! [Endif]>
<! [If! Condition]> <link href= "styles.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* If you want to ignore using the explorer some piece of code, you can use !condition */
/* condition can be:
IE - for any version of IE
lt IE v - (less than) for all browsers IE, which version is less than v
lte IE v - (less than or equal) for all browsers IE, which version is less than v, or the same
gte IE v - (greater than or equal) - for IE, which version is greater than or equal to v
gt IE v - (greater than) - for IE, which version is greater than v. */

Conditional comments in IE6, IE7, IE8 :
<! [if IE 6]> <link href= "ie6.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Stylesheet for IE6 */
<! [If IE 7]> <link href= "ie7.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Style sheet for IE7 */
<! [if IE 8]> <link href= "ie8.css" rel= "stylesheet" media= "all" /> <! [endif]>
/* Stylesheet for IE8 */

Box Model hack:
In IE, there are glitches, when the border and padding are included in the width of the element. Box Model hack fixes it.
.class {
padding : 4em;
border : 1em solid red;
width : 30em;
width /**/: /**/ 25em;
}
/* For IE width of the block is less than the value of padding + border */

Min-width and max-width are in IE :
IE does not read these properties css. Hack for block looks like this:
.class {
min-width : 500px;
width : expression (
document.body.clientWidth <500? "500px" : "auto"
);
}
/* For IE width of the block is less than the value of padding + border */

.class {
min-width : 500px;
max-width : 750px;
width : expression (
document.body.clientWidth < 500? "500px" :
document.body.clientWidth> 750? "750px" : "auto"
);
}
/* For IE width of the block is less than the value of padding + border */

Min-height of fast hack is from Dustin Diaz
.class {
min-height : 100%;
height : auto! Important ;
height : 100% ;
}

Simple selectors:
It is not necessarily to create a separate file for different browsers. You can use individual css-selectors in css-file:
* html .class { } /* In the case that html-page has a doctype, this hack works in IE6 */
/* In the case of quirks-mode, hack works in IE6 and IE7. */
*:First-child+html .class { } /* for IE 7 and lower (first-child) */
*+html .class { } /* for IE 7 */
*:first-child+html .class { } /* for IE 7 */
html> body .class { } /* for IE 7, and normal browsers */
html >/**/ body .class { } /* for normal browsers (except IE 7) */
/* Example:
.class { background:red }
*html .class { background:green }
It is in all browsers except IE6 and lower, a background will be red, but in IE6 and lower, in browsers will be green */

Dirty hacks for IE6 :
.class {_background : #F00 ; }
.class {-background : #F00 ; }
.class {c \ olor : #F00 ; } /* it does not work before the letters a, b, c, d, e, f */

Dirty hacks for IE7 :
body { background : #F00 ; }
/* selects the body element only in IE7 */
html* { background : #F00 ; }
/* extract all elements inside html only for IE7 and lower */
-,.class { background : #F00 ; }
.class { background : #F00 !important! ; }
/* Hack works using analogy with the property !important. It works for IE7 and lower */


Dirty hacks for IE8 :
.class { background : #F00\0/ ; }
/* selects the body element only in IE7 */

Dirty hacks that work in IE6 and IE7 :
.class { * background : #F00 ; }
.class {/ /background : #F00 ; }
.class { background : #F00 !ie ; }
/* Hack works using analogy with the property !important*/

CSS hacks for Mozila FireFox browser


Hacks for all versions of the MFF :
#class [id=class] { color : #F00 ; }
@-moz-document url-prefix () { .class {color : #F00 ; } }
*>.class {color : #F00 ; }

For MFF 1.5 and higher :
.class, x:-moz-any-link, x:only-child { color : #F00 ; }
For MFF 2.0 and higher :
body:empty .class { color : #F00 ; }
#class[id = CLASS] { color : #F00 ; }
html >/**/ body .class, x:-moz-any-link { color : #F00 ; }

For MFF 3.0 and possibly higher :
html >/**/ body. class, x:-moz-any-link, x:default { color : #F00 ; }

CSS hacks for the Google Chrome browser


@media all and (-webkit-min-device-pixel-ratio:0) {
/*styles for google chrome*/
}

CSS hacks for Opera browser


Hacks for all versions of Opera :
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio : 0 ) {
. Style {background: # F00;}
}

@media all and ( min-width : 0px ) {
.class {
Color : #F00 ;
}
}

For Opera 6 :
@media all and ( min-width : 1px) { { }
.class {
Color : #F00 ;
}
}

For Opera 7 and 8 :
@media all and ( min-width : 1px) {
.class {
Color : #F00 ;
}
}

For Opera 9 :
@media all and ( widt h) {
.class {
color : #F00 ;
}
}

@media all and ( min-width : 0px ) {
head ~ body .class {
color : #F00 ;
}
}

CSS hacks for Safari browser


body:first-of-type .class {color: # F00;}
html:root*.class { color : #F00 ; }
body:first-of-type .class { color : #F00 ; }
body:first-of-type .class { color : F00 ; }

@media screen and (-webkit-min-device-pixel-ratio : 0) {
.class {
Color : #F00 ;
}
}
/* Hack for Opera and Safari */
Sparks 7 november 2011, 13:51
Vote for this post
Bring it to the Main Page
 

Comments

0 muthu April 18, 2012, 6:37
CSS hacks for the Google Chrome browser

body:nth-of-type(1) .class {
background : #000 ;
}

is not working.pls post some other hack code to effects chrome only
0 Sparks April 18, 2012, 13:13
Thank you, it was the old way of Google Chome hack, I've updated my article with new one.

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute