verosimile.it

Esperimenti CSS

Cose che potresti fare con i CSS3: la mappa della metropolitana di Milano

Utilizzando alcune delle proprietà Css2 e Css3 implementate dai browser più recenti è possibile trasformare una serie di elenchi puntati in una complessa mappa grafica.

Quello che presento in questo post è un esercizio di stile finalizzato a promuovere alcune proprietà dei CSS3 (e CSS2) gestite dai browser più recenti, non un tutorial da prendere come riferimento. Faccio questa premessa perché il codice che genera la pagina di esempi potrebbe essere ottimizzato e reso più snello.
Il mio intento è dimostrare che, utilizzando alcune banali proprietà tipiche dei CSS3 (“border-radius” e “transform”) altre dei CSS2 implementate da relativamente poco tempo nei browser più evoluti (pseudoclassi “:after” e “:before” abbinate al contenuto generato, proprietà “inline-block”, font inserito via url), oltre, naturalmente, al posizionamento relativo e assoluto, si possa ottenere un effetto grafico molto complesso, che fino a poco tempo fa non ci saremmo mai immaginati di ricavare da un semplice html e CSS, senza immagini.
Mi sto riferendo alla mappa della Metropolitana di Milano, che potete vedere a questo link (qui il pdf originale), a condizione che usiate una release recente di Firefox, Chrome/Safari oppure Opera. Nel caso utilizziate Internet Explorer 8, a causa del suo mancato supporto ai CSS3, non vedreste la pagina correttamente, ma con la prossima versione 9 non dovrebbero esserci problemi.
È una versione semplificata rispetto all’originale, ma solo causa del tempo che ho voluto e potuto investirci, non per impossibilità tecniche.

Esperimenti CSS

Multiple links reload: nuova e migliore soluzione per gestire con i soli css un box a scomparsa con link multipli

Una veloce soluzione in puro css2 (e una spolveratina di css3) da utilizzare quando un concetto deve portare a più link.

Tempo fa avevo proposto una soluzione per i link multipli senza far uso di javascript (tranne un banale window.open), utilizzando solo i CSS. Tale soluzione, come avevo scritto nel post, non mi aveva convinto del tutto poiché, per mantenere la piena compatibilità con Internet Explorer 6, ero stato costretto ad usare un codice ridondante e non del tutto accessibile. Questo per il semplice motivo che la pseudo classe :hover (che permette la comparsa/scomparsa del box), con il browser sopra indicato funziona solo applicata al tag a.

Ora che IE6 è diventato un browser marginale, penso che i tempi siano maturi per una soluzione più efficiente e semplice, anche questa senza immagini, che offra un’alternativa funzionale agli utenti di questo browser, senza rovinare il layout della pagina. Quindi grande guadagno in termini di accessibilità e pulizia del codice e resa alternativa gradevole per le versioni di Internet Explorer precedenti la 7.
Inoltre, per rendere più gradevole il tutto sui client web avanzati, approfitteremo di quanto ci offrono i CSS3.

Prima di vedere come funziona questa nuova versione dei multiple links, un piccolo ripasso su cosa sono i multiple links (da adesso ml).
In breve, se per approfondire un concetto voglio abbinargli più di un link, attualmente posso fare solo così:

Con i ml è invece possibile una gestione più elegante e trasparente dei link molteplici:

Esperimenti CSS

Internet Explorer 8 e la sua curiosa gestione della sottolineatura negli heading linkati che contengono un bold

Internet Explorer: nuova versione, nuovi bachi!

Immaginiamo di avere un titolo, per esempio un h4 (il quale abbiamo stabilito via CSS che non deve essere in grassetto) linkato che contiene una parte in bold. Se il link lo vogliamo sottolineato, la sottolineatura non dev’essere in grassetto, giusto?
Per capirci, questo è ciò che ci aspettiamo di vedere:

E infatti è quello che ci viene presentato da tutti i browser. O meglio: da tutti i browser tranne uno. Ecco infatti come Internet Explorer 8 gestisce l’elemento:

Come possiamo vedere, l’ultimo browser di casa Redmond, in presenza di un titolo linkato con dentro un bold, bolda anche la sottolineatura. Comportamento che nemmeno i suoi eccentrici predecessori si sognavano di avere.

Ma non è tutto. Guardate un po’ come IE 8 gestisce il medesimo elemento in presenza di meno testo boldato:

Ora la sottolineatura non è più boldata (uniformandosi all’interpretazione di tutti gli altri browser).
Cos’è successo? Semplice: in questo esempio la parte del titolo linkato in bold è minore di quella non in bold.
Quindi abbiamo scoperto che IE 8 decide di boldare o meno la sottolineatura di un titolo con dentro un link che a sua volta contiene un tag “b” (o “strong”) facendo un calcolo tra il rapporto di testo in grassetto e di testo normale. Se il testo in grassetto è maggiore di quello normale, la sottolineatura sarà boldata, e viceversa.

Esperimenti CSS

Navigare con un vecchio browser è come guardare la tv con un apparecchio in bianco e nero

Ovvero: il mio piccolo contributo alla campagna per la rottamazione dei vecchi browser

L’idea non è nuova, infatti ho preso ispirazione da una segnalazione di progressive enhancement creativo comparsa qualche tempo fa su edit.
In soldoni si tratta di usare la proprietà filter (gestita solo da Internet Explorer) in questo modo:

selettore {filter: gray;}

per creare l’effetto bianco e nero su tutta la pagina. Con i commenti condizionali (che abbiamo visto anche all’interno del post su Internet Explore e il tag <br />), poi, si fa in modo che il foglio di stile che contiene questo filtro sia caricato solo da Explorer 6 o inferiore. L’effetto lo potete vedere nell’immagine qui sopra, oppure usando il browser in questione.
Tutto ciò per sensibilizzare gli utenti meno intraprendenti a cambiare browser. Certo, se quasi tutti i siti “moderni” (quelli che si professano web 2.0, per intenderci) utilizzassero questo modo simpatico di convincere i navigatori più pigri che c'? un modo mogliore di vedere il web, il rinnovo del parco browser sarebbe più veloce, con effetti benefici sul web design in generale, oggi ancora troppo vincolato ai limiti dell’intramontabile IE6.

Esperimenti CSS

Creare facilmente div con angoli tondi senza usare immagini e javascript

Una soluzione CSS veloce, configurabile, leggera, validata, dal layout elastico. Insomma, una soluzione con le palle... quattro palle, per essere precisi!

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

Mesi fa avevo proposto una procedura CSS per creare box con angoli tondi senza immagini, utilizzando le liste di definizione. Vediamo ora una versione che fa uso dei classici div, quindi molto più familiare a chi sviluppa siti web.
Il punto di forza della versione con liste di definizione era il fatto che non venivano richiesti tag aggiuntivi, potendo utilizzare, per creare l’effetto “stondatura”, gli stili applicati ai vari elementi della definition list (dl), ossia i tag definition term (dt) e definition detail (dd).
Ora invece non abbiamo a disposizione che un singolo tag - il div, appunto - per cui saremo costretti ad usare degli elementi aggiuntivi... o qualsi!

Utilizzeremo infatti quattro bullet (•) posizionati alla fine del div, che avranno, nel flusso del documento, la funzione di una spaziatura tipografica (come il tag hr, per intenderci). Come avrete capito, l’escamotage che permette di creare angoli tondi senza immagini o javascript sta tutto nell’utilizzo di questi quattro bullet. Vediamo come.

Esperimenti CSS

Gestire più collegamenti da un link: una soluzione CSS

I multiple links: quando un testo linkato deve richiamare più collegamenti.

Esperimenti CSS

Brrrrrrr! What a cool 'br'!

Ovvero: come sfruttare il più modesto e metafisico dei tag html per migliorare il layout di una pagina in Internet Explorer

Il tag <br>, ossia interruzione di riga (e inizio di una nuova), è un po’ come il sale della formattazione, lo si usa con spensieratezza per rendere più saporiti i paragrafi e agevolarne la lettura.
E fin qui, siamo tutti d’accordo... Se però ci venisse la morbosa curiosità di vedere com’è fatto un <br>, cosa otterremmo? Innanzi tutto dovremmo porci prima un interrogativo di carattere filosofico: siamo sicuri dell’esistenza ontologica di questo tag? Vediamo quello che fa, ma non lo vediamo mai direttamente... il che lo rende il più metafisico tra i tag (X)HTML.
A conferma della sua natura trascendentale, se lo si “pompa” tramite CSS per renderlo visibile, i maggiori browser saranno discordi su come (e se) presentarcelo.

Esperimenti CSS

Creare automaticamente box con angoli arrotondati estensibili, anche senza immagini: tre soluzioni CSS

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

A tutt'oggi solo i browser della famiglia Mozilla offrono la possibilità di creare facilmente box con angoli arrotondati via CSS. Chi volesse crearne uno cross-browser è costretto a barcamenarsi tra gif o jpg che rappresentano gli angoli curvi di vari tipi, div vuoti che non hanno nessun significato strutturale, difficoltà nell’usare un layout liquido... Insomma, soluzioni che appesantiscono il markup e costringono a usare spesso editor grafici.
Vediamo allora tre alternative che ho sviluppato per automatizzare la creazione di box con gli angoli smussati, usando, al posto dei classici div, le versatili liste di definizioni.
Si tratta di veri e propri “kit per box stondati”, da scaricare e da usare ogni volta che si presenti l’occasione:

• Soluzione per creare box semplici
• Soluzione per creare fancy box, con background a scelta
• Infine, spingendo al massimo il concetto di automatizzazione e ottimizazione delle risorse, soluzione per creare box con gli angoli arrotondati senza usare immagini.