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
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
thanks for mentioning me
ps is this quick tags some plugin your using..?
Great, thank you 😀
ottima selezione.
e capita proprio a fagiuolo credimi!
Thanks You 🙂
You are welcome!
Per fare in modo che Microsoft Internet Explorer – dalla versione 5 fino (attualmente) alla versione 8 – riconosca gli pseudo selettori disponibili in CSS3, esiste un hack che consiste in 2 file JS da includere nelle nostre pagine.
http://web.archive.org/web/20100617162822/http://www.keithclark.co.uk/labs/ie-css3/
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!