CSS - Pagina 2 di 5 - TomStardust.com

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.

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

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.

Link accessibili da tastiera

L’importanza di mantenere l’outline sui link, anche utilizzando dei CSS di reset.

Una pratica fin troppo diffusa, spesso derivata dall’uso di CSS di reset, è quella di eliminare l’outline dai link e dagli altri elementi attivi di una pagina per scopi puramente estetici, con poche righe di codice:

:focus {
	outline: none;
}

Potrà sembrare una soluzione elegante, ma ai fini dell’accessibilità di un sito è assolutamente sconsigliato, perchè senza outline diventa impossibile navigare tramite tastiera, o comunque con dispositivi diversi da un mouse.

Non pensate che riguardi solo una minoranza di utenti: sono tanti coloro che scorrono il contenuto di una pagina premendo il tasto tab. In molti ad esempio si spostano tra i campi di un form in questo modo: eliminando l’outline sul focus rendete il vostro sito inaccessibile.

Lo stesso Eric Meyer, autore di uno dei più famosi CSS Reset, pur azzerando questo stile raccomanda di definirne altri per sostituirlo. Il mio consiglio è di lasciarlo inalterato per evitare problemi: perchè complicarsi la vita?

Una soluzione alternativa

A volte potrebbe comunque capitare di essere obbligati a modificare lo stile dei link, ad esempio su richiesta di un cliente particolarmente insistente. Un’alternativa in questi casi è lasciare il focus inalterato ed eliminare l’outline dallo stato active:

a:active {
	outline: none;
}

Così non apparirà il bordo tratteggiato al clic, ma la navigazione da tastiera resterà comunque possibile. Non è una soluzione ottimale, ma in situazioni particolari potrebbe essere un compromesso accettabile.

Foto: Macbook Keyboard by alcomm

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

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.

Selettori adiacenti con i CSS

E’ il momento di sperimentare nuove proprietà dei fogli di stile.

I selettori adiacenti sono una funzionalità dei CSS spesso ignorata, ma dalle grandi potenzialità. Con una semplice dichiarazione infatti è possibile identificare l’elemento immediatamente vicino (quindi adiacente) ad un altro. Ad esempio con

div + p { color: #a00; }

è possibile assegnare delle proprietà al primo paragrafo contenuto in un div, paragrafo che in questo caso diventerà rosso.

Niente classi o id, è possibile gestire tutto tramite CSS senza bisogno di appesantire il codice HTML. L’altra buona notizia è che questo tipo di selettore funziona su tutti i principali browser, escluso ovviamente Internet Explorer 6. Firefox, Explorer 7, Safari, Opera e Chrome la supportano senza problemi.

E’ tempo quindi di sperimentare ed iniziare ad utilizzarli, anche come progressive enhancement, per offrire ai visitatori con un browser recente una migliore esperienza di navigazione.

Se volete vedere un esempio pratico, ho fatto il mio primo esperimento con i selettori adiacenti nel footer di TomStardust Diary:

Questo post è nato da una discussione su Friendfeed: una chiara dimostrazione dell’utilità dei social networks. C’è ancora qualcuno che ne dubita?

Nascondere un elemento con i CSS in modo accessibile

I problemi nell’utilizzo del display:none e le alternative possibili.

Nella realizzazione di un sito è ricorrente la necessità di nascondere elementi presenti nel codice HTML: basti pensare agli skip link o alle tecniche di image replacement. Ci sono diversi modi per farlo con i CSS, ma non tutti sono corretti.

Evitare il display:none

Un metodo diffuso, che però è sbagliato, è utilizzare display: none per nascondere totalmente la parte di codice desiderata. Questa tecnica è inaccessibile, perchè elimina l’elemento dalla pagina come se non esistesse. La maggior parte degli screen reader trovando un elemento con display: none lo salterà senza leggerlo.

Pensate all’intestazione di un sito ed ai link per facilitare la navigazione nascosti in questo modo: non facendoli leggere agli screen reader l’accessibilità della pagina viene compromessa.

Trovate anche un approfondimento sul comportamento degli screen reader in questo articolo di Roger Johansson.

La soluzione con position:absolute

La soluzione più semplice è utilizzare position: absolute invece di display: none:

.skip { position: absolute; left: -9999px; }

In questo modo gli screen reader continueranno a leggere l’elemento nascosto. Per migliorare ulteriormente l’accessibilità della pagina con un occhio di riguardo alla navigazione da tastiera, è utile un’aggiunta del tipo:

.skip a:active, .skip a:focus { position: absolute; left: 1em; }

Così usando il tasto tab per spostarsi tra i collegamenti della pagina, gli elementi nascosti appariranno quando selezionati.

L’alternativa: text-indent

Una soluzione alternativa per nascondere un elemento della pagina può essere la proprietà text-indent, con un valore negativo:

.skip { text-indent: -9999px; }

Questo metodo a volte viene usato per mantenere l’elemento contenitore nella pagina, facendo sparire solo il suo contenuto testuale. E’ da verificare nei vari casi il supporto dei browser, ma tutti quelli più importanti non dovrebbero avere problemi.

Testo nascosto con JavaScript

Un ultimo aspetto da considerare è la gestione di elementi della pagina che appaiono solo dopo un’azione dell’utente, usando JavaScript. E’ sbagliato nasconderli con i CSS: se questi elementi (ad esempio un menu a tendina) appaiono grazie a JavaScript, devono essere nascosti al caricamento della pagina secondo lo stesso principio.

La tecnica più semplice è usare JavaScript per assegnare una classe all’elemento desiderato e quindi nasconderlo (senza usare display: none!) tramite CSS.

E’ importante comprendere i problemi relativi al display: none descritti in questo articolo. Usandolo con cognizione di causa eviterete dei problemi ai vostri utenti: se conoscete altre soluzioni valide i commenti sono a vostra disposizione.

Spingere gli utenti ad aggiornare Explorer 6

Alcuni consigli pratici per incentivare l’aggiornamento di IE6.

Su questo blog ci sono state numerose discussioni su Internet Explorer 6 e su quanto renda complicata la vita degli sviluppatori. E’ possibile rimanere passivi e aspettare la sua lenta morte, ma non è detto che questo sia l’atteggiamento migliore. Ogni web designer infatti può dare un contributo alla sparizione di questo browser, che esiste dal 2001.

Le soluzioni possibili

Il modo migliore per far capire ad un utente che il suo browser è obsoleto, è presentargli una versione del sito alternativa. Sfruttando i commenti condizionali è possibile fornire ad IE6 un CSS su misura:

In questo modo tutte le versioni di Explorer precedenti alla 7 vedranno il sito in maniera diversa: potrete divertirvi come volete con questo foglio di stile. Un eccellente esempio di personalizzazione è offerto da questo sito, che con IE6 appare interamente in bianco e nero.

Anche su TomStardust.com ho voluto fare qualcosa: adesso navigando con il browser Microsoft l’header appare diverso, e compare anche un avviso che invita il visitatore ad aggiornare. Tutto è collegato ad una nuova pagina creata per l’occasione, con i link per il download dei migliori browser. Come avrete capito non sono comunque a favore delle soluzioni drastiche: è bene che i contenuti siano accessibili in ogni caso.

La soluzione definitiva?

Ovviamente questi interventi non potranno portare in tempi brevi alla sparizione di IE6. Molti utenti continueranno ad utilizzarlo perchè non possono fare altrimenti, magari per obblighi aziendali.

E’ comunque importante dare un segnale: esistono già diverse campagne di sensibilizzazione e siti come Facebook da tempo presentano avvisi agli utenti di Explorer 6. Il 2009 probabilmente non vedrà sparire questo browser, ma potrebbe essere l’anno della svolta.

Usare gli sprite CSS

Cosa sono gli sprite CSS? Una veloce spiegazione ed uno strumento per utilizzarli.

L’utilizzo degli sprite CSS è una delle tecniche fondamentali da imparare quando si è alle prese con lo sviluppo di un sito. Consiste semplicemente nel riunire più immagini (spesso icone) in una più grande, come è possibile vedere nell’esempio qui a fianco (dove ho utilizzato alcune Silk Icons). Per selezionare quindi una singola immagine sarà sufficiente usare i CSS e la proprietà background-position.

Questa tecnica ha due vantaggi principali:

diminuisce il numero di richieste HTTP al server migliorando le prestazioni del sito
evita ritardi nel caricamento delle immagini usate per lo stato :hover dei link

Per velocizzare il lavoro e creare degli sprite CSS in pochi secondi, vi segnalo un fantastico CSS Sprite Generator che automatizza tutto il processo. Vi basterà caricare un file .zip contentente le immagini, impostare alcuni parametri come la distanza tra gli elementi ed il formato (png, gif o jpg), e lo strumento creerà anche le righe di CSS necessarie.

L’unico limite di questo tool è la dimensione del file da uploadare, che al momento non può superare i 500kb. Utile quindi per piccole immagini, mentre per files più ingombranti è necessario cercare altre alternative.

Animazioni e trasformazioni CSS

Con i CSS sarà possibile trasformare ed animare gli elementi di una pagina web. Cosa succederà a JavaScript?

Qualche tempo fa la Apple ha presentato al CSS Working Group del W3C una proposta riguardante transizioni ed animazioni con i CSS. Il tutto è stato preso in considerazione ed inserito nel documento che mostra i progressi del gruppo.

Ma di cosa stiamo parlando? Sono novità interessanti e prioritarie o l’introduzione di queste proposte potrebbe aumentare la confusione?

Le novità

Trasformazioni CSS

Pur non essendo incluse nell’ultima proposta, le trasformazioni CSS sono comunque correlate. La proprietà transform consente infatti di spostare, ruotare o ridimensionare un elemento della pagina.

Transizioni CSS

Questo modulo gestisce le transizioni tra pseudo-classi, come potrebbe essere il passaggio allo stato :hover di un link e viceversa. Per la transizione è possibile specificare un determinato periodo di tempo (transition-duration), il passaggio non sarà quindi istantaneo. Ad esempio un link potrebbe cambiare colore sfumando.

Animazioni CSS

Se già con il modulo dedicato alle transizioni è possibile associare ad un oggetto dei brevi movimenti, con questo modulo si possono raggiungere risultati ancora più complessi.

Definendo gli eventi associati ad una determinata animazione, è possibile infatti indicare quali siano le proprietà che cambiano, il loro valore, e per quanto tempo.

Esempi pratici

Mi rendo conto che con queste novità sia facile fare confusione. Per chiarirsi le idee basta avere installato Safari: il browser Apple infatti supporta queste funzioni con dei comandi proprietari (con il prefisso -webkit-).

Per trasformazioni e transizioni questo è uno dei migliori esempi disponibili. Se invece volete vedere un’animazione CSS, la trovate in questa pagina, ma vi servirà una delle ultime nightly build di Safari (anche Safari 4 beta).

Possibili problemi

Siamo sicuri che queste novità siano positive per gli sviluppatori? Fino ad ora la parte interattiva di una pagina era gestibile con JavaScript (lasciamo da parte Flash): introdurre dei nuovi meccanismi di controllo direttamente nei CSS potrebbe generare diversi problemi.

Compatibilità tra i browsers

Inutile dirlo, se già adesso ci sono problemi ad ottenere risultati equivalenti sui vari browser, occupandosi esclusivamente dell’aspetto visivo delle pagine, cosa succederà quando il discorso riguarderà anche l’interazione tra vari elementi? Queste proprietà saranno di fatto inutilizzabili, a meno che non si voglia ricorrere a JavaScript per ottenere risultati simili sui browser che non le supportano. Ma allora perchè non usare direttamente JavaScript?

Interazione con JavaScript

Separando l’aspetto dell’interazione tra CSS e Javascript, si presenta un altro problema: l’interazione tra i due mondi. Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.

Accessibilità

I problemi non mancano nemmeno per quanto riguarda l’accessibilità. Già adesso per uno screen reader non è facile sapere tutto ciò che succede in una pagina, soprattutto se certi script AJAX vengono realizzati senza seguire le specifiche. Introdurre altre complicazioni aumenterà inevitabilmente le difficoltà per alcune categorie di utenti.

Conclusioni

Le possibilità offerte da trasformazioni, transizioni e animazioni CSS potrebbero essere interessanti, ma sarà bene valutarne pro e contro quando sarà il momento di utilizzarle. Il fatto che esista una determinata tecnologia, non significa che debba essere per forza utilizzata.

La tentazione potrebbe essere forte, perchè con poche righe di CSS sarà possibile animare facilmente gli elementi della pagina, ma la cosa migliore sarà continuare a gestire le interazioni esclusivamente con JavaScript, così come HTML e CSS sono riservati rispettivamente a contenuto e presentazione.