docConditional CSS
download 
Reclamo 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]>
