ONE: “When styling fonts with CSS you may be doing this:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;
There’s no need though as you can use this CSS shorthand property:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
Much better! Just a few of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don’t specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.”
TWO: “The box model hack2 is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:
#box {
width: 100px;
border: 5px;
padding: 20px;
}
This CSS rule would be applied to:
This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions on PC. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy.
A simple alternative is to use this CSS:
#box {
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
And the new HTML would be:
Perfect! Now the box width will always be 150px, regardless of the browser!”
I’m sure there will be more to come, but these two are a great place to start with making better CSS-based sites.
Ref: http://waxjelly.wordpress.com/2007/03/16/css-tricks-you-may-not-know-pt-1/
Related posts:
