There is much discussion about CSS 3 and the various improved features that it has introduced to further enhance the presentation of content on a website. There is no doubt that CSS 3 brings with it many interesting functions that allow designers to fuel their creativity and create novel designs.
In this write-up, we are going to highlight those aspects which act as distinguishing factors between CSS 2.1 and CSS 3 and also show the improved capabilities of the latter.

CSS Selectors

CSS 3 comes with many new selectors with which style properties of various elements can be determined. Some of these are:

• General Sibling Selector (Combinator)
  This selector matches and targets all the siblings of a given element. It is not necessary however that the elements be adjacent siblings.
  Example:
  h1 ~ pre represents a pre element following an h1. It is a correct and valid description (but partial) of:
  <h1>Definition of the function a</h1>
  <p>Function a(x) has to be applied to all figures in the table.</p>
  <pre>function a(x) = 12x/13.5</pre>
  
• Child Selector
  This Selector shows the relationship between two elements and targets those elements which are children of a particular element.
  Example:
  The following selector represents a p element that is child of body:
  body > p
  The following example combines descendant combinators and child combinators.
  div ol>li p
  It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the “>” combinator has been left out.
• Attribute Selector
  Unlike CSS 2.1 where one has to make match on a complete string of an attribute, CSS offers the flexibility to make matches anywhere within an attribute, be it beginning or end. It can also make matches to any sub string if present in an attribute. In other words, it allows partial matches to attribute values.
  Example:
  • [attr^=val] –- matches a Document object model element (DOM) with the attribute attr and a value starting with val
  • [attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix val
  • [attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring val

Border Radius

With this additional feature in CSS 3, one can create rounded corners without getting into trouble of writing extensive codes. This feature is currently supported by Firefox, Safari, Chrome and only Internet Explorer 9 Beta.
Example:
One length value:
#ex1 {
-moz-border-radius: 1em;
border-radius: 1em;
}
Different value length:
#ex2 {
-moz-border-radius: 2em 1em;
border-radius: 2em 1em;
}
Individual corners:
#ex3 {
border-top-left-radius: 1em;
}
#ex3 {
border-top-right-radius: 1em;
}
#ex3 {
border-bottom-right-radius: 1em;
}
#ex3 {
border-bottom-left-radius: 1em;
}

Border Image

It is another attractive property that CSS 3 offers as against CSS 2.1 which allows using an image as a border for an element. One can set values for Border Image and border-corner-image. It works in Safari and Firefox 3.1.
Example:
.border-image-example {
-webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;
-moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;
border-image: url(border-image.jpg) 45 20 45 30 repeat;
}

.border-image-example {
border-image: url(bg-border.jpg) 45 20 45 20 repeat;
}

.border-image-example {
border-image: url(bg-border.jpg) 45 20 repeat;
}

Multiple Backgrounds

With CSS 2.1, one could not create multiple backgrounds for a single element but with CSS 3, this has been made possible and one may use multiple background images for one element.
Example:
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

Colors and Opacity

CSS 3 comes with an ability to add transparency to an element and its color schemes have been enhanced to add this factor as well. It now offers HSLa (hue, saturation, lightness, alpha) and RGBa (red, green, blue and alpha) wherein a stands for opacity or transparency. Now colors can be defined as rgba (x, x, x, x) or hsla (x, x, x, x). The feature is supported by Firefox, Safari, Chrome, Opera and IE7.
Example:
This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;opacity:1.0;
Opacity 0.8.
background-color:#30f;color:#fff;width:100%;opacity:0.8;
Opacity 0.5.
background-color:#30f;color:#fff;width:100%;opacity:0.5;
Opacity 0.2.
background-color:#30f;color:#fff;width:100%;opacity:0.2;

Multi Column Layout

It is a significant improvement that CSS 3 offers over CSS 2.1 to designers and developers. This property allows creating the desired number of columns by making the required specifications regarding column width, separator, column gap width, etc.
Example:
Column width:
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
Column count:
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

BOX Shadow

This feature is surely a welcome one as no longer one needs to use a shadow image to create a shadow effect. Prior to CSS 3, JavaScript was used for creating shadow to an image but now with BOX Shadow feature, one can add shadow to any element on the website. However it is currently supported by Firefox 3.1, Safari and Chrome only.
Example:
#example1{
box-shadow:10px10px5px#888;
}
But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:
#example1{
-moz-box-shadow:10px10px5px#888;
-webkit-box-shadow:10px10px5px#888;
box-shadow:10px10px5px#888;
}

The above mentioned were few of the various features/ functions which draw a line between CSS 3 and CSS 2.1 and make the former a better version of the latter. The only thing which is required now is full compatibility of CSS 3 with all the major browsers.

Comments

About Author