Per inline CSS si intende l'inserimento diretto delle regole di stile nelle pagine HTML, all'interno dei tag style posizionati a loro volta tra i tag head, senza l'ausilio di uno style sheet esterno. L'utilizzo di questa tecnica potrebbe presentare dei vantaggi rilevanti per l'ottimizzazione, perché riduce il numero di file che dovranno essere caricati; si tratta però di una soluzione talmente valida da sconsigliare l'uso dei CSS esterni? (more...)

Continua a leggere Inline CSS Vs. fogli di stile esterni

Categoria: CSS

Tags: ,

Qualche giorno fa abbiamo parlato di come i framework non rappresentino sempre una buona soluzione per conciliare produttività, qualità del codice e prestazioni. I framework monolitici contengono spesso funzionalità non necessarie per le specificità di un progetto, mentre i micro-framework possono presentare delle lacune in termini di feature. Relativamente a CSS, è possibile proporre una soluzione Open Source come Blaze che cerca di risolvere tali problematiche con la modularità. (more...)

Continua a leggere Blaze CSS: tra Bootstrap e Skeleton

Categoria: CSS

FLA (Flex Layout Attribute) è un layout helper, si tratta sostanzialmente di una soluzione basata sulle specifiche CSS flexbox e concepita per disporre velocemente di shorthand flexbox tramite due attributi HTML: layout e self. Il progetto consente di effettuare rapide operazioni di prototipazione, per utilizzarlo è infatti sufficiente un browser Web, senza la necessità di ricorrere a codice CSS addizionale. (more...)

Continua a leggere FLA: un HTML helper per CSS3 flexbox

Categoria: CSS

Tags: ,

"CSS When/Else Rules" è il nome di una proposta per l'introduzione di nuove istruzioni condizionali nei fogli di stile. Si tratta di regole pensate in particolare per la gestione delle media query e delle support query, con l'intento di renderne più semplice l'adozione. (more...)

Continua a leggere When/Else in CSS: una proposta per nuove regole condizionali

Categoria: CSS

Dei vantaggi derivanti dall'uso degli icon fonts abbiamo già parlato in passato, il crescente utilizzo di dispositivi mobili non ha fatto altro che accrescere la necessità di soluzioni responsive per piccoli elementi grafici. Ecco una lista di 10 icon pack da utilizzare: (more...)

Continua a leggere 10 alternative per usare gli Icon Fonts

Categoria: CSS

Un nuovo attributo portato in dote da HTML5, il placeholder, offre la possibilità di inserire un valore predefinito in un campo input di un form. In questo modo l'utente otterrà un suggerimento iniziale sul potenziale contenuto da inserire nel campo. (more...)

Continua a leggere Formattare i placeholder con i CSS

Categoria: CSS

Tags: ,

Una proprietà abbastanza recente dei CSS e, purtroppo, ancora non pienamente supportata, permette di bypassare l'uso di Photoshop e affini per creare interessanti texture su testo ed immagini. La proprietà in questione è la mask-image e consente di applicare delle immagini a parziale o totale copertura di testi o altre foto, ricreando l'effetto maschera tipico degli editor grafici. (more...)

Continua a leggere Esempi creativi di texture con i CSS

Categoria: CSS

Tags: ,

Sono passati ormai più di 20 anni da quando Håkon Wium Lie, CTO di Opera Browser, pubblicò la bozza intitolata "Cascading HTML style sheets -- a proposal"; quello comparso sul sito Web del W3C il 10 ottobre 1994 era in pratica un documento in cui veniva descritto un primo schema dei fogli di stile applicabili alle pagine HTML, un pattern sulla base del quale proprietà come font family e window size potevano essere definite tramite apposite regole riguardanti la presentazione degli elementi di markup. (more...)

Continua a leggere 20 anni di CSS

Categoria: CSS

Tags:

Grid.css è un piccolo framework CSS utile per la creazione di un layout responsive a sei colonne. Per il suo funzionamento si avvale dei selettori di attributo in CSS e risulta compatibile con i browser più moderni (Chrome, Safari, Firefox, Opera, Explorer 9); inoltre, con l'aiuto di un fallback (per esempio Respond.js), potrà essere utilizzato anche con Explorer 8. La caratteristica principale di questo framework è la possibilità di scegliere come un elemento dovrà adattarsi (in maniera responsive) al display; infatti utilizzando l'attributo "data-grid" all'interno di un DIV è possibile scegliere se gli elementi posti sulla stessa riga devono occupare il minimo spazio disponibile restando allineati (data-grid="overflow") oppure andare a capo e occupare orizzontalmente l'intero display (data-grid="collapse"). Nel sito ufficiale è possibile provare (riducendo le dimensioni della finestra del browser) la comodità e la semplicità d'uso di questo framework. Fonte: Grid.css

Continua a leggere Grid.css: un piccolo framework responsive

Categoria: CSS

Analizzare un elemento che contiene un gradiente in CSS3, grazie agli strumenti per sviluppatore di Google Chrome, è un'operazione molto semplice. Ma se la nostra necessità è di ispezionare più sfumature che compongono un elemento, allora CSS Gradient Inspector può aiutarci. CSS Gradient Inspector aggiunge, tra gli strumenti per sviluppatore, la sidebar Gradient Inspector che mostrerà separatamente tutti i gradienti che compongono l'elemento in analisi. L'unico neo della versione attuale (0.1.2) è l'impossibilità di modificare i parametri che compongono l'elemento ispezionato. L'estensione può essere scaricata, sempre gratuitamente, dal Chrome Web Store: https://chrome.google.com/webstore/detail/css-gradient-inspector/blklpjonlhpakchaahdnkcjkfmccmdik

Continua a leggere Gradienti: ispezionarli con CSS Gradient Inspector

Categoria: CSS

Tags: