Si chiama stripegenerator, e altro non è che un generatore di strisce, per l'appunto. O per meglio dire, di pattern già belli e pronti da poter utilizzare come sfondo nei vostri siti.
Veramente carino!
Link: http://www.stripegenerator.com
<!--[if condizione]> HTML o CSS <![endif]-->
IE
lt IE version
lte IE version
IE version
gte IE version
gt IE version
Le versioni di Internet Explorer possono essere 5
, 5.5
, 6
o 7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="tutti_i_browser.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]> <link href="ie_6_e_precedenti.css" rel="stylesheet" type="text/css"> <![endif]-->
</head>
</html>
* html {}
*:first-child+html {}
html>body {}
html>/*
*/
body {}
html:first-child {}
Ad esempio, per applicare una particolare larghezza ad un div solo se visualizzato su Internet Explorer 7, dovremmo scrivere:*:first-child+html #miodiv{width:500px;}
!important
, e la ignorano se nello stesso foglio di stile appare un'altra dichiarazione della stessa proprietà. Questa caratteristica può essere utilizzata per nascondere alcune proprietà a IE 6 e ai suoi predecessori.p {
background: green !important;
background: red; /* IE 6 e precedenti usano questo valore */
}
@import
Internet Explorer 7 e precedenti non supportano la regola @import
, e la ignorano completamente. Quindi possiamo creare un foglio di stile esclusivamente per i browser non-IE, e importarla nel nostro documento scrivendo: @import "non-ie.css" all;
.
Le future versioni di IE però potrebbero correggere questo bug, quindi prestate attenzione nel suo utilizzo.
Internet Explorer 5 infatti non interpreta correttamente la larghezza di un elemento, qualora siano presenti margini (margin) o spaziature (padding). Anzichè considerare a parte questi valori, come fanno tutti gli altri browser, li considera inclusi nella larghezza, cosicchè l'elemento risulta più stretto (lo stesso vale per l'altezza).
Sarà quindi necessario scrivere una regola interpretata da tutti i browser e di seguito una regola valida solo per IE 5. Ci viene in aiuto l' invenzione di Tantek Celik, conosciuta come box model hack, e consiste nell'aggiungere al codice 'standard' le due voci voice-family: "\"}\""; voice-family:inherit;
:
Con questa sintassi IE5 interpreta tutte le regole elencate prima delle due voci
#header {padding: 10px; border: 1px; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 100px;}
voice-family: "\"}\""; voice-family:inherit;
, e ignora tutto ciò che viene dopo.Così facendo, IE 6 e IE 5 leggono la regola contenuta all'interno del selettore
#header {padding: 10px; border: 1px; width: 100px;}
*html #header {width: 150px; w\idth: 100px;}
*html
, ma, aggiungendo alla nostra regola w\idth:
, facciamo in modo che IE 6 tenga per buona quest'ultima. Il carattere di escape (\) infatti dovrebbe essere ingnorato, ma quando si trova all'interno del nome della proprietà non è ignorato da IE5 e IE5.5 per Windows. Invece fa in modo che questi browser ignorino il carattere successivo, rendendo così illeggibile per loro il nome della proprietà. Importante: il carattere di escape non deve venire direttamente prima di ciascuno dei primi sei caratteri alfabetici, perchè essi hanno significati speciali quando vengono preceduti da un escape. Nello specifico, i caratteri proibiti sono a, b, c, d, e, f. Inoltre, il carattere di escape non deve venire prima della prima lettera, perchè IE5.5 in qualche modo è in grado di ignorare l'escape quando viene per primo.La soluzione è piuttosto semplice. E' infatti sufficiente inserire una serie di caratteri prima e dopo il codice. Ecco un esempio:
/* Hack per IE-Mac \*/
#header {height:60px;}
#footer {height:40px;}
/* Fine hack */
IE-Mac ignorerà questi comandi a causa della presenza del backslash (\) prima della fine del commento.
<style type="text/css">@import url(stile.css);</style>
In questo modo, Netscape 4 mostrerà una versione del sito priva di stile grafico.
Per un elenco completo degli hacks per CSS, validi e non, vi consiglio una visita al sito Webdevout.
Un articolo sugli hacks e IE 7: http://gabrieleromanato.altervista.org/css/css-hack-ed-ie7/index.html
Esempio:
<!-- commento -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Esempio:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
VENETO | PADOVA | ANGUILLARA VENETA | ANGUILLARA VENETA | ago-08 | |
VENETO | ESTE | MEGLIADINO SAN VITALE | MEGLIADINO S. VITALE | ago-08 | |
VENETO | ESTE | SANTA MARGHERITA D’ADIGE | S. MARGHERITA D’ADIGE 2 | ago-08 | |
VENETO | ESTE | VILLA ESTENSE | VILLA ESTENSE | ago-08 | |
VENETO | ROVIGO | PIACENZA D’ADIGE | PIACENZA D’ADIGE | ago-08 | |
VENETO | ESTE | SANT’ELENA | S. ELENA D’ESTE | ago-08 | |
VENETO | ROVIGO | VESCOVANA | VESCOVANA | ago-08 | |
VENETO | PADOVA | ANGUILLARA VENETA | BORGOFORTE DI CONSELVE | ago-08 | |
VENETO | ESTE | SANT’URBANO | CARMIGNANO D’ESTE | ago-08 | |
VENETO | ROVIGO | BOARA PISANI | BOARA PISANI | ATTIVA | |
VENETO | ESTE | SANT’URBANO | CA’MOROSINI | ago-08 | |
VENETO | ESTE | PONSO | PONSO | ago-08 | |
VENETO | ESTE | SALETTO | SALETTO DI MONTAGNANA | ATTIVA |