I migliori hack CSS

Se siete dei programmatori di siti web sicuramente date una certa importanza a creare del codice cross-browser, e del codice CSS e XHTML valido.
Sicuramente saprete anche quanto tempo si perde ogni volta in tutti quegli “hack” e “fix” per i vari browser!

Stylized Web ha creato una lista dei 10 hack e trucchi più utili che possono aiutare i programmatori di siti a salvare un po’ di tempo nella scrittura di codice…

Vertical align div

http://stylizedweb.com/2008/02/01/vertical-align-div/

Min-Height

selector {
min-height:500px;
height:auto !important;
height:500px;
}

PNG trasparenti

(clicca qui)

Autoclear

.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac */
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

Reset CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}

Scrolling Render Internet Explorer

html {
background : url(null) fixed no-repeat;
}

Opacità

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

LI: sfondo ripetuto in Internet Explorer

<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>

Buono a sapersi…

@charset “UTF-8?;

/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}

/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}

/* ———————————————————————-
WinIE6
———————————————————————- */
/**/
* html selector{property:value;}
/**/

/* ———————————————————————-
MacIE
———————————————————————- */
/**//*/
selector{property:value;}
/**/

Nascondi il testo con la rientranza del margine

text-indent:-9999px;/*Hide Text, keep for SEO*/

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*/
}

Evidenzia i target:_blank links

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

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)";}

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;}

overflow: auto

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

Pagebreak

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

Liste Ordinate

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;
}

Immagini ridimensionabili

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 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

8 pensieri su “I migliori hack CSS”

  1. Internet migliore?
    Un internet in cui i browser vedano alla stessa maniera i css senza bisogno di farsi venire mal di testa affinché possano essere visualizzati bene da tutte le piattaforme.

    Viva gli standard w3c!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.