Conditional CSS
Transcript
Conditional CSS
Conditional CSS Gabriele Murara Problema ● La visualizzazione tramite browser di siti web che utilizzano HTML + CSS risulta differente a seconda del browser che si va ad utilizzare. A chi attribuire la colpa 1. Errori nel markup: una pagina scritta in HTML non corretto. 2. Errori di digitazione nel CSS: mancanza di punti e virgola, chiusura di parentesi graffe, errati nomi delle proprieta' e dei loro valori. 3. Errori concettuali nel CSS: fogli di stil improvvistati, carenza nella teoria di base. 4. E' colpa del browser..... Errori di markup ● L'HTML non e' scritto in maniera corretta. Alcuni esempi: • Tag aperti e mai chiusi (<div> senza </div>) • Utilizzo di <br> al posto di <br /> • Il tag <head> non contiene il tag <title>; • Nel tag <ul> oppure <ol> sono racchiusi tag diversi da <li> • Nel tag <img> non e' presente l'attributo ”alt” Validazione HTML http://validator.w3.org/ Errori di digitazione CSS ● Il codice CSS non e' scritto nella maniera corretta. Alcuni esempi: – Mancanza di punto e virgola che determina la fine di un'istruzione css; – Mancanza di parentesi graffe che determinano la fine di un blocco di istruzioni css. – Errore nella digitazione di un selettore, del nome di una proprieta' oppure di un suo valore. – Mancanza dell'unita' di misura. Validazione CSS : http://jigsaw.w3.org/css-validator/ Errori concettuali nel CSS ● Mancanza della teoria di base e applicazione scorretta dei concetti CSS. In questo caso gli unici rimedi sono l'approfondimento della materia e avere sotto mano una guida che faccia riferimento agli standard. Il browser non segue gli standard ● ● In particolare: se si crea una pagina web seguendo gli standard W3c, browser quali Firefox, Opera, Google Chrome, Safari, ecc.. la pagina tendera' ad essere visualizzata in maniera corretta. Al contrario: se si visualizza la stessa pagina con Internet Explorer (qualsiasi versione) si possono notare delle differenze di visualizzazione dovute al fatto che Microsoft, nell'implementazione dei suoi browser, ha sempre seguito i ”suoi standard” piuttosto che quelli del W3c. Diverse tipologie di browser ● Si deve tener conto anche di browser che vengono utilizzati su dispositivi diversi dal normale personal computer, ad esempio: ● Pocket PC, PDA, Palmari; ● Ipod, Iphone; ● Wii, DS, Psp. Soluzione del problema ● Per ovviare a queste diversita' di visualizzazione negli anni passati sono state utilizzate diverse tecniche quali: – Utilizzo di un miscuglio di proprieta' CSS che vadano bene sia per IE che per gli altri browser. – Utilizzo di controlli JavaScript che modificano le proprieta' CSS di determinati elementi a seconda che si visualizzi con IE oppure con altri browser. – Diversi hack css ovvero dei ”trucchetti” che sfruttavano diversi bug di IE6 (altamente sconsigliati). Conditional CSS ● ● Negli ultimi anni si ha la possibilita' di inserire determinati commenti HTML, detti condizionali, all'interno del documento. I commenti condizionali permettono di rilevare quale browser si sta utilizzando e di conseguenza applicano lo stile adeguato. Rifacciamoci alla programmazione ● Come abbiamo visto avvicinandoci alla programmazione Javascript, e' possibile specificare nel codice un costrutto del tipo: if (condizione) { [esecuzione di un blocco di codice] } else { [esecuzione di un altro blocco di codice] } Sintassi Nello stesso modo possiamo inserire nell'HTML dei commenti che hanno una forma molto simile: <![if IE]> <style type="text/css"> body { ... } </style> <![endif]> ● In questo modo il codice all'interno del commento sara' logicamente commentato, ma verra' utilizzato dal browser nel caso si tratti di un Internet Explorer. Identificazione del browser ● Nel commento condizionale si puo' specificare il tipo di browser: * IE - Internet Explorer * Gecko - Gecko based browsers (Firefox, Camino etc) * Webkit - Webkit based browsers (Safari, Shiira etc) * Opera - Opera’s browser * IEMac - Internet Explorer for the Mac * Konq – Konqueror * IEmob - IE mobile * PSP - Playstation Portable * NetF - Net Front Operatore condizionale ● ... e l'operatore che permettera' il verificarsi o meno della condizione: *! * eq * lt * lte * gte * gt - Diverso - Uguale a - Minore di - Minore di o Uguale a - Maggiore di o Uguale a - Maggiore di NB: questi operatori si riferiscono alla versione del browser!! Tipi di impiego ● Internal <style type="text/css"> h1 { color: #FF0000; } </style> <![if IE]> <style type="text/css"> h1 { color: #0000FF; } </style> <![endif]> Tipi di impiego (2) ● External <link rel="stylesheet" href="tutti.css" type="text/css" /> <![if IE]> <link rel="stylesheet" href="iexplorer.css" type="text/css" /> <![endif]>