Per poter utilizzare il CSS esistono fondamentalmente tre sistemi, adatti alle varie esigenze:

• in linea, ossia posti all’interno del tag HTML da influenzare;
• incorporati al documento HTML, quindi una zona del foglio HTML marcata come CSS, posta generalmente in cima al documento;
• esterni, cioè un file con estenzione .css separato dal codice HTML e richiamato tramite un apposito link;

Di questi tre sistemi io prediligo - nel limite del possibile (e ovviamente a seconda dei casi) - esclusivamente il terzo (per questioni di praticità di scrittura, di aggiornamento e per un sacco di altre cose che ci si rende conto solo quando lo si usa). In fin dei conti il CSS è nato per dare quella completa astrazione al layout della pagina HTML senza per questo andare a toccare il codice stesso, quindi viene da se che l’uso degli altri due sistemi dovrebbe trovare scarso utilizzo (anche se non vi nascondo ad oggi si trovano in giro siti che nemmeno sanno cosa sia il CSS, ma questa è tutta un’altra storia).

I Fogli di stile in linea

Questa soluzione è utile quando si intende limitare la modifica del comportamento grafico ad un singolo tag del codice HTML, lasciando inalterate tutte le altre proprieta’ della pagina. Per esempio:

Testo sottolineato
Testo sottolineato

I Fogli di stile incorporati

I fogli di stile incorporati nel documento hanno il medesimo compito del CSS in linea, modificare il comportamento del tag. La differenza sta nel fatto che si possono definire delle classi o dei blocchi di codice attribuibili solo a determinati elementi marcati con un certo ID.

Nel primo caso, tutti i tag (a patto che le proprietà utilizzate nel CSS siano valide e accomunabili tra loro nei diversi ambiti a cui la classe fa riferimento) cui il valore dell’attributo class=”" sia uguale vengono modificati contemporaneamente. Nel secondo caso, viene modificato esclusivamente il tag il cui valore dell’attributo ID coincida con quello specificato nel blocco CSS. Viene da se che dovendo essere l’ID univoco, le modifiche verranno applicate esclusivamente ad un tag (fatta eccezione se non si stanno commettendo degli errori).

Qualche esempio:

In questo caso tutto il testo della pagina verra’ sottolineato.

In questo caso solo il testo a cui sarà stato associato per il tag FONT la classe Sottolineato verrà sottolineato. (Ciao).

In questo caso, invece, supponendo che all’interno della pagina vi sia un elemento HTML la cui proprietà ID sia stata impostata su Test, e ammesso che questo elemento sia (nel nostro esempio) un tag DIV o SPAN che solitamente contengono testo, il testo di quell’elemento verrà sottolineato.

I Fogli di stile esterni

Considerato che il CSS applicato ad una pagina di un sito web, spesso e volentieri è comune a tutte le pagine, onde evitare di avere tonnellate di codice che ripete sempre le stesse informazioni, è possibile racchiudere il CSS in un documento esterno.

Il vantaggio indiscusso è che se si deve modificare un comportamento grafico, tipo cambire il tipo di font, con HTML classico occorrerebbe agire su ogni singolo tag e su tutte le pagine del sito (si pensi a siti di grandi dimensioni), mentre adottando un foglio di stile esterno sarebbe sufficente cambiare una o al massimo poche righe di codice ed in un solo file, con conseguente risparmio di tempo.

Ecco la sintassi per collegare la pagina al file esterno, da porsi anch’essa tra i tag :

La sintassi da usare nel file esterno è identica a quella degli stili incorporati, con la differenza che deve contenere il solo codice di stile, senza i tag

Per coloro i qualiu non hanno mai realizzato un sito web, quando si sentono parlare anche di CSS una delle domande più ovvie è "ma vale la pena usare i fogli di stile?"

Potreste tranquillamente rispondere di no, o se sapete quanto tempo ci vuole a fare un sito in puro CSS, essere dell’idea opposta, ma vi assicuro che il tempo e l’abitudine all’uso dei CSS vi farà redimere.

La mia risposta alla domanda “Vale la pena usare i fogli di stile” è ovviamente “SI”. E oggi aggiungo anche “Non ne posso fare a meno”.

E’ dai tempi di Explorer 4 e Netscape 4 che il mio odio profondo per la sintassi proprietaria si è conclamato. All’epoca dei due browser non vi era un giorno che una minor release non modificasse un minimo comportamento di come l’HTML veniva interpretato, e io li a districarmi sul come fare a rendere visibile un sito che solo pochi giorni prima era perfettamente funzionante.
E allora via con codice javascript, browser sniffers, e menate varia. Alla fine bisognava sempre scendere a qualche compromesso, di cui il più delle volte non ero certo orgoglioso.
Explorer 5 cambiò un pò la vita in quel senso, e l’”abbandono dello sviluppo” di Netscape che venne ceduta ad AOL fu, se vogliamo, una sorta di pace interiore.
Tuttavia c’erano ancora molte persone che continuavano ad usare il Netscape, i browser minori ancora non erano così diffusi, e comunque tra una versione ed un altra Explorer cambiava sempre via.

Il problema insomma era che non esisteva una piena coscienza da parte dei produttori di browser dell’importanza di adottare linguaggi standard, e questa convinzione ha fatto molta fatica ad affermarsi.

Una prima svolta, sul versante dei browser di massa, si ebbe con l’introduzione di Opera, che ricordo ancora era un browser inizialmente a pagamento (esisteva anche una versione gratuita, ma toccava subirsi la pubblicità). Questo fu, a mio avviso, uno dei più grandi errori che la software house svedese commise, perchè il fatto di rendere uno strumento a pagamento penalizzò la sua diffusione (infatti oggi Opera è gratuito), tuttavia c’è anche da comprendere la cosa: all’epoca i finanziatori per progetti “alternativi” non è che abbondassero e magari la software house non era riuscita a far comprendere realmente a coloro i quali probabilmente si era rivolta dell’importanza di avere un browser nuovo, alternativo e in regola con gli standard.

Fortunatamente oggi questa consapevolezza è aumentata. Oggi possiamo contare su strumenti di navigazione che supportano la quasi totalità della specifica CSS2, e tra questi spicca Firefox che surclassa tutti gli altri.
Microsoft ha continuato e sta continuando la sua opera di adeguamento. Ha deluso un pò con Explorer 6, e chissà cosa farà con Explorer 7.

Nonostante tutto la via dei CSS è ancora lastricata di tanti problemi per gli sviluppatori. Due le maggiori fonti di difficoltà:

1. la compatibilità con i vecchi browser
2. le diverse modalità di rendering di certe proprietà

Sono problemi diversi, che vogliono quindi risposte diverse.

La retro-compatibilità

Per quanto riguarda la retro-compatibilità si hanno due strade. Si può scegliere che non vale più la pena sprecare tempo per Netscape 4 e tutti i browser che non rispettino un minimo di standard. Semplice e accettabile, anche perchè basta avere un occhio alle statistiche del proprio sito web, sotto la sezione “agent” per vedere quante richieste sono generate da questi antenati e ci si renderà ben presto conto che non il gioco non vale la candela.

La seconda strada è quella di compromesso, del metodo detto cross-browser. Si tratta di elaborare strategie e di usare trucchetti in grado di preservare un minimo di compatibilità con il passato senza rinunciare ai vantaggi dei CSS per i browser recenti. Tendenzialmente, io seguo la prima linea di condotta.

Diversità di rendering

Il secondo aspetto è decisamente più rovente del primo. Qui la strategia non può essere univoca e va valutata caso per caso. E non si può nemmeno optate per la fuga, ma bisogna armarsi di pazienza e conoscenza e dar vita al nostro sito, testandolo su diversi browser e quando possibile su differenti piattaforme.

Il problema di fondo purtroppo è sempre lo stesso: per quanto i browser si stiano pian piano uniformando agli standard, ci sono ancora dei sassolini dentro la scarpa che sviano dalla retta via. Il risultato è che alcune proprietà sono disponibili solo su alcuni browser (un esempio che vale per tutti è il supporto mai incoraggiato dal W3C dello stile delle barre di scorrimento disponibile solo per IE) o altre proprietà che si comportano a volta in maniera differente.
Fortunatamente le proprietà coinvolte da queste differenze sono il più delle volte poco importanti, e con pochi semplici accorgimenti si può porre rimedio, ma la vera e unica panacea è quella di testare le pagine con il maggior numero di browser possibile, valutate i risultati (e se le differenze siano trascurabili), quindi procedete senza problemi. Che una pagina sia identica e visibile allo stesso modo su tutti i browser è semplicemente un’utopia.

Se le differenze sono tante o tali da pregiudicare il layout della pagina affidatevi a Google o a qualche buona risorsa sui CSS per risolvere il problema. Un trucchetto prima o poi viene inventato, statene tranquilli. Una risorsa abbastanza importante dove poter iniziare le ricerche è la mailing-list css-discuss. Se non trovate una soluzione a un problema qui, vuol dire che non è stata ancora trovata.

Trovo che la tecnica dell’overlay grafico per far apparire qualcosa, qualsiasi cosa (ma in particolare delle immagini) all’interno della pagina senza ricorrere a finestre pop-up esterne, sia una tecnica veramente degna di nota.

Ancor di più lo è il LightBox ideato da Lokesh Dhakar.

Avete mai sognato di fare il Drag & Drop degli elementi delle pagine HTML? O il resize dei layers?

Si? Bene … Walter Zorn ci ha pensato per voi, creando questo Javascript crossbrowser che definireri a dir poco fantastico.

Il sito e relativo materiale lo potete trovare qui

Possiamo considerare i fogli di stile (o CSS, Cascading Style Sheets) come la naturale evoluzione e complemento all’HTML classico, estendendone potenzionalita’ e funzionalita’, obiettivi non disponibili al normale HTML che da sempre ha sofferto di questa mancanza.

Utilizzare i CSS offre indubbiamente vantaggi, ma al contempo viene aggiunto un ulteriore livello di complessita’. E’ infatti indispensabile la conoscenza di HTML (e quindi non solo il fatto di sapere usare qualche editor visuale per la composizione delle pagine) per poter sfruttare tutto ciò che i fogli di stile hanno da offrire.

In questa breve guida vorrei occupermi dei fogli di stile in cascata, tralasciando gli aspetti meno importanti, ossia quelle parti di essi che ben difficilmente si ha occasione di adottare.

Inoltre, benche’ il W3C abbia rilasciato le specifiche fin dal 12 maggio 1998 (CSS2, seconda edizione) non tutti i broswer offrono sufficente supporto agli stessi. I migliori interpreti restano comunque Mozilla Firefox, Internet Explorer, ma anche le ultime versioni di Opera (in particolare la 8 e la 9). Tutti gli altri browser offrono un supporto praticamente nullo ai CSS e questo non può che portare degli enormi svantaggi per tutti coloro che volessero cimentarsi nella realizzazione di siti web multi-browser, tuttavia non è colpa del web designer in questo caso, ma di coloro che rilasciano i browser i quali sembrano proprio ignorare la necessità di uniformarsi agli standard di un consorzio riconosciuto de facto.

Ormai realizzare siti internet è semplice. Ci sono tonnellate di programmi a pagamento e non che permettono di creare pagine web più o meno complesse.

La grafica è tutt’altra storia e i fogli di stile, quelli ben progettati che ti consentono se ben strutturati di avere siti poliformi e perfettamente compatibili con le regole del W3C è tutt’altra cosa.

In questo frangente, oggi mi sono imbattuto, nel rientro paragrafo. Avevo chiaro di come doverlo realizzare, almeno da un punto di vista pratico, ma sul lato tecnico avevo qualche dubbio. Dubbio che in realtà, ho risolto molto brillantemente ne più ne meno come fa qualasiasi editor di testi nel suo retroscena, ovvero semplicemente impostando il margine sinistro all’esatto valore positivo del rientro testo (che per l’occasione deve assumere valore negativo).

Così con queste due semplici proprietà, si può ottenere un giochino “tipografico” per chi deve gestire il suo sito web in maniera leggermente diversa dal solito.

span.Hanging
{
     text-indent: -15px;
     margin-left: 15px;
}