CSS tips and tracks

1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:

2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}

3. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word.
h1 {
text-transform:uppercase;
}
h2 {
text-transform:capitalize;
}
p {
text-transform:lowercase;
}

4. CSS Transparency Setting for all browsers
Yes, I can never able to remember it, so I guess it’s a must to list it out here for future reference.
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

5. Force page breaks when printing your document
When you’re creating a printer friendly webpages, you want to know about these property. More about printing CSS property.
h1{
page-break-before:always;
}

h2{
page-break-inside:always;
}

6. CSS Tooltips
So, you must be thinking, we will need javascript to make tooltips! 🙂
a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}