CleanCSS è un sito che aiuta ad ottimizzare e/o riformattare i fogli di stile.
È abbastanza flessibile da poter essere usato sia durante lo sviluppo, penso alle funzioni di formattazione che comprendono anche degli editing come ad es. il riordinamento delle properties; sia nel deployment, con le funzioni di “miniaturizzazione” del css.
Per la serie “I medici sono i peggiori pazienti” (visto che il foglio di stile è tutto fuorché ordinato) segnalo l’articolo di Friendly Bit “How to structure large CSS files” che dà qualche consiglio su come dare struttura ai CSS.
A mio parere, l’indentazione non serve a molto, preferisco allineare i valori dei selector; cosa che non fa nessuno e quindi forse sbaglio io!! :-D Mentre sull’uso dei selector completi mi lascia un po’ perplesso ma lo userei comunque.
Eliminata l’indentazione rimangono quattro regole:
Una segnalazione per due utility molto carine.
La prima è viewS, un bookmarklet per visualizzare il sorgente di una pagina html. Non certo una novità sconvolgente ma è ben fatto e indipendente dal browser.
La seconda è browsershots.org, un sito che visualizza uno screenshot di una pagina html con vari browser.
Post riassuntivo sulle nuove features nel WebKit.
La prima mi lascia perplesso: “Enhanced Rich Text Editing”. Sì, è vero, adesso posso usare l’editor di WordPress in modo più umano, il “piccolo” problema è che i paragrafi vengono mangiati ad ogni submit. Non molto utile…
Per il resto direi che ci siamo: prestazioni aumentate, supporto per SVG, XPath, CSS3 e i tool di sviluppo
Attraverso 465 Berea Street apprendo che dai creatori di XRAY arriva una nuova utility da aggiungere alla propria borsa degli attrezzi, MRI. Si tratta di un bookmarklet che evidenzia tutti gli elementi individuati da un selector.
Dal sempre ottimo 456 Berea Street, un articolo che spiega come usare CSS+JavaScript per usare lo spazio disponibile nei campi di testo per inserire il testo che andrebbe nelle etichette, quando queste ultime non possono essere usate; tipicamente per problemi di spazio.
L’idea è quella di rendere le label invisibili spostandole con i CSS e inserire il testo nei campi con uno script, cancellandolo quando il focus è attivo.
Tempo fa segnalavo la possibilità di usare delle classi CSS per evidenziare le sezioni di una pagina in fase di sviluppo. Allo stesso modo, possiamo usare quello che Eric Meyer chiama styling diagnostico, per evidenziare errori e sviste nell’HTML.
Un’ulteriore estensione consiste nell’evidenziare gli elementi dell’HTML ormai deprecati, come descritto in questo post su 456 Berea St. e segnalato anche da Laburno.
Dalla versione r26183, Safari supporta il download delle font, attraverso il selector @font-face. Ecco un esempio:
@font-face {
font-family: "Abandoned Bitplane";
src: url(http://www.princexml.com/fonts/larabie/abandone.ttf) format("truetype");
}
Semplice, no? E il risultato è abbastanza eloquente. Ecco il rendering di Safari r26183:
rispetto alla versione standard:
(Gli screenshot sono tratti dagli esempi di questo articolo su A List Apart).
Ovviamente, il fatto che le font siano liberamente scaricabili pone degli ovvi problemi, di licenza e di uso improprio delle font; sia perché il web designer medio non ha conoscenze tipografiche sufficienti per selezionare adeguatamente le font da usare, sia perché è difficile trovare delle font gratis di qualità .
A volte è necessario controllare l’allineamento verticale di blocchi indipendenti e, come molti sanno, il problema non è di facile soluzione facendo ricorso semplicemente ai CSS.
In questo post, viene proposta una soluzione che fa uso di Javascript, attraverso l’uso di YUI.
Per quanto non mi entusiasmi l’idea di usare lo scripting per risolvere i problemi di layout, a volte non ci sono alternative, soprattutto quando si devono posizionare le inserzioni pubblicitarie.
L’attività nei tool per il design con i css continua. Adesso è il turno di un pezzo da 90, Eric Meyer, che ha curato il rilascio di CSS Sculptor, un’estensione per DreamWeaver che semplifica drasticamente la creazione della griglia di base della pagina; il tutto, ovviamente, a colpi di selector… ;-)
