CSS hacks
Browsers and standards. Eternal pursuit. Due to inconsistencies with standards, due to different ways of rendering pages, most of the web designer's time is spent on redressing these discrepancies (using hacks). As a result, instead of effective work, the designer enters into unnatural relations with browsers, losing valuable time.
Css Hack is a special CSS design that some browsers understand and ignore the others. The use of hacks often speaks of the unprofessional layout. But there are cases when the hack is the only way to solve the problem (for example, well-known browser bugs (see "Browser glitches")). Do not forget that in our time haste is a common occurrence. Therefore, the terms "for yesterday" - no one is surprised. So there's no time to figure out why it does not come out as you want.
Plus css hacks
This is a quick fix for the problem. Have registered additional lines and all is excellent, we make further.
Disadvantages of css hacks
- There is no certainty how the site will behave with the release of new versions of browsers. For example, they wrote a code with a hack for Firefox, a new version of Safari is released in a month and it turns out that she also perceives this hack! We have to redo it.
- Many khakis do not pass validation - the danger of this is described in the previous paragraph.
If possible, try to avoid using hacks. To correct IE errors, use a separate CSS file, which is connected using conditional comments.
Glossary
Cross-browser - the property of the site to be displayed and work in all popular browsers is identical.
Hack - fixing an error or adding a new function by using another undocumented or incorrectly implemented feature.
A dirty hack is a quick solution to a problem, mostly in the short term, depriving the essence of the code of inner beauty and disharmonizing with its internal arrangement.
CSS hacks for Internet Explorer
ZOOM: 1:Hack, designed to define hasLayout
* { Zoom : 1 ; }
PNG in IE6:
For IE6, the htc-file iepngfix.htc is connected, for correct operation of PNG background images for all elements, in the file cssf-ie6.css. IE PNG Fix v1.0 RC4 latest version is used.
* { Behavior : url ( "css / iepngfix.htc" ); }
If bytes are important there is an example of 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 work only in IE under Windows, for other browsers they are normal comments, so they can be used painlessly. The syntax is this:
<! - [ 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 some piece of code by the explorer, use the condition * / / * The condition can be: IE - for any version of IE Lt IE v - (less than) for all IE browsers whose version is less than v Lte IE v - (less than or equal) for all IE browsers whose version is less than v, or the same Gte IE v - (greater than or equal) - for IE, whose version is greater than or equal to v Gt IE v - (greater than) - for IE, the version of which is greater than v. * /
Conditional comments in IE6, IE7, IE8:
<! - [if IE 6 ]> < link href = " ie6.css " rel = " stylesheet " media = " all " /> < ! [Endif] - > / * Style sheet 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] - > / * Style sheet for IE8 * /
Box Model hack:
In IE, there are glitches, when border and padding are included in the width of the element. Box Model hack captures them.
. Class { Padding: 4 em; Border: 1 em solid red; Width: 30 em; Width / ** /: / ** / 25 em; } / * For IE, the width of the block is less by the amount padding + border * /
Min-width and max-width in IE:
IE does not understand these css properties. Hack for the block looks like this:
.class { Min-width : 500 px; Width : expression ( Document.body.clientWidth < 500 ? "500px" : "auto" ); } / * For IE, the block width is less by the amount padding + border * /
.class { Min-width : 500 px; Max-width : 750 px; Width : expression ( Document.body.clientWidth < 500 ? "500px" : Document.body.clientWidth> 750 ? "750px" : "auto" ); } / * For IE, the block width is less by the amount padding + border * /
Min-height hack from Dustin Diaz
.class { Min-height : 100 %; Height : auto ! Important ; Height : 100 %; }
Simple selectors:
It is not necessary to create a separate file for different browsers. You can use individual css-selectors in the main css-file:
* Html. Class { } / * In case the html-page has 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} In all browsers except IE6 and below, the background will be red, and in IE6 and below browsers - green * /
Dirty hacks for IE6:
. Class { _background : # F00; } . Class {- background : # F00; } . Class { c \ olor : # F00; } / * 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 ; } / * Highlights all elements inside the html element. Only for IE7 and below * / -, .class { background : # F00 ; } .class { background : # F00 ! Important ! ; } / * Hack works by analogy with the! Important property. Works for IE7 and below * /
Dirty hacks for IE8:
.class { background : # F00 \ 0 /; } / * Selects the body element only in IE7 * /
Dirty hacks working in IE6 and IE7:
.class { * background : # F00 ; } .class { // background : # F00 ; } .class { background : # F00 ! Ie ; } / * Hack works in a way similar to the! Important * /
CSS-hacks for the Mozilla FireFox browser
Khaki for all versions of 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 Google Chrome browser
Body: nth- of - type (1) .class { Background : # 000; }
CSS hacks for Opera browser
Khaki 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: 0 px) { .class { Color : # F00 ; } }
For Opera 6:
@ Media all and (min-width: 1 px) { { } .class { Color : # F00 ; } }
For Opera 7, 8:
@ Media all and (min-width: 1 px) { .class { Color : # F00 ; } }
For Opera 9:
@ Media all and (width) { .class { Color : # F00 ; } }
@ Media all and (min-width: 0 px) { 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 * /
Selector Hacks
/ ***** Selector Hacks ****** / / * IE6 and below * / * Html #uno {color: red} / * IE7 * / *: First-child + html #dos {color: red} / * IE7, FF, Saf, Opera * / Html> body #tres {color: red} / * IE8, FF, Saf, Opera (Everything but IE 6,7) * / Html> / ** / body #cuatro {color: red} / * Opera 9.27 and below, safari 2 * / Html: first-child #cinco {color: red} / * Safari 2-3 * / Html [xmlns * = ""] body: last-child #seis {color: red} / * Safari 3+, chrome 1+, opera9 +, ff 3.5+ * / Body: nth-of-type (1) #siete {color: red} / * Safari 3+, chrome 1+, opera9 +, ff 3.5+ * / Body: first-of-type #ocho {color: red} / * Saf3 +, chrome1 + * / @media screen and (-webkit-min-device-pixel-ratio: 0) { #diez {color: red} } / * IPhone / mobile webkit * / @media screen and (max-device-width: 480px) { #veintiseis {color: red} } / * Safari 2 - 3.1 * / Html [xmlns * = ""]: root #trece {color: red} / * Safari 2 - 3.1, Opera 9.25 * / * | Html [xmlns * = ""] #catorce {color: red} / * Everything but IE6-8 * / : Root *> #quince {color: red} / * IE7 * / * + Html #dieciocho {color: red} / * IE 10+ * / @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #veintiun {color: red; } } / * Firefox only. 1+ * / #veinticuatro, x: -moz-any-link {color: red} / * Firefox 3.0+ * / #veinticinco, x: -moz-any-link, x: default {color: red} / * FF 3.5 + * / Body: not (: - moz-handler-blocked) #cuarenta {color: red; }
Attribute Hacks
/ ***** Attribute Hacks ****** / / * IE6 * / #once {_color: blue} / * IE6, IE7 * / #doce {* color: blue; / * Or #color: blue * /} / * Everything but IE6 * / #diecisiete {color / ** /: blue} / * IE6, IE7, IE8, but also IE9 in some cases * / #diecinueve {color: blue \ 9; } / * IE7, IE8 * / #veinte {color / * \ ** /: blue \ 9; } / * IE6, IE7 - acts as an! Important * / #veintesiete {color: blue! Ie; } / * String after! Can be anything * / / * IE8, IE9 * / #anotherone {color: blue \ 0 /;} / * must go at the END of all rules * / / * IE9, IE10 * / @media screen and (min-width: 0 \ 0) { #veintidos {color: red} }
Property prefix hacks
/ * Property prefix hacks * / / * IE6 only - any combination of these characters * / _ -? ¬ | / * IE6 / 7 only - any combination of these characters * /! $ & * () =% + @,. / `[] # ~? : <> |
@media hacks
/ * @media hacks * / / * IE6 / 7 only (via Keith Clarke) * / @media screen \ 9 {} / * IE6 / 7/8 (via Keith Clarke) * / @media \ 0screen \, screen \ 9 {} / * IE8 (via Keith Clarke) * / @ Media \ 0screen {} / * IE8 / 9 * / @media screen \ 0 {}
List of CSS hacks for different browsers, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome
/ * Hack only for IE8 Only * / .myClass { Color: red \ 0 /; / * Red * / Padding: 70px \ 0 /; / * Indent 70px only for Internet Explorer 8 * / } / * IE 6 Only * / * html .myClass { ... } / * All except IE6 standards * / .myClass { Property / ** /: value; } / * Firefox & IE 7, and above * / html> body .myClass { ... } / * Modern browsers only (not IE 7) * / html> / ** / body .myClass { ... } / * IE 7 Only * / *: first-child + html .myClass { ... } / * Firefox Only * / @ -moz-document url-prefix () { .myClass { ... } } / * Opera Only * / noindex: -o-prefocus, .MyClass { Color: red; } / * IE7 Only * / div [class ^ = "myClass"] .myClass2 { ... } / * IE7 only * / * + html .myClass { ... } / * Hack for Opera <= 9 * / html: first-child .myClass { ... } / * Firefox, Opera, Konqueror, Safari * / * | html .myClass { ... } / * IE8 beta 2 only (?) * / Html: first-child .myClass [attr | = ab] { ... } / * IE5 / Mac only * / / * \ * // * / .myClass {property: value; } / ** / / * Gecko only * / .myClass: not ([attr * = ""]) { ... } / * Opera * / @media all and (min-width: 0px) { Html: first-child .myClass { ... } } / * Safari only * / .myClass: not (: root: root) { ... } / * Safari 3.0 and Chrome only * / @media screen and (-webkit-min-device-pixel-ratio: 0) { .myClass { .... } } / * Chrome browser * / body: nth-of-type (1) .myClass { ... } / * Safari browser css hack * / body: first-of-type .myClass {property: value;}
CSS for Explorer
<! - [if IE]> ... if Internet Explorer .. <Link href = "ie-fix.css" type = "text / css" rel = "stylesheet"> <! [Endif] -> <! - [if IE 6.0]> ... if IE6 <! [Endif] -> <! - [if IE 7]> ... if IE7 <! [Endif] -> <! - [if gte IE 5]> ... if IE5 + <! [Endif] -> <! - [if lt IE 6]> .. if below IE 6 <! [Endif] -> <! - [if lte IE 5.5]> ... if it is below or equal to IE 5.5 <! [Endif] -> <! - [if gt IE 6]> ... if above IE 6 <! [Endif] ->
Semi-transparent background in IE, Firefox, Opera
.myClass { Background-color: # 000; -moz-opacity: .82; / * Firefox * / Opacity: .82; / * Opera * / Filter: alpha (opacity = 82); / * IE * / }
Remove extra padding in the button in Firefox
Button :: - moz-focus-inner { Border: 0; Padding: 0 }
Chrome / Firefox ...?
Button { -webkit-border-fit: lines; }
Firefox 2
Html > / ** / body .selector, x: -moz-any-link { color : lime ; }
Firefox 3
Html > / ** / body .selector, x: -moz-any-link, x: default { color : lime ; }
Any Firefox
@ -moz-document url-prefix () { .selector { color : lime ; } }
Additionally
Khaki for IE
Syntax | Who understands | Example |
Pass validation | ||
---|---|---|
* Html | IE6 | Div { Background: # ff0000; } * Html div { Background: # 000; } |
! Important | IE6 | Div { Background: # ff0000! Important; / * For all browsers * / Background: # 000; / * For IE6 * / } |
*: First-child + html | IE7 | Div { Background: # ff0000; } *: First-child + html div { Background: # 000; } |
* + Html | IE7 + Can understand Opera 9 and below |
Div { Background: # ff0000; } * + Html div { Background: # 000; } |
Html> body | Will understand everything except IE6 |
Div { Background: # ff0000; } Html> body div { Background: # 000; } |
# Ie # fix | Understand everything except IE8 | Div { Background: # ff0000; / * For ie8 * / } Div, # ie # fix { Background: # 000; / * For other browsers * / } |
Do not pass validation (not recommended) | ||
_property: value and -property: value |
IE6 | Div { Background: # ff0000; / * For all browsers * / _background: # 000; / * For IE6 * / } |
* Property: value and // property: value |
IE6 IE7 |
Div { Background: # ff0000; / * For all browsers * / * Background: # 000; / * For IE6 and IE7 * / } |
Html * | IE6 IE7 Chrome Safari |
Div { Background: # ff0000; } Html * div { Background: # 000; } |
! Ie | IE6 IE7 |
Div { Background: # ff0000; / * For all browsers * / Background: # 000! Ie; / * For IE6 and IE7 * / } |
Khaki for Firefox
Syntax | Who understands | Example |
Do not pass validation (not recommended) | ||
---|---|---|
|
FF 1.5+ Opera 9.6 Update: 14/01/10
not relevant (Understand the new versions Opera, chrome, safari) |
Div { Background: # ff0000; } Html: root div { Background: # 000; } |
X: -moz-any-link | FF 1.5+ IE7 |
Div { Background: # ff0000; } Div, x: -moz-any-link { Background: # 000; } |
@ -moz-document url-prefix () | FF 1.5+ | Div { Background: # ff0000; } @ -moz-document url-prefix () { Div { Background: # 000; }} |
Hacks for Opera
Syntax | Who understands | Example |
Passes validation | ||
---|---|---|
Html: first-child | Opera 7-9.01 | Div { Background: # ff0000; } Html: first-child div { Background: # 000; } |
Do not pass validation (not recommended) | ||
Validates CSS3 |
Opera 9-9.6 Update 14.01.10
not relevant (Understood as new Versions of ff, chrome, safari) |
Div { Background: # ff0000; } @media all and (min-width: 0) { Div { Background: # 000; }} |
Html> / ** / body noindex: -o-prefocus, html> / ** / body | Opera 9.5-10 | Html> / ** / body noindex: -o-prefocus, html> / ** / body p { Color: # 0f0 } |
Hacks for Chrome and Safari
Syntax | Who understands | Example |
Do not pass validation (not recommended) | ||
---|---|---|
|
Update 14.01.10 - not relevant (it is understood by new versions of opera, ff, safari, chrome) |
Div { Background: # ff0000; } Body: nth-of-type (1) div { Background: # 000; } |
|
Update 14.01.10 - not relevant (it is understood by new versions of opera, ff, safari, chrome) |
Div { Background: # ff0000; } Html: root * div { Background: # 000; } |
Html * |
Safari Chrome IE6 IE7 |
Div { Background: # ff0000; } Html * div { Background: # 000; } |
Khaki Konqueror
Syntax | Who understands | Example |
Do not pass validation (not recommended) | ||
---|---|---|
Html: not (: nth-child (1)) #element |
Konqueror FF 3.5 |
#div { Background: # ff0000; } Html: not (: nth-child (1)) #div { Background: # 000; } |
Comments
When commenting on, remember that the content and tone of your message can hurt the feelings of real people, show respect and tolerance to your interlocutors even if you do not share their opinion, your behavior in the conditions of freedom of expression and anonymity provided by the Internet, changes Not only virtual, but also the real world. All comments are hidden from the index, spam is controlled.