9 trucchi CSS utili per il 2017

Siamo alla fine di un nuovo anno e prima di lasciarcelo alle spalle mi sono messo in testa di fare alcune raccolte dei migliori trucchi che permettono allo sviluppatore frontend di ottenere velocemente dei risultati senza dover diventare troppo matto alla ricerca di soluzioni su Internet.

Capisco che a prima vista il numero 9 può sembrare troppo poco per un linguaggio interessante come i CSS, ma ad essere onesto ritengo questa una raccolta di trucchi essenziali che si devono conoscere se vogliamo iniziare bene il nuovo anno.

Non la prendere come una lista esaustiva e completa perché se sei nel mondo dello sviluppo web da un po’ di tempo ormai dovresti  sapere da solo che non esiste niente di “definitivo”. Personalmente spendo molto tempo a guardarmi intorno cercando nuove soluzioni e devo ammettere che quelle che troverai qua dentro sono alcuni tra i consigli più utili che ho trovato.

Non perdiamoci quindi troppo in chiacchiere e iniziamo subito con questa lista di consigli CSS 😉

Usa i CSS per calcolare con calc()

Una delle cose che mi sono sempre piaciute dei preprocessori e che mi hanno spinto a creare anche il corso dedicato a Sass sono sicuramente le funzioni e mixin che ci aiutano a velocizzare il lavoro, ma la cosa ancora più interessante è la possibilità di eseguire i calcoli matematici.

Per esempio, posso creare una dimensione di base per i miei font e incrementarli di 4px a ogni livello titolo che inserisco, con questo semplice blocco di codice:

$font-base: 16px;

p{ font-size: $font-base; }
h6{ font-size: $font-base + 4px; }
h5{ font-size: $font-base + 8px; }
h4{ font-size: $font-base + 12px; }
h3{ font-size: $font-base + 16px; }
h2{ font-size: $font-base + 20px; }
h1{ font-size: $font-base + 24px; }

Se stai pensando: Andrea avresti potuto creare una funzione o un mixin per facilitarti nella realizzazione di questo effetto ti faccio i miei complimenti perché significa che conosci questo preprocessore! Però il mio obiettivo non è quello di mostrarti quanto sia bello Sass, piuttosto voglio presentarti la possibilità di eseguire dei calcoli all’interno dei tuoi CSS.

Sì, anche nei tuoi CSS è possibile fare calcoli matematici. Vuoi scoprire come?

Ebbene la cosa è veramente semplice e come mostra la tabella di CanIUse è compatibile con tutti i browser moderni! Tutto quello che bisogna fare è utilizzare il valore calc().

Grazie a questa nuovo valore è possibile fare delle cose che non sono possibili neanche con Sass, questo perché come dice il nome stesso un preprocessore avviene prima che il CSS venga letto e calcolato dal browser. Questa è una differenza molto importante da tenere in considerazione perché i calcoli che puoi fare all’interno dei CSS ti permettono di mescolare diverse unità di misura, come per esempio mescolare le percentuali con i pixel.

Probabilmente quest’ultima espressione ti ha confuso, facciamo chiarezza.

Se hai già esperienza con la creazione di sistemi a griglia per le tue pagine web, sai già che calcolare le percentuali non è un compito facile perché oltre alle larghezze per le colonne dobbiamo tenere a mente anche quelle per margini e padding. Molto spesso questo porta rompicapi nella definizione dei nostri layout!

Basta guardare una delle decine di griglie disponibili online per capire che trovare le dimensioni adeguate è veramente difficile.

Altro esempio potrebbe riguardare la possibilità di creare un contenitore responsive, ma impostare i suoi margini e padding con una dimensione fissa. Diciamo qualcosa del genere:

.wrap{
  width: 100%;
  margin: 0 20px;
}

Quanto ho appena scritto è completamente sbagliato perché non posso aggiungere un margine a un elemento che già occupa il 100% della pagina, molto meglio fare un esperimento con calc() utilizzando la seguente sintassi.

.container{
  width: calc( 100% - 40px);
  margin: 0 20px;
}

Ecco fatto, adesso abbiamo creato un contenitore che si adatta alle dimensioni della finestra ma che, al posto di occupare il 100% dello spazio disponibile, il suo spazio verrà calcolato direttamente dal browser sottraendo i 40px necessari per il margine laterale.

Se vuoi consultare un esempio dal vivo puoi studiare questo pen.

Sfrutta la variabile speciale currentColor

Eccoci di fronte a un nuovo aggiornamento presente all’interno dei nostri CSS, ma che sono sicuro conoscono in pochi.

Prima abbiamo parlato di Sass e se lo conosci sai sicuramente che una delle sue caratteristiche più amate è sempre stata la possibilità di creare variabili all’interno dei nostri CSS. Questo ci ha permesso di tenere a mente un nome specifico al posto degli strani valori (come per esempio codici esadecimali o complessi nomi font).

Al giorno d’oggi i CSS hanno già colmato questo gap, ma la feature che ti voglio presentare è un’altra. Una variabile speciale che ci aiuta a velocizzare ulteriormente il nostro lavoro perché andrà a sfruttare il valore del colore impostato per il contenitore.

Nell’esempio che sto utilizzando qua sopra, il colore del testo è impostato a un rosso pieno, per quanto sia brutto da vedere mi permette di farti capire il funzionamento della variabile currentColor che viene utilizzato per dare colore al bordo inferiore.

Se andiamo a studiare il codice utilizzato nell’esempio scopriamo che il CSS che permette di creare il bordo è il seguente:

.container p{
  padding-bottom: 10px;
  border-bottom: 3px solid currentColor;
}

In questo contesto currentColor viene ereditato dal valore che ha la proprietà color nel contenitore .container.

Conta automaticamente i tuoi elementi grazie ai counter CSS

Sono sicuro che tu conosci già molto bene l’elemento <ol> che permette di creare delle liste numerate, ma quello che ti voglio presentare in questa sezione è leggermente diverso. Infatti voglio parlarti di come potrai utilizzare i tuoi CSS per contare qualsiasi elemento, indipendentemente dal tipo.

Ti consiglio questa funzionalità CSS perché molto spesso siamo costretti a utilizzare elementi <ol> per avere una lista numerata e questo può rappresentare un limite sia nella semantica sia nello stile del nostro HTML. Per fortuna nostra, questo non è più un obbligo e siamo in grado di scatenare la nostra fantasia!

L’esempio che ti ho appena inserito è molto classico e permette di capire velocemente che cosa è possibile fare con questa nuova proprietà. Se provi a ispezionare il codice utilizzato noterai che nel mio HTML non c’è traccia dei numeri utilizzati e che grazie allo pseudo-elemento ::before posiziono il numero prima del suo contenitore e lo personalizzo come meglio credo.

Ecco il codice che rende tutto questo possibile:

.container{
  counter-reset: cont;
}

.counted::before{
  counter-increment: cont;
  content: counter( cont );
}

Come puoi notare tu stesso il CSS che ci permette di dare vita a questo effetto è incredibilmente semplice, tutto quello che dobbiamo fare è dichiarare il nome del nostro contatore con la proprietà counter-reset all’interno dell’elemento contenitore e successivamente richiamarlo all’interno dell’elemento dove vogliamo far incrementare il suo valore attraverso la proprietà counter-increment.

La cosa più bella di tutte è che contare i nostri elementi con queste proprietà possiamo personalizzarli come meglio crediamo andando ad aggiungere degli stile a elementi che neanche esistono.

Personalizza la decorazione del testo

Al giorno d’oggi dovremmo sapere tutti che la text-decoration di un link è rappresentata da una classica sottolineatura e molto spesso se vogliamo toglierla l’unica nostra possibilità è quella di impostare il valore none a questa proprietà.

Altri valori sono possibili, ma generalmente non sono molto conosciuti…

Non ti sto dicendo niente di nuovo, perché in fin dei  conti questi “nuovi” stili sono già attivi in tutte le pagine web, ma sai come usarli a tuo piacimento? Anche io fino a poco tempo fa non avevo idea di come poterli sfruttare a pieno, quindi non ti sentire in colpa se non fosse così. Ecco qualche blocco di codice sul quale riflettere:

span.wave{
  text-decoration: underline wavy;
}

span.colored{
  text-decoration: overline red;
}

span.error{
  text-decoration: line-through black;
}

span.dashed{
  text-decoration-style: dashed;
}

span.both{
  text-decoration: underline overline dotted green;
}

Questa è soltanto una piccola raccolta di quello che puoi realizzare, ma spero allo stesso tempo che queste impostazioni ti aiutino a comprendere la potenzialità di questa proprietà. Come dicevo prima, molto spesso siamo abituati agli stili applicati alle nostre ancore, ma non siamo obbligati a rispettare questo standard, infatti nel codice che ti ho appena mostrato ci sono soltanto elementi <span>!

Le proprietà che ci permettono di fare queste personalizzazioni sono la comune text-decoration (che funziona come scorciatoia per applicare più stili) e la text-decoration-style che invece ci permette di personalizzare nello specifico come una determinata decorazione viene applicata al nostro testo.

Ti consiglio di consultare la pagina su MDN che ti permetterà di specificare nel dettaglio tutti gli stili e di scoprire quelli che ancora non conosci.

Riconosci un file dalla sua estensione

Dare al proprio visitatore un feedback visivo è sempre una buona cosa, soprattutto quando gli proproniamo di scaricare qualcosa. Negli anni ho visto molte personalizzazioni che permettevano di visualizzare un’icona del tipo di file che sarebbe stato scaricato e purtroppo mi è capitato spesso di trovare elementi HTML, come <img>, che andavano soltanto ad appesantire e a rendere più confuso il codice della pagina.

Non mi fraintendere, gli elementi immagine sono ottimi elementi che si devono utilizzare quando inseriamo un’immagine all’interno del nostro sito, però allo stesso tempo devono essere utilizzati soltanto quando necessario. Aggiungere questi elementi all’interno di un link testuale non porta alcun beneficio, anche se realizzare un effetto come il seguente può essere di grande aiuto.

Ispezionando il codice puoi scoprire facilmente come è stato realizzato questo effetto. Praticamente ho preso lo pseudo-elemento ::after e ho inserito al suo interno della proprietà content la URL all’icona che ho scelto per rappresentare il tipo di file.

Questa sicuramente è una tecnica che conosci, soprattutto se hai già letto il nostro recente articolo, ma una delle cose più interessanti è il selettore utilizzato.

Se ti sei messo a studiare il codice CSS, quello che sto utilizzando è l’attribute selector che mi permette di identificare l’attributo che sto cercando (in questo caso href) e soprattutto utilizzo il carattere speciale $ che mi permette di dire al mio CSS di selezionare soltanto il file che termina con una determinata estensione.

Andare a scovare il tipo di file in base alla sua estensione nell’attributo href permette di creare una regola che applicherà lo stile in modo del tutto automatico. Nessuna classe, nessun elemento aggiuntivo… Tutto quello che bisogna fare è sfruttare la nostra intelligenza e la potenza dei CSS e tutto avverrà in modo automatico.

Usa il selettore :not() per evitare alcune situazioni

Eccoci di fronte a un nuovo selettore che personalmente ritengo incredibilimente interessante perché ci offre la possibilità di negare una certa condizione e di andare a selezionare il suo opposto.

Ormai non dovrebbe più essere un segreto, stiamo lavorando al lancio del restyle di questo sito e ti confesso che questo selettore CSS mi è stato incredibilmente utile! Come puoi notare dal design che abbiamo condiviso, la homepage che abbiamo disegnato è molto diversa dalle altre pagine del sito e in alcuni casi volevo applicare degli stili su tutte le pagine del sito tranne modificare gli elementi presenti nella homepage.

Utilizzando WordPress sono a conoscenza della possibilità, fornita dalla funzione body_class(), di avere una serie di classi applicate al body della pagina che permettono di distinguere una determinata pagina dalle altre. Forte di questa possibilità avrei potuto creare un selettore che elencasse tutte le classi per le quali volevo applicare il mio stile, ma questo sarebbe stato un grande problema visto che mi sarei ritrovato molti selettori e che probabilmente sarei dovuto andare a modificarli nel tempo.

Dato che sapevo che volevo applicare lo stile a tutte le pagine che non contenessero la classe .home, che WordPress aggiunge soltanto nella pagina principale del sito web, ho risolto questo problema con il seguente selettore:

body:not(.home) .container{
  //Mio codice CSS
}

Praticamente lo stile dichiarato all’interno delle parentesi graffe si sarebbe applicato a tutte le pagine che non contengono la classe .home all’elemento body. Grazie a questo possiamo evitare di scrivere una lunga lista di selettori per i quali vogliamo applicare le nostre regole e specificare soltanto quando uno specifico selettore, nel nostro esempio una classe, non è presente.

:not() sta vivendo una seconda rinascita perché all’interno del documento che descrive i selettori di quarta generazione i suoi utilizzi vengono ampliati, ma dato che la compatibilità di queste nuove caratteristiche è ancora molto bassa nei browser moderni al momento ti suggerisco di utilizzarlo soltanto come descritto qua sopra.

Il collasso dei margini verticali

Stiamo raggiungendo la fine di questo articolo e per questo motivo ritengo opportuno iniziare a trattare degli aspetti un po’ più leggeri. In questa sezione ti voglio parlare di una caratteristica che è presente nei CSS fin dai suoi primi anni ma che ritengo comunque importante citare perché in alcuni casi può dare risultati inaspettati.

Detta in parole povere, i margini verticali che imposti ai tuoi elementi collassano l’un l’altro.

Questo vuol dire che se hai due elementi disposti uno sotto all’altro e al primo imposti un margin-bottom di 20px e al secondo un margin-top di 30px, la distanza tra i due non sarà di 50px ma soltanto di 30px.

.one{
  margin-bottom: 20px;
}

.two{
  margin-top: 30px; /* Questa e' la distanza applicata */
}

Questo succede perché i margini verticali degli elementi collassano l’un l’altro e i nostri browser vanno ad applicare soltanto la misura più grande.

Per quanto questa caratteristica possa sembrare banale e di facile soluzione, ti consiglio di tenerla sempre a mente quando lavori perché molto spesso ti permetterà di salvare un bel po’ di tempo e di utilizzare al meglio il tuo codice.

Padroneggia il box model grazie al box-sizing

Quante volte ti è successo di avere un elemento all’interno di un layout che misura 300px e presenta 20px di padding? Forse le misure non sono le stesse ma sono sicuro che una situazione del genere è molto comune, anche perché avere del testo attaccato al bordo del contenitore è proprio brutto 🙂

Partendo da queste considerazioni molto probabilmente hai scritto un codice molto simile al seguente:

.item{
  padding: 20px;
  width: 300px;
}

Consultando però le dimensioni calcolate dal tuo browser ti sarai accorto che il tuo elemento ha una larghezza di 340px! Questo può non sembrare un grande problema, ma ti assicuro che quando vogliamo realizzare dei layout con i float è una grande sorgente di rompicapi.

Soprattutto, perché succede questo?

Ebbene succede perchè i nostri browser impostano la larghezza dichiarata nel CSS al contenuto presente in un elemento e non considerano successivamente la grandezza del padding o dei bordi applicati. Controllando con gli strumenti di Firefox si nota che un elemento viene misurato in questo modo:

Da questa immagine si nota che, in azzurro, viene specificata la larghezza del nostro elemento (300px) ma che a questa viene aggiunta la spaziatura interna (il nostro padding) che aumenta la misura di 20px per ogni lato, e questo senza neanche calcolare lo spessore di un bordo perché altrimenti avremmo dovuto tenere in considerazione anche quella. L’unica misura che non si aggiunge alla larghezza del nostro elemento è quella data dai margini perché sono delle misure che si applicano all’esterno.

Per risolvere questa situazione tutto quello che devi fare è aggiungere la seguente proprietà al tuo elemento:

.item{
  box-sizing: border-box;
}

Impostando la proprietà box-sizing al valore border-box stai dicendo al browser che non deve aggiungere alla larghezza il valore del padding e dei bordi, ma che dovrà farli contenere all’interno della larghezza che hai impostato per il tuo elemento.

Per vedere il risultato di questa operazione ti lascio il seguente esempio che ho rubato a mani basse da CodePen:

Clicca sui bottoni content-box (il valore di default di box-sizing) e border-box per vedere la differenza e scoprire meglio l’utilità di questa singola proprietà.

Impara ad utilizzare ::before e ::after

Abbiamo già parlato dell’importanza degli pseudo-elementi e come questi ti potranno aiutare ad aggiungere degli stili alle tue pagine senza dover creare nuovi elementi HTML.

Non voglio presentarti alcuna tecnica in particolare in quest’ultima sezione ma semplicemente ricordarti che grazie a questi sarai in grado di personalizzare moltissimo le tue pagine aggiungendo ombre, elementi e moltissimi altri stili utilizzando soltanto del codice CSS!

Questa è sicuramente una delle caratteristiche più interessanti dei CSS che è in grado di estendere incredibilmente le loro possibilità. Resta connesso e non perderti i futuri articoli, ci saranno molti aspetti che andremo ad approfondire su questo linguaggio in modo da aiutarti a diventare uno sviluppatore frontend professionista!

Nel frattempo, se ti sono piaciuti questi suggerimenti o hai altri da suggerire hai due opzioni.

Nel primo caso ti chiedo di condividere l’articolo con i tuoi amici e colleghi mentre nel secondo non devi far altro che utilizzare la sezione dei commenti che trovi qua in basso.