css hack

The syntax for conditional comments is as follows:

Positive

Negative

HTML

condition is one of the following:

IE

Any version of IE

lt IE version

Versions less than version

lte IE version

Versions less than or equal to version

IE version

Only version version

gte IE version

Versions greater than or equal to version

gt IE version

Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

for example:

	

		

		

		

		

		  

		  

	

	

		
Test

	



****In-css hack

body[class|="page-body"]

The CSS 2.1 specification isn't clear about whether or not a hyphen can be included in the value of a hyphen-separated attribute selector. Most browsers, including Firefox and Internet Explorer 7, Allow the body[class|="page-body"] selector to select an element whose start tag looks like this: . However, Opera interprets the specification differently in this regard. It splits up the attribute value by hyphens and only checks the first piece against the attribute selector value. Obviously, if the attribute was split by hyphens, the first piece won't have any hyphens in it, so Opera treats this selector as a non-match. Therefore, when the proper class is applied to the body element, this selector matches Internet Explorer 7 and most modern browsers except Opera. Opera may change their behavior to match other browsers in the future, but this technique is known to work for Opera 8 and 9.

Here is an example of this technique in use:

Test

Unrecommended hacks If you are going to use hacks, the above techniques are the recommended choices. However, it's interesting to point out the following unrecommended hacks. Some of them rely on invalid CSS or are more clumsy than the above alternatives. _property: value and -property: value Due to a parsing error, Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. Prefixing a regular property name with _ or - will cause the property to be applied to Internet Explorer 6 and below but generally not in other browsers. Internet Explorer 7 had this bug fixed. The CSS specification allows browsers to use an underscore (_) or hyphen (-) as a prefix for a vendor-specific property name with the guarantee that such properties will never be used in a future CSS standard. Because of this guarantee, these two prefix characters are ideal options for this hack. Although the CSS specification defines this vendor-specific property syntax, the properties are inherently not part of any W3C-endorsed CSS profile and are therefore invalid when validated against one. For this reason, and because there is an often acceptable alternative, this hack is unrecommended. _property: value and -property: value apply the property value in IE 6 and below. Warning: this uses invalid CSS. *property: value Although Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve. *property: value applies the property value in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS. body:empty The :empty pseudo-classes is proposed for CSS 3 and should select an element that has no elements or text inside it. However, when used on the body element, Firefox 1.5 and 2.0 (and corresponding versions of other Gecko-based browsers) always select it even when the body has content (which it should always have). Although this hack is expected to be valid in CSS 3, it has not yet reached W3C Recommendation status and is invalid CSS 2.x, so it currently isn't recommended to use this hack. However, it is probably the best way to single out recent versions of Firefox. body:empty {} selects the body element in Firefox 1.5 and 2.0 only. It may or may not work in future versions. Warning: this uses invalid CSS 2.x but valid CSS 3 according to recent drafts. a:link:visited, a:visited:link According to the CSS standard, the :link and :visited link states are mutually exclusive: :link actually means "unvisited link". However, IE 7 and below will ignore one of these pseudo-classes if the other appears later in the same simple selector. If you have the tag , either #linkhack:link:visited {} or #linkhack:visited:link {} will select the element in IE 7 and below. The two selectors can be combined for a single declaration block: #linkhack:link:visited, #linkhack:visited:link {}. In IE 7, you can also use an adjacent sibling combinator (+) to select other elements near the link. This uses perfectly valid CSS, but this method is less practical than some of the above methods and is therefore not recommended. a:link:visited, a:visited:link {} selects an a element in IE 7 and below. It may or may not work in future versions. >body If a simple selector is missing on either side of the child combinator (>), Internet Explorer 7 incorrectly assumes that the missing simple selector is a universal selector. So >body is treated by IE7 like *>body, while other browsers ignore it because it's a parsing error. Similarly, IE7 treats >> like *>*>*. IE7 has the same quirk with other combinators. +p is treated like *+p and ~p is treated like *~p. (Note: The ~ combinator is an upcoming CSS 3 feature and is not valid CSS 2.1.) >body {} selects the body element in IE 7 only. It may or may not work in future versions. Warning: this uses invalid CSS! html* Internet Explorer 7 fixed the quirk that allowed the universal selector (*) to select some nonexistent parent of the html element, but there's another issue that they didn't fix: When a universal selector is directly adjacent to another simple selector without a space between, Internet Explorer 7 assumes a space there. That means that html* is treated by IE7 like html *, while other browsers ignore it because it's a parsing error. Similarly, IE7 treats ** like * *. html* {} selects all descendants of the html element in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS! !ie Internet Explorer 7 fixed one of the issues with the !important identifier, but it still has problems when the identifier has an error in it. If an illegal identifier name is used in place of important, Internet Explorer 7 and below will handle the property normally instead of failing. Therefore, in any style declaration block, you can include properties intended to only apply to Internet Explorer and add an !ie identifier. Almost any word can be used in place of ie. The !ie identifier allows the property to be applied in IE 7 and below. It may or may not work in future versions. Warning: this uses invalid CSS! !important! Another problem with the !important identifier that wasn't fixed in IE 7 is the treatment of non-alphanumeric characters after the identifier. Normally, this should cause the property to fail, but Internet Explorer 7 and below ignore the additional punctuate and apply the property as if it just had the !important identifier. The !important! identifier allows the property to be applied with importance in IE 7 and below and the property is not applied in other browsers. It may or may not work in future versions. Warning: this uses invalid CSS!