Webmaster Kit » Blog Archive » CSS2 Browser Compatibility

CSS2 Browser Compatibility

CSS2 specification opens new opportunities for web developers but before applying new features webmaster should know how popular browsers support them.

Descendant selectors

Syntax:

E1 E2
The following rule should set the font-style of all P elements that occurs anywhere within a PRE:

CSS code:

pre  p {font-style: italic;}

HTML code:

<pre>
	
<p>This text should be italic style</p>
	
<div>
	
 <p>This text should be italic style too</p>
	
</div>
	
</pre>

IE 6.0 and Firefox 1.0.1 display the same correct result.

Child selectors

Syntax:

E1 > E2

A child selector matches when an element is the child of some element.

The following rule should set the font-style of all P elements that are children of DIV:

CSS code:

pre > p {font-style: italic;}

HTML code:

<pre>
	
<p>This text should be italic style</p>
	
<div>
	
 <p>This text should NOT be italic style</p>
	
</div>
	
</pre>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the child selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

Adjacent sibling selectors

Syntax:

E1 + E2

The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2.

CSS code:

pre + p {text-transform: uppercase;}

HTML code:

<pre>
	
<p> Adjacent sibling selectors </p>
	
</pre>
	
<p> This text should be upper case </p>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the adjacent sibling selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

Attribute selectors

CSS2 allows authors to specify rules that match attributes defined in the source document.

CSS code:

a[rel] { background-color: grey; }
	
a[rel=nofollow] { background-color: yellow; }
	
a[title~=\"selectors\"] { background-color: red; }
	
a[title|=\"css\"] { background-color: green; }

HTML code:

<p><a rel=\"copyright\" href=\"\">©2005 SafeSoft</a>
- This link should have grey background</p>
	
<p><a rel=\"nofollow\" href=\"\">Google</a> 
- This link should have yellow background</p>
	
<p><a title=\"Attribute selectors\" href=\"\">Attribute selectors</a> 
- This link should have red background</p>
	
<p><a title=\"css-compatibility\" \">CSS Browser Compatibility</a> 
- This link should have green background</p>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the attribute selectors. FireFox 1.0.1 displays the text according to CSS2 specification.

ID selectors

CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a “#” immediately followed by the ID value.

CSS code:

h2#m01 {color : blue;}

HTML code:

<h2 id=m01>ID selectors</h2>

IE 6.0 and Firefox 1.0.1 display the text according to CSS2 specification.

Pseudo-classes

:first-child pseudo-class

The :first-child pseudo-class matches an element that is the first child element of some other element.

CSS code:

div p:first-child strong {color : blue}

HTML code:

<div>
	
<p><strong>:first-child</strong>  should be black blue<p>
	
<p><strong>second</strong> paragraph should be black<p>
	
</div>

Screenshots:

FF 1.0.1

IE 6.0

IE 6.0 doesn’t support the :first-child pseudo-class. FireFox 1.0.1 displays the text according to CSS2 specification.