Accessibilità dei contenuti generati tramite CSS

La maggior parte degli screen reader riconosce i contenuti generati tramite CSS, ma è bene fare attenzione a come vengono utilizzati.

Se avete utilizzato la proprietà content dei CSS, sapete già quanto sia utile per inserire del contenuto in abbinamento agli pseudo-elementi :after e :before.

Utilizzarla è semplicissimo, visto che il css:

p:before {
   content: "Inizio";
}

p:after {
   content: "Fine";
}

Agisce sul codice della pagina inserendo del contenuto subito prima e subito dopo l’elemento selezionato (il paragrafo in questo caso).

Mi sono chiesto a che punto fosse il supporto degli screen reader per contenuti inseriti in questo modo. Si tratta di testo non esistente all’interno della pagina html, e non è quindi scontato che sia accessibile a tutti i visitatori. Continua a leggere Accessibilità dei contenuti generati tramite CSS »

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 modulari e SASS, il workshop

Un riassunto del workshop organizzato da Develer dedicato ai CSS modulari.

Qualche giorno fa ho partecipato ad un workshop organizzato da Develer, azienda fiorentina che tra le altre cose può vantare nel proprio curriculum eventi come Better Software.

 

Develer workshops

Il workshop era intitolato “CSS e HTML5: organizzare il caos”. Speaker di turno Matteo Papadopoulos, che in poco più di un’ora ha affrontato una serie di temi relativi allo sviluppo di pagine web facili da mantenere grazie alla logica modulare.

L’argomento non era facile da affrontare soprattutto addentrandosi in dettagli tecnici, ma proprio questo ho trovato diversi spunti interessanti.

Continua a leggere CSS modulari e SASS, il workshop »

Liste HTML e screen reader

Non tutti i lettori di schermo annunciano la presenza di una lista se l’aspetto viene modificato tramite CSS.

Gli screen reader sono uno strumento utile, per qualcuno indispensabile, ma a volte si comportano in maniera diversa da quello che ci si potrebbe aspettare.

Una di queste situazioni è stata descritta pochi giorni fa su 456 Berea Street, e riguarda le liste HTML: i classici tag <ol> e <ul>. Quando l’aspetto della lista viene nascosto tramite fogli di stile, molti screen reader non la annunciano come tale, anche se il codice HTML dice il contrario.

Continua a leggere Liste HTML e screen reader »

Quando usare !important nei CSS

Ha senso utilizzare !important in un foglio di stile? La risposta è no, con rare eccezioni.

L’uso di !important nei CSS è la principale causa di frustrazione quando si lavora su un sito, soprattutto se ereditato da altri sviluppatori.

Infatti se all’interno di un CSS ci sono delle regole contrassegnate con !important e questi valori devono essere modificati su dei nuovi elementi, non ci sono molte soluzioni. Le principali sono due:

  • stravolgere il foglio di stile
  • entrare in un circolo vizioso aggiungendo nuove regole con !important.

Basta capire questo per rendersi conto di come sia sempre meglio evitarne l’uso. Mi era capitato anche in passato di sfiorare l’argomento parlando degli standard del sito della BBC, dove era appunto proibito agli sviluppatori di utilizzare questa regola.

Continua a leggere Quando usare !important nei CSS »

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 »

CSS design e standard di lavoro

Le linee guida della BBC per i “future media” includono diverse raccomandazioni sulla scrittura dei CSS. Simili pratiche sono solo inutili complicazioni?

Uno dei siti corporate che presta più attenzione ai dettagli è quello della BBC: all’apparenza semplice ed ordinato nonostante i numerosi contenuti, si basa su molte pagine di specifiche tecniche e linee guida che devono essere rispettate dai suoi sviluppatori.

Continua a leggere CSS design e standard di lavoro »

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

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.