CSS is a web standard that describes style for [[XML]]/[[HTML]] documents. You might want to start by reading a "beginners tutorial":http://friendlybit.com/css/beginners-guide-to-css-and-standards/

<a style="margin-left:-500px;" href=http://csslessons.ru>CSS tips, tricks</a>

CSS is a web standard that describes style for [[XML]]/[[HTML]] documents. You might want to start by reading a "beginners tutorial":http://friendlybit.com/css/beginners-guide-to-css-and-standards/

<a href=http://csslessons.ru>CSS tips, tricks</a>

You will notice that after a while you are writing the same styles for different elements or want to use different styles for one element (or a group of elements for that part). Hence the practice of "grouping".

*You can group selectors, declarations or everything.* Let's say you want all your heading levels to have the same color. Instead of making a rule for each heading separate, you can group them like this:

H1, H2, H3, H4, H5, H6 {color: blue;}

Or maybe you want your paragraphs and just your heading level 4 to be blue? No problem:

3

H4, P {color: red;}

Okay, but i want my H1 to have blue text, Arial font, font-size of 18 pixels and with a red background. Now what? Do i have to write three times those rules with H1? Of course not. You'll group your declarations like this:

H1 { font : 18px Arial; color: blu; blue; background: red;}

Okay, now you know how to group selectors and declarations. Let's mix all this into one single method of grouping. Let's just group everything.

I want all of my headings to have a blue color with a red background and Arial font with a font-size of 18 points. Well, no problem:

H1, H2, H3, H4, H5, H6 {font : 18pt Arial; color: blue; background: red;}

Or maybe your paragraphs and just your headings with level 4 and 6 need these styles? Here you go:

H4, H6, P {font : 18pt Arial; color: blue; background: red;}

-"DZINE":http://www.dzinelabs.com/Pages/tutorials_grouping.htm

You will notice that after a while you are writing the same styles for different elements or want to use different styles for one element (or a group of elements for that part). Hence the practice of "grouping".

*You can group selectors, declarations or everything.* Let's say you want all your heading levels to have the same color. Instead of making a rule for each heading separate, you can group them like this:

H1, H2, H3, H4, H5, H6 {color: blue;}

Or maybe you want your paragraphs and just your heading level 4 to be blue? No problem:

3

H4, P {color: red;}

Okay, but i want my H1 to have blue text, Arial font, font-size of 18 pixels and with a red background. Now what? Do i have to write three times those rules with H1? Of course not. You'll group your declarations like this:

H1 { font : 18px Arial; color: blue; background: red;}

Okay, now you know how to group selectors and declarations. Let's mix all this into one single method of grouping. Let's just group everything.

I want all of my headings to have a blue color with a red background and Arial font with a font-size of 18 points. Well, no problem:

H1, H2, H3, H4, H5, H6 {font : 18pt Arial; color: blue; background: red;}

Or maybe your paragraphs and just your headings with level 4 and 6 need these styles? Here you go:

H4, H6, P {font : 18pt Arial; color: blue; background: red;}

-"DZINE":http://www.dzinelabs.com/Pages/tutorials_grouping.html -"DZINE":http://www.dzinelabs.com/Pages/tutorials_grouping.htm

There are basically two ways to implement [[CSS]] in your pages: one way is by using a style sheet and the other way is by using CSS directly in your page. Style sheets

When you want to use a style sheet, it's really very simple: you can write your code in any preferred text editor and save with the extension ".css". All you need to do then is to link it in your page by using the LINK tag. The syntax is as follows:

<code>

<LINK REL="style sheet" TYPE="text/css" HREF="mysheet.css" TITLE= "Default">

</code>

Now you have a style sheet that is no part of the [[HTML]] document but is used by it. Hence the word "external style sheet". The LINK element must be placed inside the HEAD element and not in any other element. The LINK element specifies the type of link (to a "style sheet"), the location of the style sheet via the "ref" attribute and the type of style sheet being linked: “text/css”

You can also set up a so called "alternate style sheet". This is an external style sheet that you offer to the reader so he can choose which style sheet he wants and subsequently which mark up he prefers. The syntax is the same as for the default external style sheet except for the REL element: this becomes REL="alternate style sheet". The value you use in the TITLE attribute will generate a list of style alternatives for the reader to choose from.

Another way to apply CSS is by using the STYLE element.

The STYLE element appears in the HTML document itself and should always use the attribute TYPE. In case of CSS, the value for TYPE is text/css. When using this technique, you're using a container that starts with an opening tag containing STYLE TYPE="text/css" and finishes with a closing STYLE tag. Between the opening and the closing tag you need to place your styles. Those are better known as the "document style" sheet or the "embedded style sheet". This sheet can contain styles that apply to the HTML document but it can also contain links to an external style sheet, using the "@import directive".

Now let's examine this a bit deeper.

The @import directive can be used to let the web browser load an external style sheet, just like the LINK element. The difference between them is the syntax and the placement. The @import directive is placed inside the STYLE container. It must be placed there and before all other CSS rules. If not, it will not work.

Another difference is that, when you use several @import statements, they all will be loaded, where as this will not be the case with the LINK element.

The @import directive can be used to take advantage from the fact that older browsers do not support (or do not fully support) CSS. Navigator 4.x for instance does not recognize the @import directive and consequently will not load the style sheet.

Like i already mentioned, the STYLE container can also contain styles that apply to the HTML document: the “actual styles”.

For instance:

P {color: blue;}

This will set the paragraph element to be blue. Using CSS directly in your page

Besides the actual styles i just mentioned, there are styles directly applied inside the page.

They too use the STYLE element. They are there for cases where you want to assign a simple rule to an element, without having the need to use an embedded or external style sheet. These types of styles are referred to as "inline styles".

Where actual styles comprise the bulk of an embedded style sheet, inline styles are used for a simple "shortcut" to style an element. The syntax is almost the same as the declarations of the actual styles but the curly brackets are replaced by double quotation marks. CSS Comments

Just like HTML, CSS also provides for you to make comments. The syntax is completely different from HTML comments: the comments are surrounded by @/*@ and @*/@ .

So you get something like @/* this is my CSS comment */@.

CSS comments can not be nested. Besides that there is one major rule to keep in mind: if you have several rules and you need to comment them alongside, make sure that each comment line is wrapped in comment markers. If you don't do this, the comment rules without markers will become part of the comment and will not work:

@h2 {font-size : small;} /* a comment that is two */ h2 {font-size : small;} /* lines long */@

Hi !!! There are basically two ways to implement [[CSS]] in your pages: one way is by using a style sheet and the other way is by using CSS directly in your page. Style sheets

When you want to use a style sheet, it's really very simple: you can write your code in any preferred text editor and save with the extension ".css". All you need to do then is to link it in your page by using the LINK tag. The syntax is as follows:

<code>

<LINK REL="style sheet" TYPE="text/css" HREF="mysheet.css" TITLE= "Default">

</code>

Now you have a style sheet that is no part of the [[HTML]] document but is used by it. Hence the word "external style sheet". The LINK element must be placed inside the HEAD element and not in any other element. The LINK element specifies the type of link (to a "style sheet"), the location of the style sheet via the "ref" attribute and the type of style sheet being linked: “text/css”

You can also set up a so called "alternate style sheet". This is an external style sheet that you offer to the reader so he can choose which style sheet he wants and subsequently which mark up he prefers. The syntax is the same as for the default external style sheet except for the REL element: this becomes REL="alternate style sheet". The value you use in the TITLE attribute will generate a list of style alternatives for the reader to choose from.

Another way to apply CSS is by using the STYLE element.

The STYLE element appears in the HTML document itself and should always use the attribute TYPE. In case of CSS, the value for TYPE is text/css. When using this technique, you're using a container that starts with an opening tag containing STYLE TYPE="text/css" and finishes with a closing STYLE tag. Between the opening and the closing tag you need to place your styles. Those are better known as the "document style" sheet or the "embedded style sheet". This sheet can contain styles that apply to the HTML document but it can also contain links to an external style sheet, using the "@import directive".

Now let's examine this a bit deeper.

The @import directive can be used to let the web browser load an external style sheet, just like the LINK element. The difference between them is the syntax and the placement. The @import directive is placed inside the STYLE container. It must be placed there and before all other CSS rules. If not, it will not work.

Another difference is that, when you use several @import statements, they all will be loaded, where as this will not be the case with the LINK element.

The @import directive can be used to take advantage from the fact that older browsers do not support (or do not fully support) CSS. Navigator 4.x for instance does not recognize the @import directive and consequently will not load the style sheet.

Like i already mentioned, the STYLE container can also contain styles that apply to the HTML document: the “actual styles”.

For instance:

P {color: blue;}

This will set the paragraph element to be blue. Using CSS directly in your page

Besides the actual styles i just mentioned, there are styles directly applied inside the page.

They too use the STYLE element. They are there for cases where you want to assign a simple rule to an element, without having the need to use an embedded or external style sheet. These types of styles are referred to as "inline styles".

Where actual styles comprise the bulk of an embedded style sheet, inline styles are used for a simple "shortcut" to style an element. The syntax is almost the same as the declarations of the actual styles but the curly brackets are replaced by double quotation marks. CSS Comments

Just like HTML, CSS also provides for you to make comments. The syntax is completely different from HTML comments: the comments are surrounded by @/*@ and @*/@ .

So you get something like @/* this is my CSS comment */@.

CSS comments can not be nested. Besides that there is one major rule to keep in mind: if you have several rules and you need to comment them alongside, make sure that each comment line is wrapped in comment markers. If you don't do this, the comment rules without markers will become part of the comment and will not work:

@h2 {font-size : small;} /* a comment that is two */ h2 {font-size : small;} /* lines long */@

There are basically two ways to implement [[CSS]] in your pages: one way is by using a style sheet and the other way is by using CSS directly in your page. Style sheets

When you want to use a style sheet, it's really very simple: you can write your code in any preferred text editor and save with the extension ".css". All you need to do then is to link it in your page by using the LINK tag. The syntax is as follows:

<code>

<LINK REL="style sheet" TYPE="text/css" HREF="mysheet.css" TITLE= "Default">

</code>

Now you have a style sheet that is no part of the [[HTML]] document but is used by it. Hence the word "external style sheet". The LINK element must be placed inside the HEAD element and not in any other element. The LINK element specifies the type of link (to a "style sheet"), the location of the style sheet via the "ref" attribute and the type of style sheet being linked: “text/css”

You can also set up a so called "alternate style sheet". This is an external style sheet that you offer to the reader so he can choose which style sheet he wants and subsequently which mark up he prefers. The syntax is the same as for the default external style sheet except for the REL element: this becomes REL="alternate style sheet". The value you use in the TITLE attribute will generate a list of style alternatives for the reader to choose from.

Another way to apply CSS is by using the STYLE element.

The STYLE element appears in the HTML document itself and should always use the attribute TYPE. In case of CSS, the value for TYPE is text/css. When using this technique, you're using a container that starts with an opening tag containing STYLE TYPE="text/css" and finishes with a closing STYLE tag. Between the opening and the closing tag you need to place your styles. Those are better known as the "document style" sheet or the "embedded style sheet". This sheet can contain styles that apply to the HTML document but it can also contain links to an external style sheet, using the "@import directive".

Now let's examine this a bit deeper.

The @import directive can be used to let the web browser load an external style sheet, just like the LINK element. The difference between them is the syntax and the placement. The @import directive is placed inside the STYLE container. It must be placed there and before all other CSS rules. If not, it will not work.

Another difference is that, when you use several @import statements, they all will be loaded, where as this will not be the case with the LINK element.

The @import directive can be used to take advantage from the fact that older browsers do not support (or do not fully support) CSS. Navigator 4.x for instance does not recognize the @import directive and consequently will not load the style sheet.

Like i already mentioned, the STYLE container can also contain styles that apply to the HTML document: the “actual styles”.

hari

For instance:

P {color: blue;}

This will set the paragraph element to be blue. Using CSS directly in your page

Besides the actual styles i just mentioned, there are styles directly applied inside the page.

They too use the STYLE element. They are there for cases where you want to assign a simple rule to an element, without having the need to use an embedded or external style sheet. These types of styles are referred to as "inline styles".

Where actual styles comprise the bulk of an embedded style sheet, inline styles are used for a simple "shortcut" to style an element. The syntax is almost the same as the declarations of the actual styles but the curly brackets are replaced by double quotation marks. CSS Comments

Just like HTML, CSS also provides for you to make comments. The syntax is completely different from HTML comments: the comments are surrounded by @/*@ and @*/@ .

So you get something like @/* this is my CSS comment */@.

CSS comments can not be nested. Besides that there is one major rule to keep in mind: if you have several rules and you need to comment them alongside, make sure that each comment line is wrapped in comment markers. If you don't do this, the comment rules without markers will become part of the comment and will not work:

@h2 {font-size : small;} /* a comment that is two */ h2 {font-size : small;} /* lines long */@

CSS is a web standard that describes style for [[XML]]/[[HTML]] documents. You might want to start by reading a "beginners tutorial":http://friendlybit.com/css/beginners-guide-to-css-and-standards/

http://www.look4hotel.org/sitemap.html

http://www.look4hotel.org/sitemap.xml

CSS is a web standard that describes style for [[XML]]/[[HTML]] documents. You might want to start by reading a "beginners tutorial":http://friendlybit.com/css/beginners-guide-to-css-and-standards/

http://www.look4hotel.org/sitemap.html

http://www.look4hotel.org/sitemap.xml

You will notice that after a while you are writing the same styles for different elements or want to use different styles for one element (or a group of elements for that part). Hence the practice of "grouping".

*You can group selectors, declarations or everything.* Let's say you want all your heading levels to have the same color. Instead of making a rule for each heading separate, you can group them like this:

H1, H2, H3, H4, H5, H6 {color: blue;}

Or maybe you want your paragraphs and just your heading level 4 to be blue? No problem:

3

H4, P {color: red;}

Okay, but i want my H1 to have blue text, Arial font, font-size of 18 pixels and with a red background. Now what? Do i have to write three times those rules with H1? Of course not. You'll group your declarations like this:

H1 { font : 18px Arial; color: blue; background: red;}

Okay, now you know how to group selectors and declarations. Let's mix all this into one single method of grouping. Let's just group everything.

I want all of my headings to have a blue color with a red background and Arial font with a font-size of 18 points. Well, no problem:

, H1, H2, H3, H4, H5, H6 {font : 18pt Arial; color: blue; background: red;}

Or maybe your paragraphs and just your headings with level 4 and 6 need these styles? Here you go:

H4, H6, P {font : 18pt Arial; color: blue; background: red;}

-"DZINE":http_grouping.htm -"DZINE":http://www.dzinelabs.com/Pages/tutorials_grouping.htm

*CSS Hacks* are a recommended way of dealing with [[CSS]] stylesheet interpretation inconsistencies. CSS Hacks are generally targetted at IE, which has the largest market share but relatively poor CSS standards support in the versions 5 and 6 that are in common use.

There are a few basic approaches to CSS Hacking:

* "Conditional comments":#conditional_comments - the benefit of these is that they are officially recommended by Microsoft, the downside is that they are only available in HTML and cannot be used in CSS directly. They also require the use of a non-standard extension to HTML created by Microsoft and will only work in IE or browsers that use the IE rendering engine.

* "In-CSS hacking":#css_hacking - the benefit of these is that they are part of the CSS standard, and are evaluated and interpreted correctly by standards supporting browsers. The disadvantage is that they may add unncessary or excessive markup to the stylesheet.

* "Invalid-CSS hacking":#invalid_css_hacking - the benefit of these techniques may be ease of use or markup clarity, however they will throw errors or warnings when parsed by a w3c stylesheet validator as they are outside of the official CSS grammar specification.

<h2 id='conditional_comments'>Conditional Comments</h2>

Due to its relatively poor level of standards support, [[IE|Internet Explorer]] tends to be the subject of most CSS hacks. Luckily, as of [[IE5|version 5]], it deliberately supports a rather safe-to-use hack: conditional comments. Conditional comments are specially constructed [[HTML]] comments that Internet Explorer on [[Windows]] may treat differently from other [[web-browser|browsers]], [[web-browsers|browsers]], optionally based on IE's version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer's Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the [[OSX|Mac]] uses a different layout engine and doesn't support conditional comments.

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.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don't match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn't match). Note that, since versions of IE older than IE 5 don't support conditional comments, you may get unexpected results in those browsers.

h3. Syntax

The syntax for conditional comments is as follows:

<pre><code>

Positive

<!--[if condition]> HTML <![endif]-->

Negative

<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

*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

</pre></code>

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

_HTML_ is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions, @<![IGNORE[--><![IGNORE[]]>@ can be replaced with @-->@ if the condition is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The @<![IGNORE[ ... ]]>@ directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into two special conditional comments: @<!--[if !condition]> XHTML <![endif]--> <!--[if !IE]>--> XHTML <!--<![endif]-->@ where XHTML is the same both places. Note that Internet Explorer 7 and below don't yet recognize XHTML as a form of XML, so this is merely forward-looking.

Warning: Internet Explorer was not designed to allow multiple versions to be installed at once. Although there are some hacked third party packages available that attempt to do this, the browsers still rely on a common centralized registry for certain data, including version information. If you use these hacked stand-alone distributions of Internet Explorer, version selectors in conditional comments will not work as expected. The best solution may be to use a separate "virtual machine":http://www.vmware.com/products/free_virtualization.html for each version of Internet Explorer.

h3. Conditional comments as a CSS hack

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:

<pre><code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>Test</title>

<link href="all_browsers.css" rel="stylesheet" type="text/css">

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

</head>

<body>

<p>Test</p>

</body>

</html>

</pre></code>

In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers.

See also: "MSDN: About Conditional Comments":http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

<h2 id='css_hacking'>In-CSS hacks</h2>

One of the drawbacks of conditional comments is that they require changes to the HTML source. Unfortunately, there is no equivalent to conditional comments in CSS. Instead, if you must use in-CSS hacks, you must use some other much less reliable techniques, often involving the exploitation of browser bugs.

h3. Easy selectors

Most in-CSS hacks deal with selector bugs. The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them. Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers. All of these selectors use valid CSS.

<pre><code>

IE 6 and below

* html

IE 7 and below

*:first-child+html, * html

IE 7 only

*:first-child+html

IE 7 and modern browsers only

html>body

Modern browsers only (not IE 7)

html>/**/body

Recent Opera versions 9 and below

html:first-child

</pre></code>

Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack.

The above selectors will select either the html or body element. This should be used as the start of your full selector. For example, if your desired selector is #foo .bar and you want it to apply only to IE 7, your resulting selector will be @*:first-child+html #foo .bar@.

Warning: Due to the nature of the [[Opera]]-specific selector and Internet Explorer 7's incorrect handling of :first-child, it is very possible that the html:first-child selector may also select in a future version of Internet Explorer, so be careful when using it. This selector also relies on a bug, so it may be fixed in a future version of Opera.

h3. Minimized attribute selectors

These hacks are based on differences in handling of attributes in minimized form. If a tag is written @<input disabled>@, input[disabled="disabled"] {} should select it. However, most browsers get this wrong and in different ways.

<pre><code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>Test</title>

</head>

<body>

<input type="hidden" disabled id="attrhack">

<p>Test</p>

</body>

</html>

</pre></code>

For the above markup, here are the selectors various browsers recognize to select the p element:

<pre><code>

#attrhack[disabled=""]+p {}

Firefox 1.5 and below, possibly future versions

Safari 2.0 and below, possibly future versions

Konqueror 3.5 and below, possibly future versions

#attrhack[disabled="true"]+p {}

Opera 9 and below, possibly future versions

</pre></code>

Note that neither of these selects Internet Explorer 7. Although it supports attribute selectors and adjacent sibling combinators, it doesn't seem to recognize a string value for attributes in minimized form.

p(notice). Notice: Minimized attribute form is allowed in HTML but not in XHTML. This hack will not work in XHTML documents.

h3. !important

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.

Here is an example of this technique in use:

<pre><code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>Test</title>

<style type="text/css">

p

{

background: green !important; /* Major browsers other than IE 6 and below respect the importance immediately */

background: red; /* IE 6 and below use this value instead, even though the above was marked as important */

}

</style>

</head>

<body class="page-body">

<p>Test</p>

</body>

</html>

</pre></code>

h3. @import "non-ie.css" all;

Internet Explorer 7 and below don't support media selectors on @import rules, instead ignoring the entire rule when they are present. Therefore, you can create an entire stylesheet for non-IE browsers and import it into your main stylesheet by adding @import "non-ie.css" all;.

Future versions of Internet Explorer may support the @import rule correctly.

@import "stylesheet.css" all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.

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: <body class="page-body">. 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:

<pre><code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<title>Test</title>

<style type="text/css">

p

{

background: red; /* Applies to all major browsers */

}

body[class|="page-body"] p

{

background: green; /* Applies to IE 7 and most modern browsers except Opera */

}

</style>

</head>

<body class="page-body">

<p>Test</p>

</body>

</html>

</pre></code>

body[class|="page-body"] {} selects the body element with the class page-body in Opera 9 and below. It may or may not work in future versions.

<h2 id='invalid_css_hacking'>Invalid-CSS Hacks</h2>

If you are going to use hacks, the above techniques are the recommended choices. However, invalid CSS hacks may be interesting as well.

h3. _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.

<notextile><h3>*property: value</h3></notextile>

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.

h3. 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. This uses invalid CSS 2.x but valid CSS 3 according to recent drafts.

h3. >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 <notextile>*>body, while other browsers ignore it because it's a parsing error. Similarly, IE7 treats >> like *>*>*.</notextile>

IE7 has the same quirk with other combinators. +p is treated like <notextile>*+p and ~p is treated like *~p. (Note: The ~ combinator is an upcoming CSS 3 feature and is not valid CSS 2.1.)</notextile>

>body {} selects the body element in IE 7 only. It may or may not work in future versions.

<notextile><h3>*html</h3></notextile>

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 <notextile>** like * *</notextile>.

@html* {}@ selects all descendants of the html element in IE 7 and below. It may or may not work in future versions.

h3. !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.

<notextile><h3>!important!</h3></notextile>

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.

h3. Article References

* This article originated from text originally written by "David Hammond":http://www.webdevout.net