Scritto da Gianfranco V. (Gianfrix)

INTRODUZIONE
Da quando mi sono avvicinato allo studio dei Cascading Style Sheets ho capito che è giunta l’ora di accantonare per sempre l’uso delle tabelle e dei tanto odiati tag <tr> e <td> per la creazione dei layout per il web. I CSS infatti vengono utilizzati per semplificare il compito di gestire la conformazione grafica di un sito web e permettono quindi di  separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.
Pertanto, oltre che per il layout, essi vengono utilizzati per gestire tutto l’aspetto grafico del sito, dal testo alle immagini, ai form e al posizionamento degli elementi nella pagina. In questo articolo non voglio annoiarvi con concetti semplici e banali, che potrete trovare in rete con una semplice ricerca su google “tutorial CSS” ad esempio, ma voglio fornirvi alcuni concetti avanzati che ci permetteranno di capire come questo strumento sia molto versatile e soprattutto potente. Pertanto invito i neofiti ad approfondire prima l’argomento imparando anche un po’ di sintassi, che fra l’altro è molto semplice e intuitiva (si avvicina molto al JavaScript),  e se necessario fare uso inizialmente di strumenti automatici che è possibile trovare in ambienti di sviluppo per il web.

BREVE PANORAMICA SUI CSS
In questo articolo come già accennato in precedenza, non tratteremo la sintassi e le regole più banali sui CSS, presuppongo pertanto che voi sappiate cosa sia un selettore, un id, una classe, un div, ecc.
Inoltre vi invito a scrivere il codice CSS in pagine diverse rispetto a quelle in cui risiede il contenuto HTML, sia per una maggiore chiarezza del codice stesso, sia perché è possibile in questo modo applicare lo stesso stile a più pagine diverse del nostro sito.
A questo punto, dopo che avrete spulciato sul web tutte le guide possibili sui CSS (magari iniziate a dare un’occhiata a quello che trovate su Wikipedia), vedremo alcune applicazioni interessanti su questo potentissimo strumento e capiremo perché oggi un web designer non può prescindere dall’utilizzo dei fogli di stile.

IMMAGINI
Iniziamo la nostra avventura sui CSS parlando delle immagini. Quante volte vi sarà capitato di dover modificare delle immagini in Photoshop per aggiungere un testo da sovrapporre all’immagine stessa? Con i CSS questo si può fare senza dover aprire nessun programma di grafica, rendendo l’immagine sfondo del blocco che contiene il testo:
#box h2 {
    background-image: url(boximage.jpg);
    background-repeat: no-repeat;
}

Il vantaggio è quello di avere un testo indipendente dall’immagine, e che può quindi essere modificato più facilmente.
Altre volte vi sarà capitato di voler togliere quel fastidiosissimo bordo blu dalle immagini che vengono utilizzate come link. A questo punto basta inserire una regola come questa per ottenere l’effetto desiderato:

img {
    border: none;
}

MENU DI NAVIGAZIONE
I sistemi di navigazione di vecchio tipo sono spesso implementati utilizzando layout basati su tabelle e immagini. Utilizzando i CSS potete sostituire molte immagini dedicate alla navigazione con testo manipolato. Utilizzando delle immagini infatti potreste correre nel rischio di dover creare una nuova immagine e di aver perso il file originale di Photoshop che usate per creare i pulsanti di navigazione, oppure chi ha le immagini disabilitate non può leggere il testo all’interno dei pulsanti e soprattutto avere molte immagini allunga i tempi di caricamento del sito.
Potete adattare questa soluzioni ad elenchi esistenti costruiti con le tabelle, ma il mio consiglio è quello di utilizzare un elenco non ordinato per creare da zero un nuovo menu.
  Quindi andiamo a scrivere come prima cosa il codice HTML, che sarà di questo tipo:
<div id=”menu”>
    <ul>
        <li><a href=”#”>Chi siamo</a></li>
        <li><a href=”#”>Prodotti</a></li>
        <li><a href=”#”>Contatti</a></li>
    </ul>
</div>
Andiamo ora a scrivere il codice CSS per formattare l’elenco rimuovendo i puntini dell’elenco e il rientro del margine che il browser applica di default:
#menu  ul{
    list-style: none;
    margin: 0;
padding: 0;
}
Adesso assegniamo un bordo inferiore agli elementi con il tag <li>:
#menu li{
    border-bottom: 1px solid #ED9F9F;
}
Infine, formattiamo il link vero e proprio:
#menu li a:link, #menu li a:visited{
font-size: 90%;
display: block;
padding 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
Le regole imposte sono tutte ovvie, margini, sottolineatura, bordi. Mi soffermo solo “sull’istruzione” “display: block;” . Grazie a questo, il link viene mostrato come un blocco di elementi e l’intera area di ogni pulsante di navigazione diventa attiva quando si passa il cursore su di esso. L’effetto è lo stesso che avremmo potuto ottenere usando le immagini.
Per poter creare il simpatico effetto di rollover (ovvero il cambio dell’immagine quando l’utente passa il mouse su di un pulsante), basta aggiungere il selettore della pseudo classe :hover :
#menu li a:hover{
    background-color: #711515;
    color:#FFFFFF;
}
Capito il meccanismo possiamo creare anche menu a più livelli; in questo caso le regole CSS che applicheremo saranno di questo tipo:
#menu ul ul
#menu ul ul li
#menu ul ul a:link, #menu ul ul a:visited
#menu ul ul a:hover
Se vogliamo visualizzare il nostro elenco in orizzontale piuttosto che in verticale dobbiamo utilizzare il seguente “trucco”:
#menu li{
    display: inline;
}
Possiamo implementare molte altre soluzioni per creare menu personalizzati. Ad esempio possiamo creare dei menu a discesa o dei menu di navigazione a schede. Io mi limiterò a darvi alcune nozioni interessanti, perché in rete troverete guide e tutorial infiniti per poter creare degli effetti molto simpatici per i vostri siti.

CSS PER DISPOSITIVI ALTERNATIVI
Grazie ai CSS, scrivendo poche righe di codice possiamo dare la possibilità agli utenti di accedere ai contenuti del vostro sito anche se usano dispositivi non in gradi di visualizzare la grafica, come i PDA, i browser dei telefonini oppure gli screen reader che leggono “vocalmente” il testo a chi ha difficoltà visive. Utilizzare i CSS per il layout non rende automaticamente il sito accessibile a chiunque. Per esempio, gli utenti con problemi visivi preferiscono leggere un testo che è disposto ordinatamente e che può essere ingrandito.
Ad esempio, possiamo creare dei fogli di stile adatti alla stampa. Le pagine web, infatti, raramente vengono stampate con una buona qualità, poiché sono state create soprattutto per essere mostrate a video. A questo punto utilizzeremo un media type CSS per applicare al documento un foglio di stile per la stampa. Lo aggiungeremo mediante questa istruzione al file HTML:
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
Creare un foglio di stile specifico per la stampa potrebbe essere molto utile per i vostri visitatori, soprattutto se la pagina contiene molte immagini. Infatti, stampare una pagina particolarmente elaborata potrebbe consumare parecchio inchiostro della stampante, oppure potrebbe essere un processo molto lento, soprattutto con le stampanti più vecchie. Inoltre, in alcuni siti la stampa potrebbe risultare di pessima qualità, a causa delle combinazioni di colori o del particolare layout.
A questo punto andiamo a vedere un po’ di codice. Come prima cosa, in un nuovo file css che potremmo chiamare “print.css”, eliminiamo un eventuale menu di navigazione, che ci risulterebbe solo di intralcio nella stampa:
#menu {
    display: none;
}
Poi possiamo rimuovere qualsiasi regola dedicata al menu di navigazione che si applichi a tutti gli elementi all’interno di #menu e rendere l’area dedicata al contenuto molto più grande, così da occupare tutto lo spazio disponibile.
Se controllate adesso il vostro documento nell’anteprima di stampa vedrete che il menu di navigazione è stato rimosso e il contenuto risulta disposto molto più uniformemente nella pagina.
Alcuni browser moderni permettono all’utente di vedere una lista dei fogli di stile legati al documento e selezionare quello che preferiscono. Questa opportunità può essere molto utile per quelle persone che, per esempio, hanno difficoltà a leggere il testo se c’è poco contrasto sullo schermo, oppure per coloro che hanno bisogno di un font molto grande per riuscire a leggere.
Per fare ciò bisogna collegare il foglio di stile alternativo con rel=”alternative stylesheet” e utilizzare un titolo. Gli utenti che vedranno il titolo nel menu del browser, come “high contrast” o “large text” ne comprenderanno la funzionalità.
Alcuni browser però non supportano questa funzionalità specifica del fogli di stile alternativi. A questo punto ci viene in aiuto JavaScript, così da permettere all’utente di selezionare il foglio di stile più adatto:
onclick=”setActiveStyleSheet(‘large text’); return false;”

LAYOUT
Occupiamoci adesso del layout, ponendoci una domanda fondamentale: tabelle o CSS? Beh, se volete rimanere aggiornati e adottare soluzioni più funzionali e flessibili, allora scordatevi le tabelle. Con i CSS potete ottenere effetti che prima vi sognavate solamente.
Iniziamo col capire la differenza tra margine e padding.
I margini aggiungono spazio all’esterno di un elemento, mentre il padding lo aggiunge all’interno. Possiamo naturalmente definire margini e padding di ogni lato indipendentemente dall’altro.
A questo punto possiamo utilizzarli per qualsiasi elemento.
La proprietà float invece sposta l’elemento a cui viene applicata esternamente al flusso del documento e lo fa “fluttuare” lungo il perimetro dell’elemento a blocco che lo contiene. Gli altri elementi a blocco ignoreranno l’elemento fluttuante e verranno mostrati come se questo non ci fosse. Gli elementi inline, invece, come i contenuti, faranno spazio all’elemento, ed è questo il motivo per cui utilizzando la proprietà float è possibile disporre il testo intorno ad una immagine.
La proprietà CSS clear invece permette di ripulire un elemento da qualsiasi altro elemento fluttuante.
Proseguiamo la nostra carrellata sul layout analizzando il fatto che tramite l’utilizzo dei CSS possiamo collocare un elemento sulla pagina partendo dall’alto, dal basso, da sinistra o da destra utilizzando il posizionamento assoluto (position: absolute;).
Adesso magari vi starete chiedendo: ma come faccio a centrare un blocco sulla pagina? Magari dovrei utilizzare degli artifici particolari. Vi posto semplicemente le due righe di codice per ottenere ciò:
margin-left: auto;
margin-right: auto;
Quando impostiamo sia il margine destro che sinistro ad auto, il browser calcola automaticamente i margini necessari affinché siano uguali e la casella venga centrata nella pagina.
Adesso possiamo sbizzarrirci nel creare i nostri layout utilizzando i posizionamenti assoluti e/o relativi dei div, scordandoci delle tabelle.
Approfondiamo un altro tipo di problema. Se ad esempio vorremmo mostrare una collezione di immagini, l’utilizzo di una tabella potrebbe sembrare la soluzione migliore; in realtà con i CSS siamo in grado di ottenere qualcosa di più elegante. Nella pagina HTML, creiamo un elenco non ordinato delle immagini assieme alla rispettiva didascalia. Adesso applichiamo i CSS e per ottenere un layout con lo stile griglia di miniature, utilizziamo la proprietà float per posizionare le immagini. Otterremo questo effetto impostando la proprietà sul tag <li> che contiene tutte le immagini:
#albumlist {
    list-style-type: none;
}
#albumlist li {
    float: left;
    width: 240px;
}
#albumlist img {
    display: block;
}
Abbiamo in questo modo rimosso i punti elenco e abbiamo fatto fluttuare le immagini verso sinistra. Inoltre, impostando le immagini da mostrare come blocchi, forzeremo la didascalia a comparire sotto ognuna di esse.

TECNICHE DI SUPPORTO PER I DIVERSI BROWSER
Poiché è improbabile che ogni visitatore del vostro sito usi la versione più aggiornata di Internet Explorer, Firefox o Safari, è opportuno assicurarsi che anche gli utenti con i browser più vecchi o meno diffusi possano apprezzare le vostre pagine.
È bene dunque cercare di provare il nostro sito con la maggior parte dei browser in disponibili. Ma capite bene che è quasi impossibile avere installato sulla propria macchina tutti i browser possibili e immaginabili, con tutte le varie versioni e per i diversi sistemi operativi. A questo punto ci viene in aiuto un utilissimo servizio gratuito presente su questa pagina:
http://browsershots.org/
Inserite il sito da testare nel campo Inserisci qui l’indirizzo del tuo sito web. Nella parte centrale selezionate i browser da utilizzare per il test, quelli già selezionati sono tutte le principali versioni dei browser più diffusi, nella maggior parte dei casi vi basterà lasciare quelli già proposti. Nella parte bassa scegliete che linguaggi dovranno essere supportati, se non sapete cosa abilitare in linea generale vi consiglio di impostare su Abilitato il linguaggio Javascript e il Flash visto che sono molto utilizzati. Se volete potete anche scegliere la dimensione dello schermo con quale il sito verrà testato e la quantità di colori. Cliccate, infine, sul pulsante Invia presente in alto a destra e vi appariranno  delle piccole immagini in miniature; cliccandoci sopra le visualizzerete a pieno schermo e potrete così visualizzare in che modo i vari browser visualizzano il vostro sito.
Concludo dandovi l’ultima dritta riguardo la convalida del codice HTML e CSS. Convalidare i CSS e i vostri documenti è un passo importante per assicurarsi che il sito sia mostrato in maniera corretta nei browser standard. Potete convalidare online i vostri documenti (X)HTML all’indirizzo http://validator.w3.org , e i documenti CSS all’indirizzo http://jigsaw.w3.org/css-validator/ . Molti strumenti per lo sviluppo web come Dreamweaver, includono convalidatori, e sono disponibili anche alcuni plugin per browser come Firefox che vi aiutano a convalidare le vostre pagine.
Adesso avete tutti gli strumenti per poter iniziare a creare qualcosa di veramente interessante tramite una tecnologia nuova ed estremamente potente e performante. Non mi resta che augurarvi buona programmazione a tutti.

Scritto da Gianfranco Vecchio (Ginafrix) in Esclusiva per TiempoLibreSite.com

Comments: