Sebbene siano molti anni che si lavora sulla terza generazione di css, al momento il w3c è ancora ben lontana dal prenderli in considerazione (in realtà, in molti casi, lo sono anche i browser odierni). Vi sarà capitato per esempio, a me è capitato, di girare per la rete e vedere degli splendidi effetti di trasparenza, utilizzati da alcuni siti, e di chiedervi come abbiano fatto i webmaster di tali siti a implementarli. Dopo una rapida ricerca avrete scoperto che esiste un semplice codice css che ne permette l'utilizzo e lo avrete sicuramente provato sul vostro sito. Contenti e soddisfatti vi sarete sbizzariti nell'utilizzarlo lavorandoci sopra con passione cercando di arrivare a creare un effetto gradevole che non inficiasse la leggibilità delle vostre pagine ma che, al tempo stesso, donasse "quel qualcosa in più" da un punto di vista grafico.
Una volta terminato il vostro lavoro lo avrete pubblicato online e, come ogni buon webmaster che si rispetti, avrete controllato che il vostro
lavoro fosse un buon lavoro.

Avrete quindi prima controllato la vostra pagina (x)html all'indirizzo http://validator.w3.org/ e poi, dopo aver corretto gli eventuali errori, vi sarete dedicati al (ai) vostro file css.
Purtroppo, arrivando alla pagina http://jigsaw.w3.org/css-validator , l'amara sorpresa... il valore "opacity" non può essere validato (come tutti i parametri css3). Quindi, ne consegue, il vostro css non risulta conforme alle specifiche w3c.
Dopo un primo momento di delusione... probabilmente avrete pensato tre cose:

- Vabbé, pazienza... non li posso usare.
- Ci sarà un modo per risolvere... proviamo a fare una ricerca in rete.
- Chi se ne frega del validatore w3c a me le trasparenze piacciono troppo e non ci rinuncio!

Nel primo caso, avete levato le trasparenze (o i bordi arrotondati, il testo scritto su più colonne o quale che fosse il parametro dei css 3 che avete provato ad adottare sulle vostre pagine), ve ne siete fatti una ragione e l'avete chiusa lì (reprimendo la rabbia per il lavoro svolto inutilmente). Se questo è il vostro caso... è molto improbabile che stiate leggendo questa pagina.
Anche nel terzo caso è molto improbabile che stiate leggendo questa pagina.
Se invece, tignosi, avete seguito il ragionamento della seconda possibilità... è probabile che ora stiate leggendo queste parole proprio in seguito alla ricerca in rete di cui sopra.

Possibile che per colpa del w3c e del suo validatore debba rinunciare per forza a trasparenze e compagnia bella?
No, non dovete rinunciarvi per forza. Un modo per aggirare il problema, c'é: javascript!

Il metodo che vi propongo forse non è molto elegante, però è pratico e permette la validazione del proprio file css.
L'unica raccomandazione da fare è che il codice css 3 che volete utilizzare, sarebbe bene che fosse esclusivamente di "decorazione" grafica in modo che le pagine risultino comunque leggibili anche quando ad aprirle è un utente che utilizza un broswer che non supporta tali specifiche (browser che quindi, nell'esempio che stiamo facendo, non visualizzerà lo sfondo con le trasperenze ma lo sfondo normale).

In parole povere intendo che, se decidiamo di utilizzare delle trasparenze su di un box, facciamolo almeno in modo che il testo risulti leggibile sia in quei browser che supportano le trasparenze, sia in quelli che non le supportano (dove quindi lo sfondo risulterà senza trasparenza ma con un colore/immagine a opacità 100%).
Una volta rispettata questa raccomandazione, direi che possiamo sentirci con la coscienza a posto e che possiamo iniziare.

Per far validare le nostre pagine non ci resta quindi da far altro che implementare il nostro codice "invalidante" tramite javascript, in modo che il validatore non lo veda.

Prima di tutto creiamo la nostra pagina di esempio che chiameremo, con estrema fantasia, esempio.htm

Poi creiamo il nostro file css valido. File che chiameremo esempio.css e al suo interno scriviamo:

In questo modo caricando nel browser la nostra pagina esempio.htm avremo un box con lo sfondo grigio molto chiaro, con i bordi neri e con uno spazio fra il contenuto del box e i bordi dello stesso di 5 pixel sopra, sotto, a sinistra e a destra. Lo sfondo della pagina sarà invece nero.
Una semplicissima pagina che non avrà problemi a essere validata.

Poniamo ora di voler aggiungere la trasparenza al box di esempio.
Prima di tutto creiamo il file js (che chiameremo addcss.js):

Poi creiamo un secondo file css, che chiameremo "trasparente.css", con la trasparenza da aggiungere al box "#esempio".
Grazie all'override, la riscrittura, dei css possiamo aggiungere parametri a classi e selettori creati nel file "esempio.css" semplicemente scrivendo nel secondo file css:

In pratica, nel primo file css, quello richiamato normalmente è che sarà il css controllato dal validatore, abbiamo dato i parametri comuni e accettati dal w3c (margin, padding, colore di sfondo e così via), nel secondo css, caricato in seguito e tramite javascript, abbiamo dato al selettore #esempio una seconda serie di parametri che permettono la trasparenza del box e che, essendo caricati tramite js, non vengono controllati dal validatore.

Ora non ci resta che collegare il file addcss.js e il secondo css (trasparente.css) nel file esempio.htm aggiungendo le chiamate:

Quindi il vostro file finale "esempio.htm" apparirà così:

E il gioco è fatto.
Ovviamente questo era solo un esempio dove abbiamo utilizzato un singolo box grigio, con una trasparenza/opacità settata sul 90%, su uno sfondo omogeneo nero, per cui l'effetto ottenuto sarà semplicemente che lo sfondo grigio chiaro diventerà leggermente più scuro (e nulla più). Giocando però con le posizioni e con le immagini, si possono ottenere effetti molto interessanti.