CSS Hack per Internet Explorer 6

Da un po' di tempo a questa parte i layouts di molti sitiweb non vengono più basati sulle tabelle, mapiuttosto sui CSS, fogli di stile dotati di grandeflessibilità che, grazie alla varietà difunzioni che presentano, attirano un numerosempre maggiore di programmatori. Perchèallora non addentrarci nei tricks relativi ai CSS, in modo dascoprire come renderli più leggeri e maggiormenteordinati?

 

Il problema dei CSS

Il primo problema che si presentò quando i CSSfecero il loro esordio nel web fu riguardò laloro compatibilità con i browsers. Questi infattidovevano essere in grado di interpretarli, e non tutti ciriuscivano. Fortunatamente ormai, data la diffusione di massadi questi fogli di stile, il 99% dei browsers attuali nesupportano la visualizzazione.

Nonostante il superamento dello scoglio"compatibilità" , un problema si presentaancora, ed è legato all' interpretazione checiascun browser da ad un codice CSS, che non sempre risultaunivoca. Ciò causa diversi problemi ai programmatori,che si trovano ad avere uno stile ben visualizzato eriprodotto su un determinato browser, e lo stesso sitoinvece confuso e sfasato su un altro. Nonostante ciònon c'è da spaventarsi, con l' abitudine siarriveranno a conoscere quali comandi vengonointerpretati in modo diverso da ciascun browser, e sisarà come porvi rimedio.

 

Come effettuare un CSS Hacks

La regola principale relativa a come effettuare un CSS Hacksè scrivere due linee di codice una sotto l' altracontenenti la stessa opzione, aventi però differenzadi codice e di parametri. La prima riga la si faràinterpretare da un browser in particolare,mentre la seconda ad un altro. Ad esempio, pensiamo divolere una spaziatura, tra l' header della pagina ed ilsuo contenuto, di 25px. Inserendo il codice "#header {margin-bottom:25px}" ,in Internet Explorer risulterà tutto ok, mentre inFirefox, in Opera ed in Safari la spaziatura risulteràenorme. Vorremmo dunque settare solo per questi browseruna spaziatura minore, ad esempio di 10px.  Le due righenecessarie di default allora saranno:

    #header {margin-bottom:25px}#header {margin-bottom:10px}

Tenendo però conto che i browser prendono per buono ilparametro contenuto nell' ultimo tra tutti i comandiuguali, dovremo ora associare ad Internet Explorer la primariga, mentre la seconda a tutti gli altri browsers.Com'è possibile fare tutto ciò?

 

Nascondere comandi ad Internet Explorer 6

Per nascondere ad IE regole particolari, rivolte soloagli altri browsers, possiamo usare il comando childselector, che IE non è in grado di interpretare. Essocomprende due elementi, ognuno dei quali dipende dall'altro. Così html>body si riferisce ad discendentebody, contenuto nella tag html. Riprendendo come esempioquello della spaziatura (sopra riportato), il codicesarà:

    #header {margin-bottom:3em}html>body #header {margin-bottom:1em}

IE non riuscirà ad interpretare la secondariga, composta con il child command, e la ignorerà,mantenendo per vera quella sopra. Tutti gli altri browsersinvece interpreteranno la seconda.

 

Nascondere comandi ad Internet Explorer 5

Nonostante possa sembrare inopportuno, risulta necessarioimpostare parametri differenti ai browser Internet Explorer 6ed Internet Explorer 5.

Il problema stà infatti nell' interpretazione cheInternet Explorer 5 dei vari box; quando si specifica l'altezza di un elemento in CSS, nel parametro non sono inclusine' la bombatura ne' i bordi, ma IE5 incorpora questivalori nel parametro width, mostrando così elementipiù piccoli del dovuto.

Il codice sotto riportato sarà riferito a tutti ibrowser eccetto che ad Internet Explorer 5:

    #header {padding: 2em; border: 0.5em; width: 10em}

Come scrivere però un comando successivo che vengainterpretato solo da IE5 e non dagli altri browsers? Ci vienein aiuto l' invenzione di Tantek Celik, conosciutacome box model hack; consiste nel trasformare la rigadi codice sopra riportata in:

    #header {padding: 2em; border: 0.5em; width: 15em;  voice-family: ""}""; voice-family:inherit; width: 10em}

Con questa sintassi IE5 userà il valore widthimpostato a 15em, la bombatura a 2em ed i bordi a0.5em, mentre ignorerà, non riuscendo adinterpretarlo, l'ultimo valore associato al parametrowidth, ossia 10em, che verrà invece preso pervero da tutti gli altri browsers. Non sarà unasoluzione elegantissima, ma fa piuttosto bene il suo lavoro.Unico neo, la possibilità, in alcuni casi che talelinea di codice faccia saltare al motore di IE5 la regolasuccessiva, ma questo accade non con grande frequenza. Peraltri CSS hacks per Internet Explorer 5.0 vi rimando QUI.

 

Nascondere comandi ad Internet Explorer perMac

Internet Explorer per Mac è ormai in disuso, eciò in seguito alla decisione di Microsoft di nonportare più avanti lo sviluppo di tale versione. Ibuoni programmatori devono comunque tener presente dell'eventualità di una o più visite tramite IE perMac e devono quindi correre ai ripari, il che comunqueè piuttosto semplice.

Per nascondere un comando a IE per Mac infatti basteràuna serie di caratteri posti prima e dopo il codice. Vediamomeglio:

    /* Nascosto ad IE-Mac */#header {margin-bottom:3em}#footer {margin-top:1.5em}/* Fine nascosto */

Cosa ne farà IE-Mac di questi comandi? Semplicementeli ignorerà. Nel caso inoltre una determinata area delsito web dia dei problemi se visualizzata con IE-Mac e nonsia una delle colonne portanti del sito, la si potrànascondere grazie al seguente codice:

    #noiemac {display: none}/* Nascosto a IE-Mac */#noiemac {display: block}/* Fine nascosto*/

La prima linea di codice nasconderà l' interaselezione impostata con IS noiemac (esempio: <divid="noiemac">, mentre la seconda, cheIE-Mac non è in grado di leggere, mostrerà lasezione.

 

Nascondere comandi a Netscape 4

Netscape 4, causa il suo mancato aggiornamento, presenta unagestione/interpretazione dei fogli di stile CSS spessoinsufficiente. creare un sito in CSS compatibile con questobrowser potrà infatti dimostrarsi qualcosadi estremamente arduo nel caso in cui il sito web presenti uncerto grado di complessità. Molti programmatori dunquepreferiscono nascondere completamente il CSS a Netscape, ilche è fattibile usando la codice @import comenell' esempio:

    <style type="text/css">@import url(cssfile.css);</style>

Grazie al codice sopra-riportato Netscape 4 mostreràuna versione del sito priva di stile grafico, questoperchè non riuscirà ad interpretare il codice@import.

 

Come testare la grafica del nostro sito

Come abbiamo visto è piuttosto complesso dar vita adun foglio di stile CSS che non crei problemi ai 5 browserpiù diffusi (Internet Explorer, Firefox, Safari,Opera, Netscape) e potrebbe tornar utile ad un programmatoreriuscire a vedere l' anteprima del proprio sito su questi5 browsers contemporaneamente, così da potercontrollare eventuali errori. Fare ciò è oggipossibile, grazie al servizio gratuito BrowserShot.

 



Ti potrebbe interessare anche

commenta la notizia