Recently I was confronted with some lectures about certain topics relating to Cascading Stylesheets. I decided to write a short summary to remember and use these things as I need them in future projects.

1. CSS-Sprites

CSS-Sprites are the idea of using one large as background for multiple graphics on a web page. Relative positioning of the background always guarantees that the correct part of the “master image” is displayed.

Example of Sprites

(only the correct button is displayed on the page).

Why use CSS-sprites?

• the performance of a site with high traffic is much better
• there is only one HTTP-Request required, instead of many (also a performance thing)
• changing the design can be much faster, if there is only one image (imagine you have to build a lot of child theme sites)

Disadvantages

• can become complex if over-used or with big webpages
• problems with dynamic layouts, if there are changes on the site (be careful)

Implementation

background-position: 123px 123px;

Further instructions and examples

http://www.css-tricks.com/date-display-with-sprites/

2. Less CSS

Less CSS is a project to use variables, mixins, nested options and nested rules with CSS (Why is this not possible with native CSS?) It is an interresting way to simplify and speed up CSS development.

Example

/* variables */
@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

/* mixins */
.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

/* nested rules */
#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

/* operations */
@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer {
  color: (@base-color + #111) * 1.5;
}

Why use CSS-sprites?

Because they faster and cleaner CSS development is possible, with even more possibilities. The CSS must be interpreted by Javascript or PHP before it is usable by a browser – of course this is a performance desaster – but you can use one-time interpreted CSS for your project in the end, so there is no need to do this on a running website!

Implementation and further instructions

http://lesscss.org/

Recently I was confronted with some lectures about certain topics relating to Cascading Stylesheets. I decided to write a short summary to remember and use these things as I need them in future projects.

3. Use Cross-Browser @font-face

@font-face is an very old CSS property, which makes it possible, to use any font on a website, which you want to (as long as you have the rights to do this). This is less work to do than using images and much more interresting than only using the standard fonts.

Example of @font-face

You can also use exotic fonts as normal (robot readable) fonts on a website, like this:

Why use @font-face?

• individual websites with artistic elements can use normal text

Disadvantages

• implementation and conversion may cost some extra minutes
• maybe legal problems with commercial fonts

Implementation

For cross-browser implementation, you have to provide your font in at least 3 formats currently –  EOT,WOFF and TTF.

@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6-8 */
  src: local('☺'),
        url('myfont.woff') format('woff'),  /* FF3.6, IE9 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
}

h1 {
  font-family:'WebFont',Arial,Helvetica,sans-serif;
}

Further instructions and examples

http://www.font2web.com/ (convertes a font from one font format to all expected formats)

http://www.fontsquirrel.com/ (a lot of FREE fonts to use with your web project)

http://paulirish.com/2009/fighting-the-font-face-fout/ (prevent Firefox to show the wrong font, solve a lot of forther problems)

This might list might be continued…