Ultime dal Blog

Importa CSS con SASS

Le Magie dell’Importazione con SASS

Importare dei file con i CSS è sempre stato un problema, la soluzione sembra semplice ma allo stesso tempo si rischia di generare un grosso numero di richieste HTTP che rallentano inevitabilmente il sito.

In questa lezione andremo a scoprire come SASS ha rivoluzionato il classico concetto della proprietà @import per creare qualcosa di veramente utile e allo stesso tempo semplice.

Non è assolutamente un segreto che ridurre il numero di richieste HTTP può migliorare incredibilmente le prestazioni del proprio sito. Le stesse immagini che tutti noi inseriamo all’interno del codice CSS è una richiesta HTTP che stiamo facendo al server; in breve, anche se da codice CSS, stiamo dicendo al browser qualcosa come: mi prendi l’immagine xyz.png che devo mostrarla nella pagina?

Di per sé le richieste HTTP non sono niente di male e, anzi, ci permettono proprio di avere il web come lo conosciamo oggi; purtroppo un alto numero di queste comporta dei rallentamenti perché ciascuna connessione perde del tempo per capire dove si trova un file.

Finché utilizziamo un paio di immagini non ci sono problemi, i nostri server possono rispondere bene ad un paio di richieste HTTP e il nostro visitatore non noterà neanche i rallentamenti (dato che si misurano in ms, tendenzialmente poche centinaia); ma se all’interno del nostro CSS sono presenti diverse centinaia di immagini, capisci bene da solo che in questo contesto stiamo parlando di decine di secondi spesi inutilmente.

Leggi Tutto

Variabili, Funzioni e Mixin in SASS

Variabili, Funzioni e Mixin con SASS

Sapere come utilizzare SASS per i nuovi selettori o per usare una nuova, più semplice, sintassi è sicuramente utile. Ma è soltanto quando inizierai ad utilizzare i concetti che ti verranno presentati in questa lezione che scoprirai veramente quanto è potente questo linguaggio.

Lo so, ho appena usato delle parole veramente forti che fanno tanto fine del mondo ma, piuttosto, io parlerei più volentieri di una riscoperta del piacere di scrivere CSS.

Non sto vaneggiando, sono sicuro che è capitato anche a te chiedere al CSS di poter fare qualcosa in più. Se già conosci altri linguaggi di programmazione sai benissimo che esistono delle strutture fondamentali che i fogli di stile non hanno ancora preso in considerazione.

Fin troppe volte ho chiesto al CSS di poter salvare un valore da poter richiamare successivamente, non c’è niente di male nel ricordarsi il colore #34AF65 oppure di cercare l’elemento in cui questo è stato impostato. Ma sarebbe molto più bello se potessi dire giallo e il mio CSS sa che ogni volta che uso questa parola chiave dovrà richiamare la tonalità di colore che ho salvato al suo interno.

Voglio dire, soltanto per questa cosa le macchine tornano a lavorare per noi esseri umani (fa un po’ Matrix ;)), creare una variabile ci permette infatti di creare una parola chiave ed assegnare al suo interno un qualsiasi tipo di valore. Questo il CSS non ci permette di farlo, ma per fortuna nostra SASS si!

Leggi Tutto

Nesting e Selettori in SASS

Nesting e Selettori in SASS

Finite le introduzioni con la scorsa lezione oggi è giunto il momento di iniziare a trattare gli argomenti più divertenti. Con questa lezione verrai a conoscenza di due interessanti caratteristiche di SASS: Nesting e i Selettori.

Se ti stai approcciando a questa lezione con il pensiero fisso “Che paxxe, io conosco già i selettori CSS!” ti chiedo di ammazzare immediatamente questa idea. Questo perché all’interno di SASS anche i selettori hanno avuto un notevole miglioramento che punta soltanto a velocizzare e semplificare il tuo lavoro.

Cerchiamo intanto di capire che cosa si nasconde dietro al termine Nesting. Questa parola, che tradotta direttamente dall’inglese significa annidamento (un termine orribile da utilizzare in Italiano) è una funzionalità molto utile da conoscere perché, grazie a questa tecnica, potrai risparmiarti la fatica di scrivere centinaia di inutili caratteri!

Leggi Tutto

Riconosci il Browser con i CSS

Riconosci il Browser con i CSS

Riuscire a riconoscere il browser utilizzato non è mai stato un compito semplice, tempo fa abbiamo parlato della libreria Modernizr ma oggi voglio mostrarti alcune soluzioni per riconoscere un browser direttamente dal codice CSS.  

Speravi che con la morte di IE6-7 non ci fosse più bisogno di hack css vero?

Purtroppo non è così…

Millemila Browser

Con il mobile si sono creati nuovi problemi per gli sviluppatori, versioni di WebKit differenti (da Android a iOS) che presentano implementazioni differenti per alcune cose dagli input type supportati al motore JS usato, oppure comportamenti diversi tra Chrome e Firefox.

PS: Non dimentichiamoci di Internet Explorer Mobile!

Leggi Tutto

Che Cosa è SASS?

Che Cosa è SASS

Benvenuto alla prima lezione di questa nuova serie. All'interno di questa potrai conoscere da vicino il linguaggio SASS, valutarne le sue potenzialità e sperimentare con esempi dal vivo tutto il suo potenziale! Cosa aspetti? Continua a leggere!  

Molto probabilmente hai già notato che all’interno di questo sito sono sempre stato un grande appassionato di LESS.js, sia su questo che su Udemy ho pubblicato diversi articoli e guide che ti invitano ad utilizzare questo preprocessor. Il motivo per il quale adesso mi trovi a scrivere articoli che parlano di SASS non è tanto perché è calata la mia passione verso il primo ma piuttosto perché, ad oggi, la semplicità e la potenza di quest’ultimo mi hanno fatto ricredere.

Sono sempre stato un grande fan di LESS.js sopratutto per la sua semplicità di utilizzo. In fin dei conti bastava caricare un file JavaScript ed eravamo pronti a programmare senza troppi problemi mentre con SASS inizialmente richiedeva diverse conoscenze. Per prima cosa dovevi avere sia Ruby che RVM installati sul tuo sistema (cosa non molto semplice sopratutto se utilizzi Windows).

Adesso, grazie anche alle applicazioni che a breve andremo a scoprire, utilizzare questo preprocessor è una cosa veramente semplice e non richiede alcune conoscenze particolari; fintanto che sei in grado di installare una applicazione sul tuo sistema sei a cavallo!

Leggi Tutto

Organizza il Contenuto in HTML5

Come Organizzare il Contenuto in HTML5

Eccoci di nuovo qui ed oggi parleremo di come strutturare HTML5 per il tuo contenuto! Non c'è bisogno di sottolineare che il contenuto è la parte più importante di un sito, specialmente adesso che i motori di ricerca diventano sempre più esigenti e dove i competitor abbondano e non vedono l'ora di farti mangiare la polvere.

Quindi quello che vedremo oggi è solo un supporto tecnico a quello che dovrai fare tu per rendere interessante il tuo sito questo, per quanto riguarda strategie di marketing ed altro dovrai (per il momento) lavorarci da solo!

Leggi Tutto