What CSS Sprites does?

It is obvious that a large number of images will cause a site to take extra time for loading. As a result, pages will load slowly and the visitor will have to wait. To avoid this, the CSS property of sprites is used which ‘combines the various images to form a single image’ and helps a page comprising of images to load faster.

How does it work?

CSS Sprites are used in conjunction with background position property in CSS to create a master image which is a collection of a number of images.

• First individual sprites are collected
• Each of them is them placed together to create master image with proper spacing between them
• CSS background positioning is used to set the position of the sprites or images

How does it help?

Every image if left as it is on a web page, and when a request is sent to the web server, it takes a lot of time for the page to load as all are separate images. However if such images are combined to form a single file and then positioned with CSS, the request made will be reduced to one (for multiple images).  The less the number of HTTP requests, faster is the site loading speed.

Why to use CSS Image Sprites?

• If a site has a large number of images to display in its pages, CSS Sprites make it easy to manage by creating a master image, reducing the file size and as well as loading time. Overall it will enhance the performance of a site.
• The use of CSS Sprites reduces the number of HTTP requests which again help reducing the loading time.
• CSS Sprites help in optimizing the web pages
• Bandwidth can be saved using this CSS Property

A Note

It must be noted that every image cannot be used or is not suitable as a Background. However there is a possibility that developers in order to reduce HTTP requests may use an incorrect image. It can negatively affect the accessibility.

How to make use of CSS Sprites?

Creating CSS Sprites is not a tough job and with availability of several CSS Sprites generators, developers can now make use of this powerful technique to take advantage.

We look forward to get valuable suggestions from the readers.

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.

When you re-design a tag and it matches the preference of the search engines, it helps to make it SEO optimized. It is also said that if your keywords are stationed within the tags, the Google ranking would increase. All the tags can be altered or re-styled using CSS to stay fully compliant according to the W3C standards while designing the website.

Whenever the web designers argue on CSS’ compatibility with Google, Cascading Style Sheets turn out to be good for Google because:

• Smaller file size is possible with CSS

When CSS file is used instead of styles available in HTML, the file size is automatically reduced as the coding is trimmed down. Google prefers webpages with shorter coding. It is advisable to restrict the page size to 100KB.

• Greater control of page structure can be accessed

Without compromising on the look and feel of the page, CSS allows you to craft the document compliant with HTML standards. Many designers ignore the standards but Google felicitates the pages which are well structured keeping in view the standards and guidelines. Designers can play with CSS and create attractive designs along with getting their pages accredited by Google.

• Some content can stay hidden from the browsers, still Google picks it up

In certain circumstances, CSS allows your content to remain hidden from specific browsers. Some prefer their content to be available only for print and not for display while there could be content only available for view but not for print. Google indexes the hidden content and one can reap the benefits.

• Browser compatibility

Different browsers interpret CSS coding in various ways. Some old browsers are not capable enough to read CSS even. Ensure cross browser compatibility and acceptability of HTML pages without CSS across all browsers.