CSS che funzionano by lancelot
Lavorare usando CSS è molto divertente, ma si può trasformare in un incubo se il nostro sito assume un aspetto differente quando è visualizzato in un browser diverso dal nostro. Mi ricordo quando (dopo ore di duro lavoro) ho visto il mio sito [http://www.noblocodenotas.com] con un IE5!!!!!! Mi sono messo le mani nei capelli, perché non esistevano piú né menú, né banner, né fondo sfumato fisso e il 'font' era Serif (Times New Roman o Georgia), laddove avrebbe dovuto esserci Sans-serif (Verdana, Arial, Tahoma). Il problema era dovuto al fatto che io avevo 'linkato' la 'sheet' usando '@media' invece che 'link' e IE5 non supporta '@media', perlomeno non lo supporta pienamente ma solo parzialmente e quindi è bastato che io facessi le opportune modifiche al template 'header.inc' perché in tutto il mio sito fosse applicato lo stile e, come per magia, il sito è apparso anche in IE5; è vero che non è una risoluzione perfetta, mancano molti degli attributi che avrebbero dovuto esserci, ma perlomeno ci si può navigare; prima, dopo la prima pagina, non si poteva andare da nessuna parte visto che il menú non era visualizzato.

Quasti sono gli inconvenienti che potremmo incontrare quotidianamente nel nostro lavoro e che abbiamo bisogno di conoscere innanzitutto, per non spaventarcene, e di conoscere la possibile soluzione o soluzioni, visto che spesso ce n'è piú d'una. Il fatto è che le varie versioni di Internet Explorer sarebbero, di per sé, un argomento sufficiente per molti articoli visto che non implementano allo stesso modo le specificazioni del W3C sui CSS. Mozilla si comporta splendidamente ed è il mio browser preferito, seguito da Opera che, a volte, fa i capricci, ma il cui comportamento non raggiunge mai gli effetti bizzarri ed imprevedibili, a volte, di IE.

In questo mio primo articolo per 'The Zion' voglio parlare di come ho scoperto un 'hack' che io chiamo di 'ecologicamente corretto' perché è:

1. semplice da applicare.
2. efficace nella sua azione.
3. non ha bisogno di 'upgrading'.

Vediamo i punti uno ad uno.

1. Semplice da applicare.
Si tratta di una maniera per fare in modo che IE6, Mozilla e Opera6+ visualizzino la stessa pagina. Il problema è che le impostazioni di default dei vari TAGS (X)HTML, sono differenti nei tre browsers e quindi le correzioni che eventualmente si dovessero fare per visualizzare la stessa pagina correttamente in tutti e tre modificherebbe la pagina in maniera differente, creando cosí degli effetti a cascata difficili da prevedere e dalle conseguenze, a volte, non molto gradevoli. (Sto parlando, chiaramente, di pagine dal codice valido e con un DOCTYPE valido; pagine, quindi, che il browser visualizzerà in 'standard compliant mode' e non in 'quirk')
Ho scoperto che IE non supporta la proprietà '!important' (questo non l'ho scoperto io per primo chiaramente, ma io l'ho scoperto da solo, in ogni caso).
Questo vuol dire che se io dovessi scrivere una regola in questa maniera:

h1 {
margin: 0 0 2em !important;
margin: 0;
}

per esempio, IE, che non applica '!important', leggerebbe solo l'ultima regola da applicare al 'margin' (ossia 'margin: 0;') e Mozilla e Opera, che applicano correttamente la regola, darebbero la precedenza al primo margin (ossia 'margin: 0 0 2em;'). Semplice, no?

2. Efficace nella sua azione.
È efficace perche modifica solo le caratteristiche che voglio e sul browser che voglio. In una maniera diretta e molto intuitiva.

3. Non ha bisogno di 'upgrading'.
Quando la casa di Redmond deciderà che IE dovrà seguire le regole non ci sarà bisogno di nessuna modifica, perché i browsers antichi continueranno a seguire la regola senza '!important' e quelli nuovi avranno già la regola pronta da seguire (quella per Mozilla e Opera).

L'ho trovato fantastico e lo uso quotidianamente nei miei CSS.

Ciao e ci vediamo

Lancelot

Leggi commenti

Numero commenti inviati: 0