Magie con i selettori CSS3

Non stai ancora usando i selettori CSS3? Stai perdendo un’opportunità.

Già in passato avevo parlato dei selettori CSS3, che aiutano a scrivere codice HTML ordinato e pulito. Sfruttare i fogli di stile è un ottimo modo per evitare di aggiungere id e classi inutili nelle pagine, ed in particolare nei miei post avevo affrontato due argomenti:

Cosa è cambiato nel frattempo?

Una cosa fondamentale: sono passati più di 5 anni ed ormai non ci sono più problemi di compatibilità cross-browser. È possibile sperimentare, usare tutti i selettori esistenti senza problemi, e se rimangono dei dubbi c’è una risorsa imperdibile come caniuse.com a disposizione.

Continua a leggere Magie con i selettori CSS3 »

CSS font-size e l’unità di misura rem

I CSS3 introducono una nuova unità di misura priva dei problemi di em e px.

Esistono vari modi di ridimensionare il testo di una pagina web tramite CSS: in pixel, em e in percentuale.

Tramite un post di Jonathan Snook ho scoperto l’esistenza di una nuova unità di misura introdotta con i CSS3, chiamata rem. Questa unità si comporta in maniera molto simile a em, senza ereditarne i punti deboli.

Continua a leggere CSS font-size e l’unità di misura rem »

CSS3: come usare le transizioni

Una guida sulle CSS3 transitions, disponibili già oggi sui browser più evoluti.

Leggendo CSS3 for Web Designers di Dan Cederholm ho avuto modo di approfondire alcuni moduli che pur non essendo ancora degli standard possono essere già utilizzati in maniera efficace.

La parte che riguarda le CSS3 transitions è una delle più interessanti, perché consente di creare semplici effetti grafici con poche righe di codice all’interno del foglio di stile. E’ assurdo installare interi framework JavaScript per un banale effetto dissolvenza: adesso è possibile evitarlo, con alcuni compromessi.

Continua a leggere CSS3: come usare le transizioni »

IE9 ed il supporto dei CSS3

IE9 potrà sfruttare tutti i selettori dei CSS3: solo Opera presenta ancora dei problemi.

La novità degli ultimi giorni riguarda Internet Explorer 9: la futura versione del browser Microsoft supporta infatti tutti i selettori dei CSS3.

Incredibile ma vero, nella tabella di compatibilità preparata in maniera eccellente da Quirksmode, IE9 entra infatti nel gruppo dei browser che possono utilizzare tutti i selettori più utili, compresi anche alcuni dei CSS 2.1.

I selettori supportati da Internet Explorer 9

CSS 2.1

  • :before e :after
  • :first-child
  • :focus

CSS 3

  • :empty
  • :enabled, :disabled e :checked
  • :first-of-type
  • :last-child
  • :last-of-type
  • :not
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :root
  • ::selection
  • :target

In questa lista sono esclusi alcuni selettori che sono già supportati dalle versioni precedenti di IE.

Interessante notare che mentre le ultime versioni di Firefox, Safari e Chrome non hanno problemi, adesso è Opera l’unico browser ad essere rimasto indietro, con delle difficoltà di interpretazione dei selettori :nth-child() ed :nth-of-type(). Opera infatti non riesce ancora a capire il funzionamento di queste regole, utili ad esempio per evidenziare gli elementi pari di una lista, o dare alternativamente a delle immagini float:right e float:left.

Implicazioni future

Questo ovviamente non significa che con l’uscita di Explorer 9 i selettori dei CSS3 potranno essere usati senza problemi (le versioni precedenti ci faranno compagnia per molto tempo), ma ci stiamo avviando verso un futuro più semplice per gli sviluppatori. L’uso di queste regole infatti consentirà di eliminare id e classi inutili dall’HTML, alleggerendo la struttura delle pagine.

Per il momento non resta che sperimentare ed affidarsi se necessario a soluzioni come ie-css3.js, aspettando la scomparsa dei browser più obsoleti.

Quando il redesign di un sito non funziona

Il caso di CSS3.info e della sua nuova grafica.

CSS3.info è uno dei siti da seguire per chi vuole rimanere aggiornato sulle ultime novità dei CSS3. Diversi mesi fa ha cambiato proprietario, e come era lecito aspettarsi è arrivato il momento del redesign del sito. Niente di strano, se non fosse che la nuova grafica dopo due settimane dal lancio ha raccolto un centinaio di commenti, quasi tutti negativi.

Quando viene pubblicata la nuova versione di un sito le critiche non mancano mai: ogni cambiamento spaventa. Basti pensare a quello che successe con il redesign di Facebook. In questo caso però il contenuto dei commenti non lascia dubbi: c’è qualcosa che non va, e molti di questi pareri sono ben motivati.

Scelte grafiche sbagliate

L’obiettivo dichiarato dal proprietario è quello di avere una grafica più professionale, pagine più leggere ed una nuova navigazione. Se per gli ultimi due punti l’obiettivo è stato raggiunto, le scelte di design si sono rivelate decisamente sbagliate.

Essendo un sito frequentato in buona parte da web designer, basta scorrere i commenti per trovare alcune critiche sensate, come:

  • colori male abbinati (testo blu su sfondo nero)
  • design troppo piatto
  • header vuoto
  • ombreggiature usate senza criterio

Il confronto con il passato è impietoso: pur non essendo straordinario, il precedente layout era gradevole e chiaro. Inserire un vecchio screenshot nel post che annunciava la nuova versione è stata decisamente una mossa suicida.

L’errore più grave è stato commesso cercando di utilizzare ovunque proprietà dei CSS3 solo perché sono l’argomento del sito. Avere la possibilità di utilizzare una feature non significa che questa debba essere per forza introdotta, anzi.

Versione beta sì, ma senza esagerare

Un altro problema, che evidenzia una gestione decisamente poco seria, è dato dalla prematura messa online di un layout dove mancano totalmente alcuni elementi fondamentali.

Nel momento in cui scrivo manca un box di ricerca, il footer del sito è vuoto, e diverse pagine hanno ancora un aspetto approssimativo.

Non c’è niente di male nel pubblicare un sito nella sua versione beta, magari facendo delle correzioni anche grazie alle segnalazioni dei visitatori, ma c’è comunque una bella differenza tra un design perfezionabile ed uno approssimativo.

Quali sono i vostri pareri sul nuovo CSS3.info? Nonostante tutto, questo caso può servire come insegnamento per il futuro: sicuramente ricorderò esempi come questo per evitare di commettere gli stessi errori.

Web Design 2010

Cosa cambierà nel mondo del web design durante il 2010? Qualche previsione per il prossimo anno.

Arrivati a fine anno, è giunto il momento di tirare le somme e fare delle previsioni su cosa accadrà nel 2010 nel mondo del web design.

Difficilmente ci saranno delle rivoluzioni, ma certe tendenze già viste alla fine del 2009 inizieranno ad affermarsi. Alcuni siti che nasceranno potranno usare HTML 5 ed i CSS3 senza problemi: sperimentare è ormai un dovere per non farsi cogliere impreparati..

Cosa aspettarsi quindi nel 2010? Ecco alcune previsioni.

HTML 5

Lo standard per il futuro dell’HTML è già stato ufficializzato dal W3C durante il 2009. Sono già stati fatti alcuni esperimenti interessanti, ma è logico aspettarsi che durante il prossimo anno l’HTML 5 sarà ancora più utilizzato.

Non ho mai nascosto la mia preferenza per l’XHTML, e per ora questo sito continuerà ad utilizzare tale specifica, ma se in questo momento decidessi di partire con un nuovo progetto sarei seriamente tentato di provare le potenzialità dell’HTML 5.

CSS 3

I CSS sono sempre stati in evoluzione continua: anche i browser ad ogni aggiornamento supportano funzioni sempre nuove. Ormai non serve più attendere l’ufficialità del W3C: molti produttori permettono di sperimentare i nuovi moduli dei CSS prima che questi diventino uno standard (ad esempio usando i prefissi moz- o webkit-).

Durante il 2009 ho già parlato di Web Fonts e Flexible Boxes, e nel 2010 ci saranno sicuramente altre novità in questo senso.

Internet Explorer 6

Per qualcuno IE6 è già defunto, ma la realtà lo dà ancora vivo e vegeto, assestato intorno al 10% del market share. Sono cifre ancora ragguardevoli, ma ormai le cose stanno cambiando. La tendenza è già chiara, ed il 2010 sarà l’anno giusto per vederlo sparire.

Il problema in Italia rimangono le pubbliche amministrazioni e gli uffici dove si continuano ad utilizzare vecchi computer, ma per quello purtroppo non c’è soluzione a breve termine.

La guerra dei browser

Mettendo da parte il discorso relativo a IE6, la guerra dei browser nel 2010 si farà ancora più interessante. Google Chrome ha superato in brevissimo tempo i numeri di Safari, e l’introduzione del ballot screen in Europa potrebbe riservare alcune sorprese.

Non resta che tenere sotto controllo le statistiche e seguirne l’evoluzione: Internet Explorer potrebbe anche perdere quote rilevanti.

Chrome OS

Infine nel 2010 nascerà il sistema operativo made in Google, e questa è già una notizia. Concepito per essere utilizzato solo con una connessione attiva, non sarà il massimo per il panorama italiano, ma ancora una volta a Mountain View hanno indicato la strada da seguire. Il futuro dei nostri dati è online, e Chrome OS sarà un primo importante passo in quella direzione.

Con questo post ho voluto tracciare un quadro generico per il prossimo anno: ci saranno sicuramente altre novità oltre a quelle citate, ma il 2010 sarà comunque un anno importante. Se avete altre previsioni da fare lasciate un commento: aspetto anche i vostri pareri.

Ombre cross-browser con i CSS, senza immagini

Come sfruttare la proprietà box-shadow dei CSS3 ed ottenere risultati simili anche su Internet Explorer.

La proprietà box-shadow (CSS3) permette di applicare ombre ad elementi contenitori di tipo block. Funziona in maniera simile alla proprietà text-shadow, ma il W3C al momento ne ha sospeso l’approfondimento per studiarne l’implementazione in maniera più approfondita.

Come funziona box-shadow?

La proprietà può essere utilizzata su Firefox 3.5 e sui browser basati su webkit (Safari e Chrome) con i soliti prefissi:

  • -moz-box-shadow per Firefox
  • -webkit-box-shadow per Safari e Chrome

L’espressione è semplicemente:

box-shadow: 5px 5px 10px #000;

dove i parametri sono nell’ordine:

  • la distanza dell’ombra in orizzontale ed in verticale
  • il raggio
  • il colore

Ho notato che tra i browser webkit la resa è migliore su Safari: Chrome pur visualizzando l’ombra ha qualche problema con gli angoli ed il loro arrotondamento.

La soluzione per Internet Explorer

La cosa interessante, scoperta per caso sul blog di Nick Dunn, è che con alcuni hack è già possibile sfruttare questa proprietà per ottenere un risultato valido anche su Internet Explorer.

Esistono infatti alcuni filtri proprietari della Microsoft che in queste circostanze sono l’unica soluzione possibile. Era già successo per i .png trasparenti su IE6, e la situazione è analoga anche in questo caso. Combinando i filtri Glow e Shadow, o ancora meglio utilizzando solamente Shadow è possibile ottenere un’ombra molto simile su tutte le versioni di Explorer, a partire dalla 5.5.

Il codice necessario è il seguente, da inserire in un commento condizionale:

filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);

Color e strenght dell’ombra possono ovviamente essere modificati secondo le necessità.

Demo

box-shadow

Ho realizzato una pagina dimostrativa di questo effetto.

Il risultato cambierà leggermente a seconda del browser utilizzato, ma resterà comunque coerente. La soluzione non è esente da difetti, ma è un buon compromesso per aggiungere dettagli in più ad un design senza appesantirlo con delle immagini. C’è anche da considerare che spesso è complicato dare un’ombra ad un contenitore, soprattutto se questo ha delle dimensioni variabili: l’unica soluzione è utilizzare del codice html superfluo o adottare questo metodo.

I difetti principali che ho riscontrato sono:

  • CSS non valido
  • niente ombra su Firefox < 3.5 e su Opera
  • uso di hack per Internet Explorer

A voi la scelta se adottare questa soluzione: è una possibilità da tenere in considerazione, ma la sua efficacia è da valutare a seconda del progetto. Niente vieta comunque di adottare anche solo la soluzione per Firefox come progressive enhancement, offrendo un’esperienza migliore di navigazione ad alcuni utenti.

CSS3: Flexible Box Layout Module

Analisi della nuova specifica CSS3 per gestire i layout e l’allineamento verticale.

Tra i vari moduli in lavorazione nelle specifiche dei CSS3, ce n’è uno particolarmente interessante: il Flexible Box Layout Module. Con questa specifica (ancora in sviluppo) è possibile infatti rendere flessibili i contenuti di un box, facendo loro occupare lo spazio vuoto a disposizione, sia orizzontalmente che verticalmente.

Il codice CSS

La teoria è semplice: dato un contenitore e degli elementi al suo interno, questi potranno adattarsi allo spazio vuoto. Considerando come html di base:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

Il CSS necessario per far adattare verticalmente i due div interni sarà:

.container {
    display: box;
    box-align: stretch;
    box-orient: vertical;
}
.box {
    box-flex: 1;
}

N.B.: Per lo stretch orizzontale, basta usare box-orient: horizontal.

In realtà per effettuare dei test è ancora necessario utilizzare i prefissi -moz- e -webkit-, visto che le proprietà standard non sono ancora supportate.

Esempi pratici

Flexible box layout model

Per capire ancora meglio la dinamica di questo modulo, gli esempi che trovate su css3.info sono meglio di qualsiasi descrizione testuale, a patto che stiate utilizzando le ultime versioni di Firefox, Safari o Chrome. Il W3C infatti sta ancora lavorando sul documento, e per adesso solo i motori di rendering Gecko e Webkit hanno delle istruzioni proprietarie adatte allo scopo.

Da notare che i due motori presentano risultati differenti, pur rendendo chiaramente l’idea dell’utilità della proprietà. A mio parere l’interpretazione corretta è quella di Webkit, ma finchè le specifiche non saranno definitive diventa difficile stabilirlo.

Un altro articolo interessante a riguardo è sul blog di Alex Russel, che ha preparato un foglio di stile su misura per avere già pronte tutte le classi necessarie.

Perchè parlarne?

Se le specifiche per il Flexible Box Layout Module sono ancora così indietro, ha senso parlarne? La risposta è sì, come nel caso di tutte le altre proprietà dei CSS3 che non sono ancora supportate. Pur non potendo utilizzarle nei propri progetti, per un web designer non è mai troppo presto per sperimentare: quando arriverà il momento sarà un grande vantaggio conoscerle.

Purtroppo l’ostacolo è rappresentato dalla lentezza del W3C e dal normale ciclo di vita dei browser: finchè esisteranno sul mercato delle versioni che non supportano queste nuove proprietà, sarà ancora presto per utilizzarle.

I problemi di validazione con i CSS3

Utilizzare i CSS3 significa spesso avere fogli di stile non validi. Come affrontare il problema?

Uno dei problemi principali nell’utilizzo dei CSS3 è la creazione di fogli di stile con codice valido. I CSS2 sono ormai uno standard, ma non è così per le nuove specifiche.

Escludendo qualche rara eccezione, la maggior parte delle proprietà hanno nomi diversi e sono supportate in maniera differente a seconda del browser: questo non semplifica il lavoro degli sviluppatori. Basti pensare ad una proprietà ormai diffusa su tutti i browser (escludendo il solito Internet Explorer): border-radius. Su Firefox è necessario utilizzare il prefisso “moz-“, su Safari e Chrome bisogna anteporre “webkit-“ , ed ognuna di queste forme ovviamente non è riconosciuta dal W3C.

Il risultato è che se si desidera utilizzare i CSS3 per dare ad una parte dei propri utenti una migliore esperienza di navigazione, non sarà possibile validare il foglio di stile.

Come comportarsi in questo caso? L’unica soluzione è trovare un compromesso. Su questo sito ad esempio l’unica proprietà particolare che ho utilizzato è text-shadow, ben supportata nella sua forma standard. Ho invece trascurato proprio border-radius e altre proprietà simili, che però utilizzo su altri progetti come il mio blog personale, dove sono meno rigido per quanto riguarda la validazione dei CSS.

La colpa di questa situazione è da attribuire soprattutto alla lentezza del W3C, perchè i produttori di browser stanno dimostrando una grande attenzione alle novità. Supportare certe funzionalità è comunque motivo di vanto sulla concorrenza. Non è possibile però chiedere ai produttori di utilizzare fin da subito la forma standard delle proprietà: le specifiche potrebbero cambiare prima del raggiungimento della loro forma standard.

Proprio sull’uso dei CSS3 sarei curioso di conoscere anche il vostro punto di vista: li utilizzate? Vi preoccupate della validazione del foglio di stile?

Uno dei migliori suggerimenti sull’argomento, segnalato su CSS3.info, riguarda una possibile modifica al validatore del W3C. La soluzione ideale infatti sarebbe vedere segnalate come “experimental” o “warning” le proprietà dei CSS3 ancora sperimentali, consentendone l’uso senza problemi. Gli errori sparirebbero per la felicità di tutti, ma è una speranza probabilmente troppo ottimista.

Layout a tabelle con i CSS

Con Internet Explorer 8 sarà possibile usare la proprietà CSS display:table. Cambierà qualcosa per i web designer?

Dopo aver abbandonato l’uso delle tabelle per il layout, in questo periodo si sta tornando a parlare del loro utilizzo in forma diversa: non più all’interno del codice HTML, ma con la proprietà display dei CSS.

Come fa notare Digital Web Magazine, con l’imminente uscita di Internet Explorer 8 questa proprietà supporterà correttamente i valori table, table-row e table-cell per la prima volta su un browser Microsoft. Le ultime versioni di Safari, Opera e Firefox seguono già gli standard e non dovrebbero avere alcun problema.

Come funziona la tecnica?

Basta realizzare una semplice struttura nel codice HTML con dei div:

<div id="main">
<div id="nav">
...contenuto della colonna
</div>
<div id="content">
...contenuto della pagina
</div>
</div>

Quindi è sufficiente applicare gli stili relativi, facendo in modo che il contenitore principale abbia un display: table, e le singole colonne un display: table-cell:

#main {
display: table;
border-collapse: collapse;
}
#nav {
display: table-cell;
width: 180px;
}
#content {
display: table-cell;
width: 580px;
}

Da notare che una tecnica simile dal punto di vista della semantica del codice non presenta alcuna controindicazione. L’aspetto tabellare infatti viene gestito interamente tramite i fogli di stile, il markup è ben organizzato e non ha particolari differenze rispetto a quello di un layout con i float.

Incompatibilità e difetti

Per ogni nuova tecnica è fondamentale considerare quanto essa sia realmente applicabile. Nel caso dei layout a tabelle con i CSS, uno dei punti deboli è sicuramente il mancato supporto di IE6 e IE7. Non poter usare questa soluzione sui due browser che da soli rappresentano più del 70% del mercato, la rende di fatto inutilizzabile: al momento è poco più che esercizio di stile.

Un altro aspetto poco considerato è l’ordine dei contenuti all’interno del codice HTML. Con questa tecnica si ripresenta uno dei difetti principali delle tabelle: l’impossibilità di organizzarli secondo la loro importanza. Usando un layout tabellare tutti i vantaggi del posizionamento con i float spariscono, dovendo per forza di cose ordinare gli elementi secondo il loro ordine di apparizione nella pagina.

Se volete continuare ad approfondire il discorso, vi rimando ad un post di Edit di qualche settimana fa. Dal mio punto di vista, potrebbe essere interessante sperimentare la tecnica per il futuro, ma con qualche riserva. Sarà infatti possibile usarla quando IE6 e IE7 spariranno dalla circolazione, ma i CSS3 saranno ormai alle porte con nuove soluzioni per gestire il layout di un sito.