{"id":180,"date":"2011-08-03T19:47:31","date_gmt":"2011-08-03T17:47:31","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/le-meraviglie-di-css3-nel-mondo-reale\/"},"modified":"2011-08-03T19:47:31","modified_gmt":"2011-08-03T17:47:31","slug":"le-meraviglie-di-css3-nel-mondo-reale","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/le-meraviglie-di-css3-nel-mondo-reale\/","title":{"rendered":"Le meraviglie di CSS3 nel mondo reale"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/n32_a2.jpg\" border=\"0\" align=\"left\" \/>Tutti voi designer disco-dancer (niente pi\u00f9 allitterazioni d&#8217;ora in avanti) amate le nuove caratteristiche che CSS3 mette a vostra disposizione per fare siti cool in maniera pi\u00f9 semplice, con meno hack e pi\u00f9 chiarezza. Features come i gradienti, le drop shadow, gli angoli arrotondati, le animazioni e l&#8217;opacit\u00e0 di CSS3 ci permettono di passare meno tempo in Photoshop, di usare meno <code>div<\/code> annidati in modo orrendo, di avere pi\u00f9 flessibilit\u00e0 e di divertirci di pi\u00f9! Per non parlare di tutto quel tempo in pi\u00f9 che possiamo passare al pub, mostrando entusiasti ai nostri amici i nostri ultimi esperimenti sull&#8217;iPad, mentre sorseggiamo una pinta di birra con un&#8217;aria intensa di auto-appagamento e compiacimento! Dobbiamo ammetterlo: la maggior parte di noi ha provato questa fantastica sensazione!<\/p>\n<p>La nuova specifica CSS3 permette perfino ad un progettista amatoriale reo-confesso come me di produrre dei design piuttosto gustosi. CSS3 \u00e8 qui, CSS3 \u00e8 divertente e CSS3 ci permette di far evolvere man mano l&#8217;aspetto del web. Almeno, questa \u00e8 la teoria, ma la realt\u00e0 \u00e8 un po&#8217; diversa:<\/p>\n<div class=\"paragrafo\">\n<ul>\n<li>Sia su desktop sia su mobile (e su altri dispositivi di navigazione alternativi) ci sono altri rendering engine <em>oltre<\/em> a Webkit. (Molti designer se ne dimenticano e non considerano il fatto che non \u00e8 poi cos\u00ec difficile far funzionare le nuove caratteristiche di CSS3 anche sugli altri browser).<\/li>\n<li>Alcuni browser in uso ad oggi supportano un insieme ragionevole di features, mentre alcuni non ne sopportano nemmeno una.<\/li>\n<li>Alcuni di noi hanno dei clienti in carne ed ossa che vogliono che i loro siti appaiano praticamente identici anche sui browser pi\u00f9 vecchi.<\/li>\n<\/ul>\n<p>Ok, probabilmente non sto dicendo nulla di nuovo, ma mettendo da parte i nostri divertenti esperimenti, che cosa possiamo <em>davvero<\/em> cominciare ad usare di CSS3 nei vari siti in produzione gi\u00e0 da adesso, senza dover aspettare 10 anni, ossia quando IE6 sar\u00e0 morto di vecchiaia e noi staremo imparando a conoscere CSS4?<\/p>\n<p>Non tratter\u00f2 nulla che si avvicini nemmeno vagamente al concetto di <em>tutte<\/em> le features che si possono trovare in CSS3, perch\u00e9 ci vorrebbe fino a Natale e mi perderei <a href=\"http:\/\/www.itv.com\/coronationstreet\/\">Coronation Street<\/a>. Mi accontento di fare una carrellata su alcune delle delizie di CSS3 che tutti noi conosciamo ed amiamo e vedremo come renderle il pi\u00f9 possibile cross-browser:<\/p>\n<ul>\n<li>Gradienti lineari<\/li>\n<li>Drop shadows<\/li>\n<li>Opacit\u00e0<\/li>\n<li>Angoli arrotondati<\/li>\n<li>Web font<\/li>\n<\/ul>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Un esempio appropriato?<\/h2>\n<p>Per spiegare le mie ragioni, creer\u00f2 un piccolo &#8220;funky bling box&#8221; che user\u00f2 come se fosse il mio parco giochi. Ecco che aspetto ha nelle ultime versioni di Opera, Firefox, Chrome e Safari:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/full_bling.jpg\" border=\"0\" \/><\/p>\n<p>Fig. 1: Esempio di CSS3 come viene visualizzato in un browser che supporta interamente CSS3.<\/p>\n<\/div>\n<p>Lo aggiorner\u00f2 man mano che procedo nella spiegazione. <a href=\"https:\/\/alistapart.github.io\/code-samples\/css3-bling-in-the-real-world\/examples\/blingv1.html\">Date un&#8217;occhiata al &#8220;bling-esempio&#8221; iniziale<\/a>: sentitevi liberi di farci delle prove e di aggiornarlo per conto vostro, perch\u00e9 sono sicuro che riuscirete a farlo apparire pi\u00f9 grazioso di quello che sono riuscito a fare io.<\/p>\n<p>In questo esempio, ho preso una semplice pagina HTML5 con un elemento <code>&lt;section&gt;<\/code> con del contenuto al suo interno e l&#8217;ho ornato con dei CSS piuttosto banali. Non vi illustrer\u00f2 il codice perch\u00e9 lo trovereste tedioso, tuttavia, vi sottolineo alcuni aspetti interessanti.<\/p>\n<h3>Web font<\/h3>\n<p>Tanto per cominciare, sono andato su <a href=\"http:\/\/www.fontsquirrel.com\">Font Squirrel<\/a>, ho cercato un font abbastanza carino e ho utilizzato l&#8217;<a href=\"http:\/\/www.fontsquirrel.com\/fontface\/generator\">@font-face generator<\/a> per creare il codice cross-browser per includere il font, che funzioner\u00e0 praticamente in tutti i browser:<\/p>\n<pre><code>@font-face {\n  font-family: 'MEgalopolisExtraRegular';\n  src: url('megalopolisextra-webfont.eot');\n  src: url('megalopolisextra-webfont.eot?#iefix') \n    format('embedded-opentype'),\n  url('megalopolisextra-webfont.woff') format('woff'),\n  url('megalopolisextra-webfont.ttf') format('truetype'),\n  url('megalopolisextra-webfont.svg#MEgalopolisExtraRegular') \n    format('svg');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n<h3>Angoli arrotondati<\/h3>\n<p>Per rendere il mio esempio &#8220;Web 2.0 compliant&#8221;, ho fatto in modo di aggiungere al mio box almeno un angolo arrotondato:<\/p>\n<pre><code>border-radius: 30px 0 0 0;<\/code><\/pre>\n<h3>Text shadows<\/h3>\n<p>Poi, ho incluso diverse ombreggiature al testo contenuto in <code>h1<\/code>, per dargli un discreto effetto 3D:<\/p>\n<pre><code>text-shadow: 0 0 1px #000,\n  0 0 1px #aaa,\n  0 0 2px #999,\n  0 0 3px #888,\n  0 0 4px #666,\n  0 3px 3px rgba(0,0,0,0.5),\n  0 4px 10px rgba(0,0,0,0.5);<\/code><\/pre>\n<p>Ho anche aggiunto una semplice ombreggiatura sul testo del paragrafo per assicurarne la leggibilit\u00e0 nel caso si scelgano colori pi\u00f9 scuri per il background:<\/p>\n<pre><code>text-shadow: 1px 1px 1px #bbb;<\/code><\/pre>\n<p>(Nota: ho preso ispirazione per il mio effetto text-shadow dal magistrale <a href=\"http:\/\/www.helmersworks.com\">Jan Henrik Helmers<\/a>.)<\/p>\n<h3>Box shadows<\/h3>\n<p>Ho poi aggiunto molteplici box-shadows, incluse multiple box shadow esterne per dare alla box un aspetto pi\u00f9 naturale con diverse sorgenti di luce ed una box shadow interna (specificata con la parola chiave <code>inset<\/code>) per dare alla box un po&#8217; di profondit\u00e0:<\/p>\n<pre><code>-webkit-box-shadow: 5px 5px 20px #000,\n  1px 1px 1px #000,\n  10px 10px 70px #333,\n  inset 10px 10px 20px rgba(0,0,0,0.4);\nbox-shadow: 5px 5px 20px #000,\n  1px 1px 1px #000,\n  10px 10px 70px #333,\n  inset 10px 10px 20px rgba(0,0,0,0.4);<\/code><\/pre>\n<p>Nota: ho incluso la versione del prefisso <code>-webkit-<\/code>: al momento in cui scrivo, Safari ha ancora bisogno del prefisso per <code>box-shadow<\/code>. Dovreste sempre mettere la versione senza prefisso per ultima quando usate i prefissi dei produttori, cos\u00ec che quando i browser smetteranno di usare il prefisso e supporteranno la versione finale, la versione senza prefisso sovrascriver\u00e0 qualunque comportamento esibito dalle versioni con il prefisso che la precedono nel sorgente.<\/p>\n<h3>Gradienti lineari<\/h3>\n<p>I gradienti lineari sono attualmente supportati da tutti i browser pi\u00f9 nuovi con i prefissi dei produttori. Abbiamo pertanto bisogno di aggiungere alcune righe per farle funzionare in maniera cross-browser. Per il mio esempio &#8220;blingtastic&#8221;, ho aggiunto un gradiente bianco che va diagonalmente attraverso tutto il box a 60 gradi per dare al box una bella texture:<\/p>\n<pre><code>background-image: -ms-linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));\nbackground-image: -moz-linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));\nbackground-image: -o-linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));\nbackground-image: -webkit-linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));\nbackground-image: linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));<\/code><\/pre>\n<h3>Opacit\u00e0<\/h3>\n<p>Avrete notato che sopra per il gradiente lineare e la box shadow interna ho usato i colori RGBa, ad esempio, <code>rgba(255,255,255,0.2)<\/code>. Non sto cambiando i colori dei canali, solo l&#8217;alpha channel, cos\u00ec uso solo il bianco puro e il nero con una trasparenza che cambia. Il colore che vedete \u00e8 in effetti il <code>background-color<\/code> che appare dal fondo. Questa \u00e8 una gran tecnica sotto molti aspetti: i browser che non supportano i gradienti lineari mostreranno ancora il colore di background, che \u00e8 importante per la leggibilit\u00e0, e voi potete semplicemente modificare il valore del <code>background-color<\/code> per creare diversi schemi di colore con l&#8217;effetto immutato:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/colour_variant1.jpg\" border=\"0\" \/><\/p>\n<p>Fig. 2: Lo stesso codice ma con <code>background-color: #0000a6;<\/code>.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Lo scontro con la realt\u00e0<\/h2>\n<p>Grande! Il design \u00e8 fico e possiamo tornare al pub a mostrare ancora una volta i nostri magnifici esperimenti e forse a dare fastidio agli altri ridacchiando sotto i baffi mentre raccontiamo uno scherzo su &#8220;World of Warcraft&#8221; in &#8220;The Big Bang Theory&#8221;. Giusto? Beh&#8230; Non proprio. Abbiamo un problema. Il design appare molto meno di grandioso in quasi tutti i vecchi browser e davvero terribile nei browser veramente vecchi. Cosa possiamo fare?<\/p>\n<p>Tanto per cominciare, per far s\u00ec che i browser trattino i nuovi elementi HTML5 in maniera appropriata, abbiamo bisogno di impostarli su <code>display: block;<\/code> nel nostro CSS:<\/p>\n<pre><code>hgroup, article, header, footer, section {\n  display: block;\n}<\/code><\/pre>\n<p>Poi, per far s\u00ec che IE ci permetta di assegnare uno stile a questi elementi HTML5 che non riconosce, dobbiamo creare delle istanze di questi ultimi nel DOM, in questo modo:<\/p>\n<pre><code>&lt;script&gt;\n  document.createElement('article');\n  document.createElement('section');\n  document.createElement('hgroup');\n  document.createElement('header'); \n  document.createElement('footer');\n&lt;\/script&gt;<\/code><\/pre>\n<p>Ecco come appaiono le cose in alcuni dei vecchi browser:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv1_ff3.jpg\" border=\"0\" alt=\"L'esempio come viene reso in Firefox 3.6\" \/><\/p>\n<p>Fig. 3: Firefox 3.6 su Windows: manca la maggior parte delle features, fatta eccezione per i web font e per la text shadow.<\/p>\n<\/div>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv1_saf4_win.jpg\" border=\"0\" alt=\"L'esempio come viene reso in Safari 4\" \/><\/p>\n<p>Fig. 4: Safari 4 su Windows: di nuovo, manca la maggior parte delle feature, fatta eccezione per i web font e le text-shadow.<\/p>\n<\/div>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv1_opera10.jpg\" border=\"0\" alt=\"L'esempio come viene reso in Opera 10.60\" \/><\/p>\n<p>Fig. 5: Opera 10.60 su Mac: tranne il gradiente, appare grazioso in Opera.<\/p>\n<\/div>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv1_ie9.jpg\" border=\"0\" alt=\"L'esempio come viene reso in IE9\" \/><\/p>\n<p>Fig. 6: IE 9: \u00e8 presente la maggior parte del nostro design, ma <code>text-shadow<\/code> non \u00e8 supportata e la box shadow \u00e8 strana.<\/p>\n<\/div>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv1_ie8.jpg\" border=\"0\" alt=\"L'esempio come viene reso in IE8\" \/><\/p>\n<p>Fig. 7: IE 6\u20138: manca quasi tutto, tranne i web font.<\/p>\n<\/div>\n<p>La scelta dei browser su cui fare dei test ovviamente pu\u00f2 variare a seconda del vostro target di utenti e di altri fattori.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Raccogliere i cocci<\/h2>\n<p>Qui mi preoccupo principalmente per IE, dato che la maggior parte degli altri browser viene aggiornata piuttosto regolarmente, mentre IE soffre della sindrome da &#8220;imprigionamento nelle vecchie versioni&#8221;.<\/p>\n<p>Data la situazione, la maniera pi\u00f9 affidabile per sistemare i problemi di compatibilit\u00e0 cross browser \u00e8 quella di usare JavaScript. S\u00ec, lo so: \u00e8 tutt&#8217;altro che ideale usare JavaScript per sistemare una mancanza di supporto dei CSS, dal momento che alcuni utenti potrebbero averlo disattivato e voi potreste scoprire che le vostre pagine hanno una latenza significativa come risultato dell&#8217;elaborazione di ulteriori bit. Ma io tendo a vederla in questo modo: se un utente naviga nel web con JavaScript disabilitato, la sua esperienza del web sar\u00e0 comunque piuttosto pessima, per cui la perdita di una parte degli effetti visivi non lo influenzer\u00e0 particolarmente. In termini di rallentamento delle pagine, dovrete valutarlo caso per caso.<\/p>\n<p>Se siete ansiosi, potete <a href=\"https:\/\/alistapart.github.io\/code-samples\/css3-bling-in-the-real-world\/examples\/blingv2.html\">testare adesso la versione aggiornata dell&#8217;esempio bling<\/a>. Vediamo come ci sono arrivato.<\/p>\n<h3>CSS3 Pie<\/h3>\n<p>Il piccolo aiutante che andiamo adesso a conoscere \u00e8 <a href=\"http:\/\/css3pie.com\/\">CSS3 pie<\/a>, una libreria JavaScript che aggiunge il supporto per <code>border-radius<\/code>, <code>box-shadow<\/code>, i gradienti ed i colori RGBa nelle vecchie versioni di IE.<\/p>\n<p>Leggete &#8220;<a href=\"http:\/\/css3pie.com\/documentation\/getting-started\/\">CSS3 Pie Getting Started<\/a>&#8221; per avere le istruzioni su come usarla. Per farla breve: scaricate CSS3 Pie, &#8220;unzippatela&#8221;, caricatela sul vostro web server e poi aggiungete la seguente dichiarazione a tutti gli insiemi di regole CSS che volete che CSS3 Pie renda compatibili con IE:<\/p>\n<pre><code>behavior: url(path\/to\/PIE.htc);<\/code><\/pre>\n<p>Dobbiamo inoltre usare una versione speciale con il prefisso <code>-pie-<\/code> per la propriet\u00e0 <code>background-image<\/code> che stiamo usando per applicare il gradiente CSS3 e cambiare quella particolare propriet\u00e0 in <code>background<\/code> al posto di <code>background-image<\/code>, dal momento che CSS3 Pie non supporta i valori normali ma solo quelli shorthand. Quindi, con la nuova aggiunta appare cos\u00ec:<\/p>\n<pre><code>-pie-background: linear-gradient(60deg, rgba(255,255,255,0),\n  rgba(255,255,255,0.2) 50%, rgba(255,255,255,0));<\/code><\/pre>\n<p>Le vecchie versioni di IE adesso rendono il design in questo modo:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv2_ie8_css3pie.jpg\" border=\"0\" \/><\/p>\n<p>Fig. 8: L&#8217;esempio visualizzato in IE8 con l&#8217;uso di CSS3 Pie per supportare le propriet\u00e0 CSS3.<\/p>\n<\/div>\n<p>Ci siamo quasi, ma cosa succede al colore di sfondo? La risposta che mi sono dato, dopo un po&#8217; di ricerche nei documenti di CSS3 Pie, \u00e8 che mentre CSS3 Pie permette ad IE di rendere i colori RGBa, non pu\u00f2 invece rendere il valore alpha. Al contrario, rende i canali RGB come completamente opachi. Utilizziamo la dichiarazione <code>background<\/code> per utilizzare colori solidi, non trasparenti, che IE pu\u00f2 leggere in maniera appropriata.<\/p>\n<p>Per capire quali colori usare, ho reso il mio &#8220;bling-esempio&#8221; in Opera con la <code>box-shadow<\/code> inset disabilitata e ho utilizzato l&#8217;utility &#8220;color picker&#8221; di Opera Dragonfly per scoprire quali colori c&#8217;erano ai bordi e a met\u00e0 del gradiente.<\/p>\n<table border=\"0\" cellspacing=\"0\">\n<tbody>\n<tr>\n<th scope=\"row\">Valore originale<\/th>\n<td>rgba(255,255,255,0) sopra a #a600a6<\/td>\n<td>rgba(255,255,255,0.2) sopra a #a600a6<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Valori aggiornati<\/th>\n<td>#a600a6<\/td>\n<td>#b630b6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Adesso che abbiamo questa informazione, possiamo aggiornare la riga del background di CSS3 Pie:<\/p>\n<pre><code>-pie-background: linear-gradient(60deg, #a600a6,#b630b6 50%, #a600a6);<\/code><\/pre>\n<p>Questo toglie alcuni di quei vantaggi di flessibilit\u00e0 di cui abbiamo parlato prima nella sezione &#8220;Opacit\u00e0&#8221;, ma ci d\u00e0 il seguente risultato in IE:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv2_ie8_css3pie_gradientfix.jpg\" border=\"0\" \/><\/p>\n<p>Fig. 9: L&#8217;esempio come viene visualizzato in IE8 con CSS3 Pie e con un trucco per il gradiente.<\/p>\n<\/div>\n<p>Molto meglio! Le uniche cose che mancano ora sono le <code>text-shadow<\/code> e la <code>box-shadow<\/code> inset, nessuna delle quali \u00e8 supportata da CSS3 Pie. Questo complica un po&#8217; la situazione, ma credo converrete con me che il risultato \u00e8 molto pi\u00f9 bello nelle vecchie versioni di IE.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Dove andiamo?<\/h2>\n<p>Al momento non ho una risposta per la questione della <code>box-shadow<\/code> inset: speriamo che CSS3 Pie migliori presto il suo range di propriet\u00e0 supportate. Per <code>text-shadow<\/code> c&#8217;\u00e8 una libreria chiamata<a href=\"http:\/\/fetchak.com\/ie-css3\/\">IE CSS3<\/a> che funziona in maniera molto simile a CSS3 Pie e che pu\u00f2 aggiungere un limitato supporto per la <code>text-shadow<\/code> in IE. L&#8217;ho aggiunta nel mio esempio finale:<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/08\/blingv2_ie_final.jpg\" border=\"0\" \/><\/p>\n<p>Fig. 10: L&#8217;esempio finale cos\u00ec come viene reso in IE8 con un supporto limitato per la text-shadow dato dalla libreria IE CSS3.<\/p>\n<\/div>\n<p>Come potete vedere, funziona solo sulla semplice text-shadow e non su multiple text-shadow: prendere o lasciare. Potreste anche considerare di falsificare l&#8217;ombreggiatura del testo usando i filtri di IE, ma verreste tacciati di impurit\u00e0 e sono funzioni proprietarie che potrebbero incidere ulteriormente sulla performance. Si veda <a href=\"http:\/\/dev.opera.com\/articles\/view\/cross-browser-box-shadows\/\">Cross browser box shadows<\/a> per un esempio riguardante i filtri di IE in azione.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Perch\u00e9 non usare semplicemente jQuery?<\/h2>\n<p>Questa \u00e8 una buona domanda: probabilmente si potrebbe ottenere la compatibilit\u00e0 cross-browser degli elementi CSS3 utilizzando una libreria JavaScript ed essere a posto cos\u00ec. Se ne avete le capacit\u00e0, provateci, ma credo che questa sia la strada pi\u00f9 semplice. Tutto quello che dovete fare qui \u00e8 aggiungere dei CSS modificati e dei link JavaScript: non dovete scrivere molto codice JavaScript. Questo lo rende un approccio pi\u00f9 puro e sicuramente pi\u00f9 accessibile a quelli tra noi che non sono molto bravi con gli script (come me). Pensate a questo come a un piccolo ripiego finch\u00e9 non dovremo pi\u00f9 supportare quei fastidiosi vecchi browser.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Conclusioni<\/h2>\n<p>Spero che abbiate trovato utile questa esplorazione. Se avete pi\u00f9 idee riguardo a come rendere le cose &#8220;blingtastic&#8221; funzionanti su tutti i browser, condividetele nei commenti!<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sono qui, sono strani, dovete farci l&#8217;abitudine! I CSS3 sono divertenti e fantastici e se progettiamo con in testa il progressive enhancemente, possiamo aggiungere qualsiasi magheggio CSS ai nostri siti web e alle nostre applicazioni senza doverci preoccupare di come le cose funzionino (oppure no) nei vecchi browser e sui device datati. Ma cosa succede se il nostro audience include gente che usa telefoni non-Webkit? E se i nostri clienti credono ancora che una pagina web debba apparire uguale su tutti i device? Impariamo come creare delle meraviglie CSS3 il pi\u00f9 cross-browser possibili.<\/p>\n","protected":false},"author":818,"featured_media":7000622,"comment_status":"open","ping_status":"open","template":"","categories":[244,46,275],"tags":[],"coauthors":[335],"class_list":["post-180","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-numero-32-2-agosto-2011","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/180","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=180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000622"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=180"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}