Ciao a tutti, ho pubblicato un
articolo su un programma molto utile per chi lavora sotto Windows ma la prima cosa che ha fatto quando si è ambientato sul web è stato abbandonare IExplorer per passare ad alternative migliori, ma non solo. Si tratta di
IETester, programmino gratuito che permette di testare il nostro sito (anche in locale) con diverse versioni di Internet Explorer.
Ho pubblicato anche qualche accorgimento per ovviare al problema della diversità di interpretazione dei css soprattutto sotto internet explorer: li ripropongo qui ed aggiungo qualche alternativa.
- Commento condizionale da inserire tra tag <head> DOPO il css generale.
Esempio per
Joomla! 1.6:
<!--[if IE]>
<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
Elenco completo dei conditional comments disponibili:
<!--[if IE]> Per tutte le versioni di IE <![endif]-->
<!--[if IE 5]> Solo per la famiglia di IE 5 (IE 5.0, 5.5, ecc...) <![endif]-->
<!--[if IE 5.0]> Solo per IE 5.0 <![endif]-->
<!--[if IE 5.5]> Solo per IE 5.5 <![endif]-->
<!--[if IE 6]> Solo per la famiglia di IE 6 <![endif]-->
<!--[if IE 7]> Solo per la famiglia di IE 7 (la stessa sintassi si usa anche per IE8 ed IE9 cambiando solo il numero di versione...) <![endif]-->
<!--[if gte IE 5]> Per versioni dalla 5 in poi (5 non compresa) - la stessa sintassi si usa anche per selezionare versioni dalla 6 in poi, dalla 7 in poi, ecc... <![endif]-->
<!--[if lt IE 6]> Per versioni fino alla 6 (6 non compresa) - la stessa sintassi si usa anche per selezionare versioni fino alla 6, fino alla 7, ecc... <![endif]-->
<!--[if lte IE 5.5]> Per versioni fino alla 5.5 (5.5 compresa) <![endif]-->
<!--[if gt IE 6]> Per versioni dalla 6 in poi (6 compresa) <![endif]-->
- Keyword !important da inserire nel file css
Si crea 2 volte la stessa regola css, la prima per tutti i browser e la seconda per ie. Alla prima si aggiunge la keyword !important, insensata per IE.
Esempio
indipendente dalla versione di Joomla!body.main{
background: red; !important
background: black;
}
IE imposterà lo sfondo black perchè la seconda prevale sulla prima, firefox e gli altri browser interpreteranno lo sfondo rosso perchè la keyword important fa si che questi ignorino tutte le altre regole css simili.
Per ora è tutto