UnCSS è uno strumento utilizzabile liberamente e messo a disposizione degli sviluppatori sotto licenza MIT che permette di scovare e rimuovere regole CSS inutilizzate dai fogli di stile; si tratta di una soluzione particolarmente comoda da adottare in quanto essa è in grado di operare su più file e può essere impiegata anche per il CSS associato alle pagine Web attraverso JavaScript Injection. (more...)

Continua a leggere UnCSS per rimuovere CSS inutilizzato

Categoria: Software e Servizi

Tags: , ,

Alcuni layout o soluzioni più di dettaglio di pagine Web che siamo abituati a vedere quotidianamente, nascondono per il webdesigner, o comunque per chi ha l'onere di occuparsi dei file CSS, delle insidie e delle difficoltà molto difficili da superare. Sappiamo bene che la separazione fra stile e contenuto dovrebbe sempre essere la stella polare da seguire per il corretto dialogo fra HTML e CSS, ma per ottenere certi risultati è spesso necessario sporcare la sematica del markup. Philip Walton ci mostra un nuovo strumento per risolvere alcune di queste situazioni in modo semplice ed elegante. Nessun hack, nessun deus ex machina con JavaScript: la rassegna di problemi risolti proposta da Walton, da scaricare anche via GitHub, utilizza una proprietà CSS, o meglio un valore della proprietà "display" proposto dal W3C già da più di un anno: flexbox. Una volta attribuita a un elemento, il display "Flexbox" mette disposizione proprietà per la centratura e il posizionamento che diversamente ci darebbero molto filo da torcere. (more...)

Continua a leggere Risolvilo con Flexbox: il futuro dei CSS?

Categoria: Web Standards

Tags:

Le media query introdotte con i CSS3 possono rappresentare uno strumento straordinariamente efficace per indirizzare regole specifiche a dispositivi, tipi di schermo o contesti specifici. La loro applicazione può andare però ben al di là  di situazioni relative all'alternativa layout per il desktop/layout per il mobile come in questo articolo. Chris Coyer ci mostra un uso intelligente delle media query per creare una barra laterale che si auto-adatta nei contenuti e nell'aspetto grafico a seconda delle dimensioni che assume. Più facile osservare la demo, per capire, che provare a spiegare a parole, è sufficiente ridimensionare la finestra per vedere l'effetto in azione.

Continua a leggere Gestione dello spazio con le media query CSS

Categoria: CSS

Tags: ,

Ridimensionare un'immagine facendo ricorso ad HTML e ad attributi come width ed height non è magari una pratica da consigliare, ma ci sono situazioni in cui può essere necessario. A quel punto si pone il problema della qualità  della grafica così trattata, un problema che su IE (sul quale il degrado è particolarmente evidente nelle versioni 6/7) si può risolvere utilizzando nei CSS questa regola: img { -ms-interpolation-mode: bicubic; } Come si vede, non si fa che adottare, preceduto dal prefisso -ms-, uno dei tanti filtri proprietari di Microsoft. Se problemi analoghi si dovessero riscontrare su Firefox, Mozilla prevede invece l'uso della proprietà  image-rendering. Per aggiustare le cose su entrambi i browser la regola potrebbe essere così definita: img { image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */ -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */ } Il codice è ripreso da questa pagina del Mozilla Developer Center che spiega nei dettagli i termini della questione e tutte le possibili alternative.

Continua a leggere La qualità  delle immagini ridimensionate con HTML

Categoria: Grafica

Esperimenti come quello delle icone di iOS realizzate solo con i CSS hanno suscitato negli ultimi giorni un interessante dibattito all'insegna della domanda "CSS is the new Photoshop" (?). L'intervento di John Nack di Adobe è quello che va al cuore del problema perché punta l'attenzione sugli strumenti che usiamo e useremo per dare vita alle nostre idee creative. Louis Harboe ha creato le sue icone sfruttando semplici tool online per la generazione di codice CSS3, non avrebbe potuto ad oggi realizzarle usando programmi come Photoshop o Illustrator, semplicemente perché questi ultimi non sono in grado di coprire le esigenze di chi vuole creare elementi grafici di impatto abbinati ad un codice ricco e semantico. Una bella sfida per Adobe, non c'è che dire, complicata, perché, come dice Nack, nessuno è ancora riuscito a tirar fuori un software HTML WYSIWYG che possa anche solo avvicinarsi alla perfezione. E creare l'equivalente di un Illustrator o di un InDesign per HTML, Javascript e CSS? Sarebbe questa la panacea per i web designer di tutto il mondo? Jeffrey Zeldman sostiene che la cosa è impossibile da realizzare. Ma a me viene da chiedere: a prescindere dalla fattibilità , se ne sente davvero la mancanza?

Continua a leggere Sul modo in cui vorremmo realizzare le nostre pagine web

Categoria: Web Design

Tags: , ,

I Microformati rappresentano un eccellente tentativo di aggiungere semantica alle informazioni contenute in un documento web. Ciascuna informazione viene marcata in modo opportuno al fine di valorizzarne la semanticità  e i contenuti. Tra i vari Microformati spiccano sicuramente le hCard, che sono un modo per strutturare le informazioni personali (indirizzo, città , telefono, email, URL ecc.) contenute nei siti web. (more...)

Continua a leggere CSS e Microformat

Categoria: CSS

Tags: ,

Non si finisce mai di imparare. Avevo realizzato un test in cui mostravo l'utilizzo congiunto delle proprietà  CSS3 border-radius e box-shadow. Il codice era scritto in quest'ordine: border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; /* ...*/ (more...)

Continua a leggere Cascata e estensioni CSS dei browser

Categoria: CSS

Tags: , ,
di Kiko

àˆ una delle domande che sento più spesso chiedere ai novelli designer. Preoccupati, senza giusta causa, dal dover studiare nuove carte, dovrebbero piuttosto adottare un diverso atteggiamento rispetto a certe novità . Capita pure all'interno dell'università . Cosa cambia con CSS3 rispetto alla precedente versione? Così la risposta che ho preparato, limitatamente a certe attività  di disegno, e che recito a memoria è la seguente: più semplice gestione dei bordi degli elementi (proprietà  border-radius, con le varianti riferite a Mozilla e WebKit); buon rendering delle ombre degli elementi (box-shadow) e del testo (text-shadow); rendering di un gradiente (nelle due modalità  e cioè lineare o radiale); semplici trasformazioni di forme e elementi (rotazione, traslazione, riflessione, ridimensionamento); Ho dimenticato qualcosa, almeno a livello base?

Continua a leggere Cosa cambia davvero in CSS3?

Categoria: CSS

Tags:
di Kiko

Io ho usato questo espediente sulla dashboard di un sito sul mio tablet, esperimento certo rozzo ma estremamente efficace. Si tratta di una tastiera virtuale realizzata tramite HTML e CSS, col supporto di jQuery. Il codice per realizzare il tutto è ben documentato, mentre gli usi che si possono fare di un simile strumento sono svariati in termini di accessibilità  e usabilità , o come alternativa per le interfacce di tipo touch come nel mio esperimento.

Continua a leggere Tastiera virtuale con HTML, CSS e jQuery

Categoria: CSS

Reinhold Weber ha scritto un interessante articolo in cui spiega i benefici apportati dai CSS all'accessibilità  dei documenti web. Tra i consigli proposti per scrivere fogli di stile accessibili, spicca l'uso dei fogli di stile acustici. Il problema maggiore con questa soluzione è che questo tipo di CSS non è supportato quasi da nessuno degli screen reader più usati (ad eccezione di Orca per Linux). (more...)

Continua a leggere Perché gli screen reader non supportano i CSS acustici?

Categoria: CSS