CSS Shorthand: Font, Background, List Style and More

Not using shorthand CSS is I think the most common mistake that we do as a web developer. Shorthand for CSS properties like font, background, border and more are oftentimes ignored and not even know the syntax is. The advantage of shorthand CSS is to save lines of code and not to mention that you can easily update them. Here are some css shorthand samples:

FONT:

Syntax:

  
.body{
 font: font-style font-variant font-weight font-size/line-height font-family;
}

Sample:

  
.body{
 font: normal small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

BORDER:

Syntax:

  
.myClass{
  border: border-width border-style border-color;
}

Sample:

  
.myClass{
  border: 1px solid #CCC;
}

BACKGROUND:

Syntax:

  
.body{
 background: background-url background-repeat background-attachment background-position background-color;
}

Sample:

  
.body{
 background: url('image/sample.png') no-repeat scroll 0 0 #FFF;
}

LIST-STYLE:

Syntax:

  
.mylist{
  list-style: list-style-type list-style-position list-style-image;
}

Sample:

  
.mylist{
  list-style: disc outside url('images/test.png');
}

TIPS: Internet Explorer CSS Hacks

Even though it is not a best practice to use hacks in targeting IE6, IE7 and IE8 stylesheets, it is still important to know when and how you can use them. And besides, it is fun to fix IE issues, right? :))

Hacking IE8 and Below
Using "\9", you can target Internet Explorer 8 and below. Appending it on your style and let the magic happens.
For example:

#myId {
  color:red ; /*this will affect all browsers including IE */
  color:blue\9; /* this will override the style above on IE8 and below browser*/
}

IE7 and Below
Using star (*) symbol on before the style.

#myId {
  color:red ; /*this will affect all browsers including IE */
  *color:blue; /* this will override the style above on IE7 and below browser*/
}

And lastly, the OLD IE6
Targeting IE6 is by using the underscore before the style, like this:

#myId {
  color:red ; /*this will affect all browsers including IE */
  _color:blue; /* this will override the style above on IE7 and below browser*/
}

Please take note that I’m not promoting to use hacks here. I only used these hacks if there are one or two changes. If there are handful changes, please make sure that you use the CSS conditional statement for better maintenance and avoid confusions.

CSS Font-Size Conversion

It was my second time to make an HTML Email for my client in an online job. The last time I did this stuff I consumed 5 hours in just a single email even though the design is quite simple. One of my last issue in this stuff is the font-size for each Email Services such as ymail, gmail, aol and hotmail. So for the second time, I prefer to look first for CSS font-size conversion and read the HTML Email guidelines in Campaignmonitor. After reading the guidelines the email is took only 1 hour and half. :)

I found this one. Thanks for this site: http://reeddesign.co.uk/test/points-pixels.html

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

Creating Rounded corner using CSS

What is Rounded Corner?
 
Rounded corners in the first sense gives a site stunning and elegance look especially when there is rounded navigation menu The CSS border radius property will allow developers to use rounded corners in their design elements without the need of a rounded images or use of several elements to met the rounded design.

Even it was released since 2005 the border radius property has discrepancy with regards to browser compatibility especially with IE browsers.

Basic example:

This box should have rounded corners for Firefox, Safari/Chrome, Opera and IE9.

CSS SPRITES

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?

2. CSS IMAGE SPRITES: HOW TO CREATE CSS SPRITES FOR BLOG ICONS, WEB SITE ICONS
Combine all those blog icons or Web site icons into 1 single image and use CSS positioning to display them all where needed. Your pages will load faster since you'll save bandwidth, HTTP requests, and more. Learn how in this CSS sprites tutorial.

3. Exactly How to Use CSS Sprites
Today, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests that are made. As always, feel free to ask any questions in the comments area.