logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

CSS e compatibilità con i browser

I fogli di stile, sono uno strumento straordinario, ma bisogna prendere coscienza di un problema che li affligge, loro malgrado: quello della compatibilità. Non tutti i browser interpretano allo stesso modo una determinata porzione di codice. La differenza stà nel fatto che i produttori di browser hanno introdotto dei tag proprietari, e quindi diversi in ogni browser nonostante la standardizzazione del linguaggio da parte del W3C. Il primo browser che aveva un buon supporto per i fogli di stile è stato Internet Explorer 5, che offriva un suporto adeguato al linguaggio. Al giorno d'oggi, la quasi totalità dei browser supporta la specifica CSS2, però uno su tutti risalta per la sua affidabilità al punto da surclassare tutti gli altri: Firefox di Mozilla. La Microsoft nel contempo ha continuato nella sua opera di miglioramento, ma ha deluso un pò le aspettative con Explorer 6.

E Netscape Navigator, dove è finito? C'era una volta Netscape, o meglio, o per fortuna, c'è ancora, ma in realtà come molti di voi sapranno, NN è ormai in netto declino, anche se, l'ultima versione (la 7) va bene, ma non riesce ancora a scalzare il predominio di IE, neanche in quelle macchine come i Mac, dove un tempo Netscape la faceva davvero da padrone. Però qualcuno, ora starà pensando: ma cosa serve parlare di compatibilità, se per il 95% di chi naviga in internet, usa il prodotto della Microsoft? La risposta è semplice e cioè che anche tra IE e ... IE ci sono differenze, e poi anche quel 5% di utenti che usano altri browser, va accontentato.

Ma anche in casa Microsoft, non è tutto rose e fiori, nel senso che con IE 6 il colosso di Bill Gates è rimasto indietro, infatti non ha voluto implementare i nuovi standard consigliati dal W3C ed è per questo che, come vi dicevo prima ha un pò deluso. Netscape 7 e Mozilla 1.1, invece, si sono adeguati alle nuove modifiche, che riguardano sopratutto la gestione delle tabelle, o meglio come definire la dimensione delle stesse. I parametri della larghezza (widht) e dell'altezza (height), rimangono supportati, ma nel codice Html puro, non viene supportato height, come d'altra parte NN non ha mai fatto. Un altro cambio che è avvenuto è il supporto per la dimensione dei caratteri. Usando le impostazioni per punti o pixel, queste risultavano fisse con tutti i browser, ovvero, non si potevano più cambiare, però successivamente il W3C è corso ai ripari, e ha stabilito che comunque sia la dimensione del carattere che si stà usando, sia sempre possibile modificarla dal browser. Mozilla e quindi Netscape, vi hanno aderito, IE no.

Paradossalmente è proprio con i software Microsoft, che si hanno proprio le carrette più vecchie, nel senso che molti infatti navigano ancora con IE 5, che comunque è anche il browser più conforme agli standard, e se noi prendiamo l'idea delle barre colorate, ebbene queste si vedono colorate solo con IE 5.5 e superiore, per tutti gli altri, no.

I problemi fondamentali che ancora oggi perseguitano i web-designer sono essenzialmente due:

Per quanto riguarda i problemi di visualizzazione di certe proprietà (rendering) all'interno dei vari browser, esistono diverse metodologie per risolverli, ma sono abbastanza complessi: inizialmente si deve fare uso dei motori di ricerca e delle risorse on-line per trovare qualche trucco che permetta di risolvere il problema, ma è buona norma comunque quella di far testare le pagine del sito che stiamo costruendo con i diversi browser (più ce ne sono, e meglio è ) per trovare una soluzione che accomuni in qualche modo le diverse modalità di rendering.

Internet Explorer, che ripetiamo è il browser attualmente più usato, presenta numerosi problemi di rendering. Ad esempio il valore medium della proprietà font-size è interpretato in maniera scorretta e, maggiore lacuna, non offre alcun supporto al contenuto generato (proprietà content, quotes, ecc...) viceversa presentano un ottimo supporto agli standard, anche se non completo, Firefox, Opera, Safari e Konqueror. In particolare gli ultimi due presentano un parziale supporto ai CSS3.

Per quanto riguarda la retro-compatibilità, non tutti i browser interpretano allo stesso modo una determinata porzione di codice, e questo è dovuto al fatto che ognuno di questi ha dei tag proprietari, che sono diversi in ogni browser appunto, nonostante la standardizzazione del linguaggio operata dal W3C. Per risolvere il problema della retro-compatibilità possiamo adottare diverse strategie: una è senza dubbio quella di fare uso di codice Javascript che riconosce il browser utilizzato dall’utente e spedisce il css adatto per il browser usato, tecnica conosciuta con il nome di sniffing. Un'altra possibilità è quella di ignorare i browser più datati (come ad esempio Netscape 4) dato che questi sono ancora utilizzati da una minima parte degli utenti, oppure l’uso della proprietà @import, in quanto questa dichiarazione viene ignorata dai browser più datati. Per finire, usare un CSS universale.

Internet Explorer mette inoltre a disposizione nell'ambito dell'Html il commento condizionale, una tecnica che consiste nell'inserimento nella pagina di un commento Html distinto dalla particolare sintassi e in questo modo i browser normali non interpreteranno il commento mentre solo IE leggerà il codice al suo interno.

     <!-- INIZIO COMMENTO PER IE -->
               codice esclusivamente per Internet Explorer
     <!-- FINE COMMENTO -->

La regola !important

!important serve per dare priorità ad una dichiarazione nei fogli di stile. Se prendiamo questo esempio, il div formattato con questo codice avrà un bordo di 2px tratteggiato blu questo perchè la seconda regola comanda sulla prima.

div1{
      border: 1px solid #f00;
      border: 2px dotted #00f;
      }

Se invece scriviamo così:

div1{
      border: 1px solid #f00   !important;
      border: 2px dotted #00f;
      }

Il div avrà un bordo di 1px continuo rosso, perchè la definizione con !important ha la priorità. Questa vale per tutti i browser, tranne che per Internet Explorer. Ricapitolando, di solito nei CSS le regole specificate per ultime hanno la precedenza. Ma se si usa !important dopo una qualsiasi regola, la regola a cui viene applicato !important ha la precedenza su tutto quello che viene dopo.

in quest'esempio:

div1{
      margin-top: 4px   !important;
      margin-top: 2px;
      }

In questo modo, il margine superiore viene settato a 4px per tutti i browser, tranne che per IE che mostra un margine superiore di 2 px. In realtà, questo "problema" non dipende da !important, ma dal processamento di dichiarazioni multiple della stessa proprietà (margin-top) nella stessa regola. Questo trucco a volte può tornare utile quando si usano i margini relativi (come in questo esempio), dal momento che questi possono visualizzare im maniera diversa la pagina a seconda del browser e della piattaforma.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice