{"id":168,"date":"2011-06-15T11:17:28","date_gmt":"2011-06-15T09:17:28","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/immagini-fluide\/"},"modified":"2011-06-15T11:17:28","modified_gmt":"2011-06-15T09:17:28","slug":"immagini-fluide","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/immagini-fluide\/","title":{"rendered":"Immagini fluide"},"content":{"rendered":"

Siamo lieti di presentare un estratto dal Capitolo 3 di Responsive Web Design<\/a> di Ethan Marcotte (A Book Apart, 2011). Questo capitolo segue quello sulle griglie fluide (fluid grids) ed amplia il discorso ivi iniziato con le immagini fluide. -Ed.<\/em><\/p>\n

Le cose stanno andando bene finora: abbiamo un layout basato su una griglia che non sacrifica la complessit\u00e0 per la flessibilit\u00e0. Devo ammettere che la prima volta che ho scoperto come creare una griglia fluida<\/a> ero piuttosto orgoglioso di me stesso!<\/p>\n

<\/p>\n

Fig 3.0: La nostra griglia flessibile \u00e8 finalmente finita. Non c’\u00e8 un valore espresso in pixel a perdita d’occhio e non abbiamo dovuto lesinare sull’estetica.<\/p>\n<\/div>\n

Tutto a un tratto per\u00f2, come spesso capita nel web design, giunge la disperazione. Al momento, la nostra pagina \u00e8 piena di parole e poco altro. In realt\u00e0, null’altro, non \u00e8 nient’altro che testo. Perch\u00e9 questo dovrebbe essere un problema? Beh, il testo si riposiziona senza sforzi all’interno di un contenitore flessibile ma, non so se l’avete notato, sembra che Internet abbia una o due di quelle cose chiamate \u201cimmagini\u201d sparse qua e l\u00e0, solo che noi non ne abbiamo incorporata nemmeno una nella nostra griglia flessibile.<\/p>\n

Quindi, cosa succede quando introduciamo delle immagini a larghezza fissa nel nostro design flessibile?<\/p>\n

\n

Tornare indietro, indietro al markup, markup<\/h2>\n

Per trovare una risposta a questa domanda, facciamo un esperimento veloce: inseriamo un’immagine direttamente nel nostro modulo blog e vediamo come risponde il layout. La prima cosa che dobbiamo fare \u00e8 trovarle un posto all’interno del markup.<\/p>\n

Vi ricordate il nostro piccolo blockquote<\/code>, comodamente infilato nell’articolo del blog? Bene, abbiamo fin troppo testo su questa dannata pagina, quindi lo rimpiazziamo con un’immagine inserita nel testo:<\/p>\n

 \n<div class=\"figure\">\n  <p>\n    <img src=\"robot.jpg\" alt=\"\" \/> \n    <b class=\"figcaption\">Lo, the robot walks<\/b>\n  <\/p>\n<\/div>\n<\/code><\/pre>\n
Nulla di che: un elemento img<\/code> seguito da una breve caption descrittiva contenuta in un elemento b<\/code>. In realt\u00e0, sto utilizzando i tag figure<\/code>\/figcaption<\/code> di HTML5 come nomi delle classi in questa snippet, per darle una solida base semantica.<\/p>\n
(I lettori pi\u00f9 attenti si saranno accorti che sto usando un elemento b<\/code> come hook non semantico. Ora, alcuni web designer potrebbero utilizzare al suo posto uno span<\/code>, ma io preferisco la concisione di tag quali b<\/code> o i<\/code> per il markup non semantico).<\/p>\n
Fatto il markup HTML, assegniamogli delle regole CSS di base:<\/p>\n
 \n.figure {\n  float: right;\n  margin-bottom: 0.5em;\n  margin-left: 2.53164557%;  \/* 12px \/ 474px *\/\n  width: 48.7341772%;  \/* 231px \/ 474px *\/\n}\n<\/code><\/pre>\n
<\/p>\n
Fig 3.1: Un’immagine appropriatamente robotica di un robot, per gentile concessione di Jeremy Noble<\/a>.<\/em><\/p>\n<\/div>\n
Stiamo qui realizzando un grazioso effetto inset per la nostra figura: sar\u00e0 spostata sulla destra e occuper\u00e0 circa la met\u00e0 della larghezza del nostro articolo o quattro colonne della nostra griglia flessibile. Markup: ok; stile: ok. Ovviamente, tutto questo HTML e CSS \u00e8 inutile se non c’\u00e8 un’immagine disponibile.<\/p>\n
Ora, dal momento che voglio un bene dell’anima a voi (e ai robot), non poteva andare bene una qualunque immagine. E infatti, dopo aver perlustrato il web per molti minuti, ho trovato un robo-ritratto splendidamente imponente (fig. 3.1). La cosa meravigliosa riguardo questa immagine (a parte il fatto che si tratta di un robot, ovviamente) sta nel suo essere enorme. L’ho leggermente ritagliata, ma non l’ho ridotta in dimensioni, lasciandola alla sua risoluzione originaria di 655×655. Questa immagine \u00e8 molto pi\u00f9 grande di quello che sappiamo che potrebbe essere il suo contenitore flessibile, rendendola un caso perfetto per testare la robustezza e la flessibilit\u00e0 del nostro layout.<\/p>\n
Quindi, mettiamo la nostra immagine sovradimensionata sul server, ricarichiamo la pagina e…oh! Ehm… Questa \u00e8 la cosa pi\u00f9 brutta che si possa trovare su internet!<\/p>\n
<\/p>\n
Fig 3.2: La nostra immagine gigante \u00e8 gigante: il nostro layout \u00e8 rotto.<\/em><\/p>\n<\/div>\n
In realt\u00e0, il risultato non ci stupisce pi\u00f9 di tanto. Il nostro layout non \u00e8 rotto di per s\u00e9<\/em>: il nostro contenitore flessibile funziona bene e le proporzioni delle colonne della nostra griglia sono rimaste intatte. Ma dal momento che la nostra immagine \u00e8 molto pi\u00f9 grande del div .figure<\/code> che la contiene, la parte in eccesso del contenuto esce dal suo contenitore ed \u00e8 visibile all’utente. Semplicemente, non ci sono vincoli applicati all’immagine che la mettano in grado di capire che si trova in un ambiente flessibile.<\/p>\n<\/div>\n
\n
Immagini fluide<\/h2>\n
Cosa succederebbe se introducessimo tali vincoli? E se potessimo scrivere una regola che impedisca alle immagini di sforare la larghezza dei propri contenitori?<\/p>\n
Beh, ecco la buona notizia: \u00e8 una cosa molto semplice da fare:<\/p>\n
 \nimg {\n  max-width: 100%;\n}\n<\/code><\/pre>\n
Scoperta per la prima volta dal web designer Richard Rutter<\/a>, questa regola ci fornisce immediatamente un vincolo molto comodo per qualsiasi immagine all’interno del nostro documento. Ora, il nostro elemento img<\/code> verr\u00e0 visualizzato a qualunque dimensione voglia purch\u00e9 questa sia inferiore a quella del suo elemento contenitore. Ma se succede che l’elemento img<\/code> sia pi\u00f9 grande del suo container, allora la direttiva max-width: 100%<\/code> forzer\u00e0 la larghezza dell’immagine alla larghezza del suo contenitore. E, come potete vedere, la nostra immagine \u00e8 andata a posto.<\/p>\n
<\/p>\n
Fig 3.3: Semplicemente includendo max-width: 100%<\/code>, abbiamo impedito alla nostra immagine di uscire dal suo contenitore flessibile. Nota a margine: adoro max-width: 100%<\/code>.<\/em><\/p>\n<\/div>\n
Inoltre, i browser moderni si sono evoluti fino al punto da riuscire a ridimensionare automaticamente le immagini in maniera proporzionale: con il ridimensionamento del nostro contenitore flessibile l’immagine si allarga o si restringe preservando il rapporto altezza-larghezza.<\/p>\n
<\/p>\n
Fig 3.4: Non importa quanto diventi largo o stretto il contenitore flessibile: l’immagine si ridimensioner\u00e0 in proporzione. Magia? Chi pu\u00f2 dirlo!<\/em><\/p>\n<\/div>\n
Spero che non siate gi\u00e0 stanchi di tutte queste buone notizie perch\u00e9, guarda caso, la regola max-width: 100%<\/code> si pu\u00f2 applicare anche alla maggior parte degli elementi di larghezza fissa, come i video o altri rich media. Infatti, possiamo rinforzare il nostro selettore affinch\u00e9 copra altri elementi \u201cmedia-ready\u201d, in questo modo:<\/p>\n
 \nimg,\nembed,\nobject,\nvideo {\n  max-width: 100%;\n}\n<\/code><\/pre>\n
Sia che si tratti di un grazioso video Flash, di un qualche altro embedded media o di una semplice img<\/code>, i browsers si comportano in maniera imparziale, ridimensionando il contenuto proporzionalmente nel layout flessibile. Il tutto grazie al nostro piccolo vincolo max-width.<\/p>\n
<\/p>\n
Fig 3.5: Altri media vanno d’accordo con max-width: 100%<\/code>, diventando anch’essi flessibili. Ho gi\u00e0 detto che adoro max-width: 100%<\/code>?<\/em><\/p>\n<\/div>\n
E cos\u00ec abbiamo risolto il problema delle immagini flessibili e degli altri media che si ridimensionano, giusto? Una sola regola CSS e siamo a posto?<\/p>\n<\/div>\n
\n
Perch\u00e9 questo lavoro non \u00e8 mai facile<\/h2>\n
E’ ora di iniziare il processo di guarigione: dobbiamo passare attraverso il dolore, le lacrime, la lacerazione delle vesti e parlare di alcune questioni specifiche dei vari browser riguardanti le immagini flessibili.<\/p>\n
max-width in Internet Explorer<\/h3>\n
La dura e spietata verit\u00e0 \u00e8 che Internet Explorer 6 ed i suoi predecessori non supportano la propriet\u00e0 max-width<\/code>. IE7 e successive? Oh, \u00e8 positivamente traboccante di supporto per max-width<\/code>. Ma se siete costretti a supportare il (ehm<\/em>) venerabile IE6 o predecessori, il nostro approccio ha bisogno di alcune rifiniture.<\/p>\n
Ora, ci sono molti modi documentati per far s\u00ec che max-width<\/code> funzioni in IE6. La maggior parte di questi sono JavaScript-driven, solitamente basati su un filtro di espressioni proprietarie di Microsoft per valutare dinamicamente la larghezza di un elemento e per ridimensionarlo manualmente se eccede una certa soglia. Per un esempio di questi workaround decisamente non-standard, vi raccomando l’ormai classico blog post di Svend Tofte su questo argomento<\/a>.<\/p>\n
Io? Io tendo a preferire un approccio pi\u00f9 lo-fi e CSS-driven. Mi spiego: tutti i browser moderni comprendono il vincolo max-width<\/code>.<\/p>\n
 \nimg,\nembed,\nobject,\nvideo {\n  max-width: 100%;\n}\n<\/code><\/pre>\n
Ma in un foglio di stile separato specifico per IE6, includo la seguente regola:<\/p>\n
 \nimg,\nembed,\nobject,\nvideo {\n width: 100%;\n}\n<\/code><\/pre>\n
Vedete la differenza? IE6 e precedenti comprendono la regola width: 100%<\/code>, invece che max-width: 100%<\/code>.<\/p>\n
Una parola di avvertimento: siate cauti qui, perch\u00e9 queste sono regole drasticamente differenti. Laddove max-width: 100%<\/code> dice alle nostre immagini di non superare mai la larghezza dei loro contenitori, width: 100%<\/code> forza le nostre immagini ad avere sempre<\/em> la larghezza dei loro elementi contenitori.<\/p>\n
Nella maggior parte dei casi questo approccio funzioner\u00e0. Ad esempio, possiamo certamente assumere che la nostra immagine sovradimensionata robot.jpg<\/code> sar\u00e0 sempre pi\u00f9 larga del suo elemento contenitore, pertanto la regola width: 100%<\/code> funzioner\u00e0 benissimo.<\/p>\n
Ma per immagini pi\u00f9 piccole come le thumbnails o come la maggior parte dei video embedded, potrebbe non essere appropriato ingrandirle alla cieca con i CSS. Se questo \u00e8 il vostro caso, allora potrebbe essere giustificata un po’ pi\u00f9 di specificit\u00e0 per IE:<\/p>\n
 \nimg.full,\nobject.full,\n.main img,\n.main object {\n  width: 100%;\n}\n<\/code><\/pre>\n
Se non volete che la regola width: 100%<\/code> venga applicata a qualunque media di larghezza fissa presente nella vostra pagina, possiamo semplicemente scrivere una lista di selettori che abbia come obiettivo alcuni tipi di immagini o video (img.full<\/code>), oppure alcune aree nel vostro documento dove sapete che dovrete gestire dei media sovradimensionati (.main img<\/code>, .main object<\/code>). Pensate a questo elenco come ad una whitelist: se le immagini o altri media appaiono su questa lista, allora saranno flessibili, altrimenti saranno di dimensioni fisse nel loro tedioso modo orientato al pixel.<\/p>\n
Quindi, se state ancora offrendo supporto alle versioni legacy di Internet Explorer, una regola width: 100%<\/code> applicata con attenzione pu\u00f2 far funzionare le immagini flessibili magnificamente. Ecco, abbiamo risolto un bug, ma ce ne rimane un altro.<\/p>\n
E ragazzi, \u00e8 una cosa ancora pi\u00f9 bizzarra.<\/p>\n
Paragrafo in cui diventa evidente che Windows ci odia<\/h3>\n
<\/p>\n
Fig 3.6: Visualizzata qui in IE6, la nostra immagine del robot ha sviluppato degli antiestetici artefatti<\/a>. Suppongo che a Windows non interessino granch\u00e9 le nostre immagini.<\/em><\/p>\n<\/div>\n
Se guardate il nostro modulo blog con certi browser basati su Windows, la nostra robot.jpg<\/code> \u00e8 passata dall’apparire imponente all’apparire, beh, rotta. Ma questa non \u00e8 tanto una questione dipendente da un browser quanto piuttosto dalla piattaforma: Windows non ridimensiona molto bene le immagini. Infatti, quando vengono ridimensionate tramite CSS, in Windows le immagini sviluppano rapidamente degli artefatti, che influiscono drasticamente sulla loro qualit\u00e0. E non in maniera positiva.<\/p>\n
Per un rapido test case<\/a>, ho inserito un’immagine piena di testo in un contenitore flessibile e ho ridimensionato l’immagine con la soluzione max-width: 100%<\/code>, mentre IE6 e precedenti utilizzeranno il workaround width: 100%<\/code>. Ora, nella realt\u00e0 non mettereste mai cos\u00ec tanto testo in un’immagine, ma mi serviva un esempio che illustrasse perfettamente quanto possano andare male le cose in IE7 e precedenti. Come potete vedere, l’immagine appare, se mi passate il termine tecnico, proprio orribile.<\/p>\n
Ma prima di abbandonare la speranza di avere immagini scalabili e flessibili, vale la pena notare che questo bug non interessa tutti i browser basati su Windows. Infatti, ne sono interessati solo Internet Explorer 7 e precedenti, cos\u00ec come Firefox 2 e precedenti sempre su Windows. I browser pi\u00f9 moderni come Safari, Firefox 3+ e IE8+ non mostrano alcun problema con le immagini flessibili. Inoltre, il bug sembra essere stato sistemato in Windows 7. Ecco altre buone notizie!<\/p>\n
<\/p>\n
Fig 3.7: In alcuni browser basati su Windows, l’immagine sviluppa presto troppi artefatti per poter essere leggibile.<\/em><\/p>\n<\/div>\n
Quindi, definito lo \u201cscope\u201d del problema, ci sar\u00e0 sicuramente una patch che possiamo applicare! Fortunatamente c’\u00e8, con l’eccezione di Firefox 2.<\/p>\n
Ora, questo vecchio brizzolato browser fu rilasciato nel 2006, quindi penso sia lecito ritenere che non stia esattamente intasando i log del traffico del vostro sito. In ogni caso, una patch per Firefox 2 richiede un browser sniffing veramente intricato che miri a specifiche versioni su specifiche piattaforme e, nel migliore dei casi, il browser-sniffing \u00e8 inaffidabile. Ma anche se volessimo fare questo tipo di scoperta, queste versioni pi\u00f9 vecchie di Firefox non hanno un interruttore che possa sistemare le nostre immagini rovinate.<\/p>\n
Tuttavia, Internet Explorer ha tale interruttore. (Perdonatemi, abbasso la cresta per il titolo della sezione successiva)<\/p>\n
Ave AlphaImageLoader, eroe conquistatore<\/h3>\n
Avete mai provato a far funzionare i PNG trasparenti in IE6 e precedenti? Se s\u00ec, ci sono buone probabilit\u00e0 che abbiate incontrato AlphaImageLoader<\/code><\/a>, uno dei filtri CSS proprietari di Microsoft. Nel tempo sono state create delle robuste patch per colmare la mancanza di supporto di IE per l’alpha channel dei PNG (la libreria DD_belatedPNG<\/a> di Drew Diller \u00e8 al momento una delle mie preferite), ma storicamente, se avevate un PNG come background di un elemento, potevate mettere la regola seguente in un foglio di stile specifico per IE: (gli \u201ca capo\u201d sono segnati con \u00bb, Ed.<\/em>)<\/p>\n
 \n.logo {\n  background: none;\n  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader\u00bb\n  (src=\"\/path\/to\/logo.png\", sizingMethod=\"scale\");\n}\n<\/code><\/pre>\n
La patch AlphaImageLoader<\/code> fa alcune cose. Innanzitutto, rimuove l’immagine di background dall’elemento, poi la inserisce nell’oggetto AlphaImageLoader<\/code> che sta \u201ctra\u201d l’effettivo layer di background ed il contenuto dell’elemento. Ma la propriet\u00e0 sizingMethod<\/code><\/a> \u00e8 la vera trovata: impone all’oggetto AlphaImageLoader di tagliare qualunque parte dell’immagine che fuoriesca dal suo container, di trattarla come un’immagine regolare, o ridimensionarla per farla stare all’interno del suo elemento contenitore.<\/p>\n
Vi sento sbadigliare: cosa pu\u00f2 mai avere a che fare uno specifico IE fix per PNG con la resa disastrata della nostra immagine?<\/p>\n
C’entra un bel po’, come vi vado a dimostrare. Ad un certo punto ho scoperto che applicare AlphaImageLoader<\/code> ad un’immagine ne migliora drasticamente la resa in IE, portandolo al livello di, beh, qualunque altro browser sul pianeta. Inoltre, impostando la propriet\u00e0 sizingMethod<\/code> a scale<\/code>, possiamo usare il nostro oggetto AlphaImageLoader<\/code> per creare l’illusione che l’immagine sia flessibile.<\/p>\n
Ecco quindi che improvviso un po’ di JavaScript per automatizzare il processo: scaricate lo script<\/a> ed includetelo semplicemente in ogni pagina che abbia delle immagini flessibili. Questo analizzer\u00e0 il vostro documento per creare una serie di oggetti AlphaImageLoader<\/code> flessibili e di alta qualit\u00e0.<\/p>\n
E con tale fix applicato, la differenza nella resa delle nostre immagini \u00e8 notevole: nel nostro esempio siamo passati da un’immagine distorta in maniera impossibile ad una resa immacolata. E funziona perfettamente in un contesto flessibile!<\/p>\n
<\/p>\n
Fig 3.8: La nostra immagine \u00e8 ora perfettamente leggibile e si ridimensiona magnificamente. Un pizzico di AlphaImageLoader<\/code> e tutto passa!<\/em><\/p>\n<\/div>\n
(Occorre ricordare che molti filtri proprietari di Microsoft, ed in particolare AlphaImageLoader<\/code>, aggiungono un overhead alla performance. Stoyan Stefanov copre in dettaglio le insidie nello YUI blog<\/a>. Cosa significa questo? Assicuratevi di testare il fix su tutto il vostro sito, valutarne l’effetto sui vostri utenti e stabilire se vale la pena migliorare il rendering a scapito della performance.<\/p>\n
Con il fix max-width: 100%<\/code> al suo posto (e supportato dalle nostre patch width: 100%<\/code> e AlphaImageLoader<\/code>), la nostra immagine inserita nel testo si ridimensiona molto bene su tutti i nostri target browser. Non importa la dimensione della finestra del browser, la nostra immagine si ridimensiona in maniera armonica con le proporzioni della nostra griglia flessibile.<\/p>\n
E le immagini che non sono nel nostro markup?<\/p>\n<\/div>\n
\n
Rendere flessibili le immagini \u201ctiled\u201d di background<\/h2>\n
Supponiamo che il nostro caro e stimato designer ci abbia mandato una revisione del mockup del nostro modulo blog. Notate qualche differenza?<\/p>\n
<\/p>\n
Fig 3.9: La sidebar del nostro blog adesso sfoggia una grafica di background. Forte!<\/em><\/p>\n<\/div>\n
Fino ad ora, il contenuto del nostro blog aveva uno sfondo piuttosto modesto, quasi bianco. Ma adesso il design \u00e8 stato leggermente modificato, con l’aggiunta di un background a due colori per la blog entry, cos\u00ec da avere un maggiore contrasto tra la colonna di sinistra e quella di destra. Inoltre, c’\u00e8 un sottile livello di rumore aggiunto al background che d\u00e0 una ulteriore texture al nostro design:<\/p>\n
<\/p>\n
Fig 3.10: Un dettaglio del nostro nuovo background.<\/em><\/p>\n<\/div>\n
Quindi, come facciamo ad aggiungere questa nuova immagine di background al nostro template?<\/p>\n
Nel lontano 2004, Dan Cederholm scrisse un articolo geniale<\/a> che dimostrava come una immagine di background ripetuta verticalmente potesse essere usata per creare l’illusione di una \u201cfalsa colonna\u201d. La genialit\u00e0 di questa tecnica sta nella sua semplicit\u00e0: allineando verticalmente un’immagine di background a colori dietro al nostro contenuto, possiamo creare l’illusione di colonne di uguale altezza.<\/p>\n
Nella tecnica originale di Dan, l’immagine di background veniva semplicemente centrata in cima all’area del contenuto e poi ripetuta verticalmente, in questo modo:<\/p>\n
 \n.blog {\n  background: #F8F5F2 url(\"blog-bg.png\") repeat-y 50% 0;\n}\n<\/code><\/pre>\n
E questa tecnica funziona benissimo. Ma la tecnica di Dan presume che il vostro design sia a larghezza fissa, cos\u00ec da poter creare un’immagine che coincida con la larghezza del vostro design. Allora, di grazia, come dovremmo infilare un’immagine di sfondo che si ripeta su due colonne flessibili?<\/p>\n
Grazie ad alcune antesignane ricerche del designer Doug Bowman<\/a>, possiamo ancora applicare la tecnica delle false colonne. Serve giusto un po’ di pianificazione extra cos\u00ec come una spruzzata della nostra formula preferita: obiettivo \u00f7 contesto = risultato<\/code>.<\/p>\n
Per prima cosa, cominceremo con l’osservare il nostro mockup per trovare il punto di transizione nella nostra immagine di background: il pixel esatto in cui la nostra colonna passa dal bianco al grigio. E per come stanno le cose, questa transizione avviene al pixel 568.<\/p>\n
<\/p>\n
Fig 3.11: La nostra colonna bianca cambia in grigio al pixel 568. Questo \u00e8 il nostro punto di transizione.<\/em><\/p>\n<\/div>\n
Armati di questa informazione, possiamo adesso modificare l’approccio delle \u201cfalse colonne\u201d alla nostra griglia fluida. Per prima cosa, convertiamo il punto di transizione in un valore basato su una percentuale relativo alla larghezza del nostro modulo blog. E per fare questo rientra di nuovo in gioco la nostra formula obiettivo \u00f7 contesto = risultato<\/code>. Abbiamo il nostro valore obiettivo, 568px<\/code> e la larghezza del design, il nostro contesto, \u00e8 900px. E se inseriamo questi due valori nella nostra robusta formula, otteniamo:<\/p>\n
568 \u00f7 900 = 0.631111111111111<\/code><\/pre>\n
Esatto, un altro numero impossibilmente lungo, che, convertito in percentuale d\u00e0 63.1111111111111%<\/code>.<\/p>\n
Tenete a mente questa percentuale per un attimo. Ora, apriamo il nostro editor di immagini preferito e creiamo un documento dalla grandezza esagerata, ad esempio, da 3000 pixel di larghezza. E dal momento che ripeteremo questa immagine verticalmente, la sua altezza sar\u00e0 di soli 160px<\/code>.<\/p>\n
<\/p>\n
Fig 3.12: Un canvas mostruosamente largo che (a breve) faremo diventare la nostra immagine di background.<\/em><\/p>\n<\/div>\n
Tra un attimo trasformeremo questo documento vuoto nella nostra immagine di background. Ma perch\u00e9 \u00e8 cos\u00ec largo? Beh, questa immagine deve essere pi\u00f9 larga di quanto possiamo ragionevolmente presumere che sar\u00e0 mai larga una finestra del browser. E a meno che stiate leggendo questo testo da un monitor del XXV secolo della dimensione di una parete fatto da… che so… ologrammi o qualcosa cos\u00ec, presumo che il vostro monitor non sia cos\u00ec largo.<\/p>\n
Per creare le colonne, dobbiamo applicare la percentuale del punto di transizione (63.1111111111111%<\/code>) al nostro nuovo e pi\u00f9 ampio canvas. Cos\u00ec, se stiamo lavorando con una immagine larga 3000px<\/code> dovremo solo moltiplicare questa larghezza per la percentuale, in questo modo:<\/p>\n
3000 x 0.631111111111111 = 1893.333333333333<\/code><\/pre>\n
Come risultato otteniamo 1893.333333333333<\/code>. E siccome Photoshop non gestisce nulla che non sia un pixel intero, lo arrotondiamo a 1893 pixel. Armati di questo numero, ricreiamo la texture nella nostra immagine vuoata, passando dal bianco al grigio al pixel 1893.<\/p>\n
<\/p>\n
Fig 3.13: Abbiamo applicato la percentuale alla nostra \u201coh cos\u00ec grande!\u201d immagine di background, creando le nostre colonne pronte per essere ripetute.<\/em><\/p>\n<\/div>\n
In che modo tutto ci\u00f2 ci \u00e8 d’aiuto? Beh, tutto quello che abbiamo appena fatto consiste nel ridimensionare proporzionalmente il nostro punto di transizione per arrivare fino a questo nuovo, e pi\u00f9 largo, canvas. Cos\u00ec possiamo prendere il nuovo valore del pixel ed usarlo per creare le nostre colonne: la colonna bianca sar\u00e0 larga 1893px<\/code>, mentre la colonna grigia riempir\u00e0 quello che resta.<\/p>\n
Adesso ci rimane solo una cosa da fare: inserire la nostra nuovissima immagine nel foglio di stile.<\/p>\n
 \n.blog {\n  background: #F8F5F2 url(\"blog-bg.png\") repeat-y 63.1111111111111% 0;  \n  \/* 568px \/ 900px *\/\n}\n<\/code><\/pre>\n
Cos\u00ec come nella tecnica originale di Dan, abbiamo posizionato di nuovo l’immagine al top del nostro blog e poi abbiamo impostato la ripetizione verticale verso il basso (repeat-y<\/code>). Ma il valore di background-position<\/code> riutilizza la percentuale del punto di transizione (63.1111111111111% 0<\/code>), facendo rimanere le colonne al loro posto al ridimensionarsi del nostro design.<\/p>\n
E con ci\u00f2, abbiamo delle false colonne che funzionano benissimo in un layout fluido. Il tutto grazie all’approccio originale di Dan Cederholm, potenziato con un po’ di \u201cpensiero proporzionale\u201d.<\/p>\n
<\/p>\n
Fig 3.14: Le nostre false colonne flessibili.<\/em><\/p>\n<\/div>\n
Immagini di background totalmente flessibili?<\/h3>\n
Ovviamente le nostre false colonne non sono veramente flessibili: stiamo semplicemente utilizzando le percentuali per posizionare l’immagine di background in maniera da far sembrare che le colonne si ridimensioni con il loro contenitore. Le dimensioni dell’immagine non sono affatto cambiate.<\/p>\n
Ma cosa succede con un’immagine di background che in effetti deve proprio ridimensionarsi assieme al layout? Ad esempio, potreste aver messo un logo come background di un elemento h1<\/code>, o utilizzato le sprites per creare dei rollovers per la navigazione del vostro sito. Possiamo ridimensionare le immagini che devono vivere nel background?<\/p>\n
In un certo senso. C’\u00e8 una propriet\u00e0 CSS3 chiamata background-size<\/code><\/a> che potrebbe permetterci di creare delle immagini veramente flessibili, ma, l’avrete gi\u00e0 capito, il suo supporto da parte dei browser \u00e8 piuttosto immaturo.<\/p>\n
Nel frattempo, ci sono alcune soluzioni piuttosto ingegnose basate su JavaScript: ad esempio,  il jQuery plugin Backstretch<\/a> di Scott Robbin simula immagini di background dell’elemento body ridimensionabili. E, come vedrete nel prossimo capitolo, le CSS3 media query potrebbero essere usate per applicare diverse immagini di background create ad hoc per differenti range di risoluzione. Quindi, sebbene il background-size<\/code> non sia ancora utilizzabili, come si suol dire, il cielo \u00e8 il limite.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Imparate come rendere flessibili le immagini a larghezza fissa e come aggiungerle alle griglie fluide per creare un sito che risponda alla dimensione della viewport senza sacrificare l’estetica. Siamo lieti di presentarvi un estratto dal nuovo libro di Ethan (nonch\u00e9 il quarto titolo di A Book Apart): emResponsive Web Design\/em.<\/p>\n","protected":false},"author":818,"featured_media":7000617,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,272,43,274],"tags":[],"coauthors":[299],"class_list":["post-168","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-layout-and-grids","category-numero-29-15-giugno-2011","category-responsive-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000617"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=168"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}