Ora che ho terminato un bellissimo ma faticoso corso di inglese a Londra sto iniziando a cercare attivamente un lavoro nella capitale e nei dintorni. Molte aziende, per l’ammissione ai colloqui, chiedono la realizzazione di alcune applicazioni di test in modo da verificare se i candidati possiedono le conoscenze di base a loro necessarie. Considerato che ripassare è per me spesso un’operazione noiosa, e visto che sento la mancanza di scrivere sul mio blog, ho deciso di pubblicare in forma sintetica gli argomenti che sto rinfrescando senza la pretesa di essere esaustivo e senza l’obiettivo di creare guide chiare e lineari. Inizio con qualcosa di sicuramente noioso ma assolutamente necessario in ambito web e cioè i fogli di stile.
Introduzione
Le specifiche ufficiali “CSS livello 2 revisione 1” del W3C sono raggiungibili al seguente indirizzo: http://www.w3.org/TR/CSS2/
Sviluppare applicazioni web nel rispetto degli standard ha i seguenti vantaggi:
- Compatibilità con un ampio numero di browser
- Indipendenza dal dispositivo
- Miglioramento dell’accessibilità dell’applicazione
- Semplificazione dello sviluppo e della manutenzione del codice
- Leggerezza del codice e quindi migliore velocità di navigazione
- Migliore indicizzazione da parte dei motori di ricerca
Un foglio di stile è formato da un insieme di regole. Ogni regola è costituita da un selettore che specifica gli elementi a cui si fa riferimento e da un insieme di coppie proprietà-valori (dichiarazioni) che specificano come gli elementi selezionati devono essere rappresentati graficamente.
Le regole CSS possono essere scritte direttamente nel codice del documento XHTML all’interno del tag <style>
<head>
<style type=”text/css”>
/*<![CDATA[*/
…
/*]]>*/
</style>
</head>
oppure possono essere separate in fogli di stile esterni che possono essere collegati a una pagina attraverso il tag <link>
<head>
<link rel=”stylesheet” href=”stile_esterno.css” type=”text/css” />
…
</head>
Selettori
* è il selettore universale e seleziona ogni tipo di elemento dell’albero del documento.
p h1 h2 sono selettori di tipo e permettono di specificare regole che si applicano solamente ad un particolare tipo di elemento XHTML.
.classe è un selettore di classe che specifica una regola che può essere applicata ad un elemento utilizzando l’attributo class. Tramite l’attributo class è anche possibile applicare più classi contemporaneamente.
#elemento è un identificatore che permette di individuare un unico oggetto del documento con l’attributo id impostato. Non possono esistere due oggetti con lo stesso attributo id.
E’ possibile effettuare combinazioni come h1.classe e div#elemento.
Le pseudoclassi distinguono gli oggetti in base ad alcune loro proprietà intrinseche, quindi non richiedono una marcatura o una notazione particolare per essere specificate:
p:first-child individua il primo paragrafo.
a:link e a:visited si applicano rispettivamente ai collegamenti non visitati e visitati
a:hover, a:focus, a:active rispondono ad azioni compiute dall’utente come posizionamento del puntatore sopra un oggetto, la selezione e l’attivazione di un oggetto.
html:lang(it) differenzia gli elementi in base all’attributo lang.
Gli pseudoelementi selezionano una sottoparte di un elemento:
p:first-line seleziona la prima linea di un blocco, p:first-letter seleziona la prima lettera di un blocco.
Tramite i selettori di discendenza è possibile specificare i rapporti di parentela tra gli elementi:
body > p individua tutti i tag <p> direttamente contenuti nel tag <body> (figli)
body p individua tutti i tag <p> contenuti nel tag <body> indipendente dal grado di discendenza
h1 + p individua il primo tag <p> dopo <h1> (si chiama selettore fratello)
Tutti gli attributi possono essere utilizzati come selettori CSS utilizzando il selettore di attributi:
tag[att] verifica se l’attributo att è stato impostato
tag[att=val] verifica se l’attributo att assume uno specifico valore
tag[att~=val] verifica se l’attributo att assume come valore una serie di parole separate da spazi, una delle quali è esattamente val
tag[att|=val] verifica se l’attributo att assume come valore una lista di parole separata da un trattino, la prima delle quali è esattamente val
Classi e identificatori sono un caso particolare di selettore di attributo.
E’ possibile associare l’insieme delle dichiarazioni di una regola a più selettori contemporaneamente separandoli tramite una virgola come ad esempio h1, #id, p.classe { … }.
Quando due dichiarazioni sono in conflitto si applica la dichiarazione il cui selettore ha maggiore specificità.
Dichiarazioni
Lista delle proprietà per la specifica del font:
font-style: italic;
font-weight: bold;
font-size: 90%;
line-height: 2em;
font-family : arial, helvetica, sans-serif;
text-align: justify;
E’ possibile raggruppare gran parte delle proprietà nella proprietà font.
font: italic bold 2em/1.5em arial, helvetica, sans-serif;
Per inserire immagini di sfondo e colore di sfondo:
background-color: #FFCC99;
background-image : url (../immagini/sfondo.jpg);
background-repeat: no-repeat;
background-position: 20% 25%;
E’ possibile raggruppare gran parte delle proprietà nella proprietà background.
Il Box Model
Il Box Model è uno degli aspetti più importanti dei CSS poichè determina l’aspetto degli elementi a livello di blocco (<p>, <div>, <h1>…<h6>, <blockquote>).
Ogni box è caratterizzato da:
- larghezza e altezza dei contenuti (proprietà width e height)
- spazio tra contenuti e bordi (proprietà padding)
- bordo (proprietà border)
- spazio tra il bordo e gli altri oggetti della pagina (proprietà margin)
E’ possibile specificare le dimensioni minime e massime utilizzando le proprietà min-width, min-height e max-width, max-height.
La proprietà overflow (valori visible, hidden, scroll e auto) specifica cosa fare quando un elemento all’interno di un blocco supera in larghezza la dimenzione impostata per il box stesso.
La proprietà display (valori block, inline, list-item e none) permette di modificare il tipo di elemento.
Il tipo di posizionamento è definito attraverso la proprietà position e può essere static, relative, absolute o fixed. L’offset del posizionamento relativo è assegnato tramite le proprietà top, right, bottom e left che invece, nel caso di posizionamento assoluto, individuano la posizione del blocco. E’ possibile determinare la larghezza (altezza) di un blocco impostando contemporaneamente il valore delle proprietà left e right (top e bottom). Il posizionamento fisso è simile al posizionamento assoluto solamente che il riferimento per il posizionamento è sempre la finestra del browser e quando la pagina scorre, i blocchi rimangono ancorati alla posizione iniziale.
L’ordine di sovrapposizione dei blocchi può essere modificato utilizzando la proprietà z-index.
I blochi flottanti permettono la disposizione dei contenuti di blocchi successivi rispettivamente attorno al loro bordo destro o sinistro. Si utilizza la proprietà float con i possibili valori none, left, right. Un elemento flottante diventa implicitamente un elemento di blocco e viene estratto dal normale flusso della pagina. I margini di un box flottante non collassano. Per interrompere l’effetto del box flottante si può utilizzare la proprietà clear. Quando due blocchi flottanti sono disposti uno di seguito all’altro, si dispongono uno di fianco all’altro sulla stessa linea finchè c’è spazio disponibile.
Con la proprietà visibility (valori visible, hidden e collapse) è possibile regolare lo stato di visibilità di un elemento.
Il problema dei browser
La prima volta che ho studiato i CSS (più di 6 anni fa), in poche ore ho letto un manuale e ho compreso il significato dei vari attributi. Tutto contento inizio a fare alcune prove e mi accorgo di essere letteralmente imbranato e incapace di creare anche una delle più semplici interfacce. Mi chiesi: ma come è possibile ? La risposta era semplice: purtroppo ogni browser intepretava differentemente lo standard W3C e c’erano differenze notevoli di comportamento tra uno e l’altro. Tutto questo ha per molti anni limitato le potenzialità offerte dai CSS che dovevano per forza rimanere inespresse per mantenere la compatibilità tra browser differenti. Il peggiore di tutti, è doveroso dirlo è il browser Internet Explorer 6, che ha reso frustrante la vita di molti sviluppatori web !
Per fortuna oggi le cose sono notevolmente migliorate. Tutti i browser sostanzialmente offrono il supporto alla versione CSS 2.1 aprendo ai designer web nuove possibilità. Con la versione 8 di Internet Explorer finalmente anche Microsoft si è allineata agli standard. Quest’ultima versione supporta in modo completo tutta la versione 2.1 dello standard CSS e alcune caratteristiche presenti nella futura versione 3.
Voglio segnalare un link interessante e utile in cui è possibile verificare la compatibilità di un attributo CSS attraverso le varie versioni di Internet Explorer (che è il browser più diffuso): CSS Compatibiliy and Internet Explorer.