Parere su soluzione "artigianale" per text shadow su IE

[ivanisevic82]

Ciao ragazzi, in un sito che sto costruendo ho utilizzato la funzione text-shadow per avere un ombra che, pur non essere assolutamente necessaria, rendeva molto migliore la visualizzazione.

Purtroppo questo effetto in IE non è supportato...dunque mi sono trovato di fronte a un bivio:

- O lasciare i caratteri senza ombra

- O inventarmi qualche soluzione strampalata...

Alla fine l'ho trovata: duplico tutti i testi e assegno a ogni blocco i testo una classe: un blocco avrà carattere di colore bianco e un altro di colore grigio (che starà sotto e farà da ombra).

Il risultato finale lo potete vedere alla home di questo sito:

Qui c'è la versione senza l'ombra in IE (provatela sia con FF che con IE per notale la differenza)

Versione 1 (SENZA OMBRA)

Qui invece la versiona con l'ombra anche in IE (ovviamente ho usato i commenti condizionali):

Versione 2 (CON OMBRA)

Vorrei da voi un parare: meglio la prima o la seconda?

La seconda, pur essendo molto artigianale, rende meglio visivamente...ma secondo voi potrà creare problemi di altro tipo?

Grazie!

[Mich_]

Difficile dare un parere, ma ti segnalo alcune criticita` che possono dare problemi.

1. Perche` hai usato XHTML Transitional? Sarebbe stato meglio usare XHTML 1.0 Strict, che da` meno problemi con IE 6 e 7

2. Perche` hai usato una tabella per formattare una lista? Sarebbe meglio usare una <dl>

3. Perche` hai scritto due volte la stessa cosa? Quando poi il tizio prendera` un nuovo diploma e vorra` aggiungerlo si trovera` spiazzato: lo inserira` in un punto e lo vedra` in un browser, ma si dimentichera` l'altro e gli amici gli diranno perche` non ha aggiornato. In quei casi e` un errore scrivere le cose due volte: meglio e` usare i commenti condizionali ripetutamente su ciascuna riga (e ancora meglio scrivere in modo che tutti i browser possano interpretare uguale - spesso si riesce).

4. width="280" cellspacing="0" cellpadding="0" border="0" sono tutto attributi HTML di formattazione: pososno andare in conflitto con i CSS, e browser diversi risolvono i conflitti in modo diverso - sposta la formattazione nei CSS.

5. style="margin-top: 20px;" scrivere stili in linea porta difficolta` di manutenzione: meglio e` che gli stili stiano tutti nello stesso file.

[ivanisevic82]

Mich, ti ringrazio molto per la risposta completa e articolata, rispondo punto per punto.

1) Hai ragione. Quando ho fatto il mio primo sito, un anno fà, ho preso una struttura di base e modificato direttamente quella. Poi per gli altri spesso ho usato lo stesso schema e non mi sono preoccupato di approfondire la questione transitional/strict.
Per il sito in questione adesso il punto è: se io cambiassi ora (cancellando semplicemente "transitional" e scrivendo" strict") che succederebbe? E' così semplice?

2) E' vero, l'ho fatto per regolarmi meglio con gli spazi ma non ha senso, modifico al più presto.

3) Il perchè ho scritto due volte la stessa cosa è il punto centrale della discussione: mi è sembrato che l'unico modo graficamente decente per mettere un ombra in IE è creare due testi identici e sovrapporli, mettendo sotto il "grigio" che fa da ombra e spostandolo di un pixel più in basso e a destra rispetto al testo "principale" in bianco.
Chiaramente non avrei mai utilizzato una soluzione simile se il committente del sito non fosse mio fratello: ogni modifica viene decisa insieme e in collaborazione, lui non saprebbe mai mettere le mai al sito da solo nè avrebbe voglia di farlo.
In ogni caso sarei felice di poter risolvere la cosa in maniera più elegante, tu proponi due strade:

A) "usare i commenti condizionali ripetutamente su ciascuna riga"
Non ho capito bene cosa intendi. Faccio un esempio di quello che intuisco: lasciare la scritta principale bianca fuori dai commenti condizionali e utilizzare questi ultimi solo per la scritta secondaria grigia?
Se ho capito male correggimi.

B) "e ancora meglio scrivere in modo che tutti i browser possano interpretare uguale - spesso si riesce"
Questo nel caso dell'ombra mi sembra molto difficile. Esistono degli script che ho testato...servirebbe a mettere l'ombra in IE, ma il risultato estetico è orribile e il testo risulta molto poco leggibile.

4) Quegli attributi di formattazione sono riferiti alla tabella, dovendola trasformare in lista sposterò tutto nel css (come giustamente consigli) contestualmente a questa modifica.

5) Come sopra.

Aggiungo che il sito ha poche pagine, alla fine farò una revisione ed eventuali stili e attributi sparsi nell'html saranno trasferiti nel css.

Attendo le ultime delucidazioni...

Grazie ancora!

[Mich_]

1. E` semplice se il codice usato e` gia` conforme alle specifiche Strict. Comunque in questo i validatori danno una mano (e forse anche due).
PS: non basta cambiare il testo "Transitional" con"strict": la sintassi di tutta la riga e` diversa. Vedi ad esempio http://w3schools.com/tags/default.asp alla voce DOCTYPE

3. Non avevo capito che in IE ti serve aver scritto la cosa due volte. Mi pareva che i commenti condizionali escludessero una scritta in brwoser standard ed un'altra nei browser IE.
Comunque se proprio vuoi scrivere la stessa cosa due volte, usa JS (oppure, meglio, un linguaggio lato server) per copiare un blocco in un altro: e` vero che se JS non e` abilitato non si vede l'ombra, ma non credo sia un problema, e invece risolvi un problema futuro e imprevedibile.

[ivanisevic82]

Grazie Mich, soprattutto per il consiglio di risolvere il problema della doppia scritta con js, non ci avevo pensato.
Non so da dove partire, cercherò aiuti nell'area apposita.
Ora provvedo ad apportare le modifiche di cui abbiamo discusso sopra.

Grazie ancora!