http://blog.DoZarte.com

Dopo i 10 migliori hack da usare con i CSS, ecco altri 15 trucchi da usare con i CSS…

1.

Nascondi il testo con la rientranza del margine:
text-indent:-9999px;/*Hide Text, keep for SEO*/

2.

Cross browser min height:
#container { min-height:500px; } * html #container { height:500px; }
…oppure…
#container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

3.

Evidenzia i target:_blank links:
a[target="_blank"]:before,
a[target="new"]:before {
background:#ff9;
}

4.

Evidenzia i link che puntano a file PDF o DOC:
a[href$="pdf"]:after,
a[href$="doc"]:after {
background:#ff9;
content: " (PDF)";
}
a[href$=".doc"]:after {content: " (DOC)";}

5.

Usare le pseudo classi in ordine (la regola LVHA):
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

6.

Usare…
overflow:auto
…nei DIV che contengono materiale che ’sborda’

7.

Usare il pagebreak per separare i commenti dai post (printer friendly):
#comments {page-break-before:always;}

8.

Dai uno stile alle Liste Ordinate (OL):
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

9.

Crea immagini ridimensionabili via CSS:
<div class="resize2"><img src="image.jpg" alt="" /></div>
.resize2 {
border: 3px double #333;
float: left;
height: 12em;
margin: .2em 1em 1em 0;
overflow: hidden;
width: 12em;
}
.resize2 img {
margin: -220px 0 0 -210px;
padding: 6em 0 0 6em;
}

Gli atri 6 sono:

• crea un effetto roll-over sulle liste di link
• resetta gli stili CSS
• usa i capilettera ingranditi
• la trasparenza cross-browser
• angoli arrotondati via CSS

fonte: DevSnippets