5 trucchi CSS che forse non conoscevi

Dopo una lunga pausa eccoci tornati con una nuova serie di articoli e consigli made in Codelab. Stavolta parliamo di CSS! Quando si sviluppa frontend web ci sono delle situazioni che spesso ricorrono e dalle quali si può uscirne ricorrendo a stratagemmi davvero utili. Eccone alcuni, di cui fare tesoro.

1. Allineamento verticale

E’ uno degli evergreen dei CSS, qualcosa che ci servirà sempre e comunque: allineare un elemento al centro di un altro verticalmente.  Mentre sull’asse orizzontale è tutto abbastanza semplice, sul verticale qualche complicazione in più esiste, ma c’è un modo molto semplice per far fronte a questa situazione. Il trucco sta nel dare all’elemento contenitore gli stili:

display:table-cell;
vertical-align: middle;

così facendo l’elemento all’interno sarà sempre centrato verticalmente indipendentemente dalla sua altezza. La cosa importante è che il contenitore abbia una sua altezza definita. Per un esempio guardate il Plunker sotto.

 

2. Content counter

Supponiamo di voler mostrare per ogni paragrafo il suo indice sequenziale, potremmo pensare di usare una lista numerata, ma questo ci costringe a non poter inserire tra un paragrafo e l’altro elementi di altri tipo, questa chicca risolve brillantemente il problema:

quello che dobbiamo fare è inserire lo stile counter-increment(…) al selettore che identifica gli elementi che vogliamo contare specificando nelle parentesi un identificatore a piacere. Così facendo possiamo poi utilizzare  all’interno di content il valore counter(…) che si tradurrà nell’indice incrementale voluto. Esiste anche la possibilità di usare content-reset che come potete intuire, va ad azzerare il contatore in corrispondenza dell’elemento selezionato. Per maggiori informazioni su questa tecnica potete consultare questo utile riferimento.

 

3. Formattazione del capolettera

Problema semplice quanto comune: dare uno stile diverso alla prima lettera di ogni paragrafo per, ad esempio, farne un capolettera. Niente di più facile se utilizziamo la pseudo classe ::first-letter, che ci permetterà di assegnare delle proprietà CSS alla sola prima lettera del contenuto di un elemento, come nell’esempio che segue:

inoltre potete assegnare un particolare stile anche a tutta la prima linea usando come pseudoclasse ::first-line. Il CSS ha molti selettori di questo tipo, per una lista completa consultate questo utile link della W3C School.

 

4. Viewport Unit

Conoscere i vari tipi di unità di misura dei CSS è fondamentale. Per un buon sviluppo frontend bisogna saper combinare al meglio pixel, pt, em e percentuali. Ma esiste un’unità di misura non molto nota che in certi casi è davvero utile: stiamo parlando della viewport unit. Come dice il nome stesso è una unità che si riferisce al viewport del browser, per maggiori informazioni su cosa esso sia potete leggere il nostro articolo sul responsive web design. Semplificando, potremmo dire che è la dimensione della finestra del browser, quindi le viewport units sono in pratica delle percentuali rispetto a tale dimensione. Qualcuno potrebbe chiedersi perché stiamo parlando al plurale. Ebbene, a differenza delle altre unità di misura, le viewport unit sono due: vw per la larghezza e vh per l’altezza. Ad esempio 50vw corrisponde al 50% della larghezza del browser, mentre 100vh corrisponde al 100% dell’altezza di esso. Un caso in cui queste unità ci tornano molto utili è quando vogliamo che la home page del nostro sito si presenti con una grande immagine a tutto schermo che arriva fino alla fine della finestra. Per avere un’idea date un’occhiata al nostro nuovo sito di Mobicity che utilizza proprio questa tecnica!

5. Background cover

Inserire delle immagini di sfondo è sicuramente una delle prime cose che si impara quando si inizia a lavorare con i CSS. Ma anche in questo caso non si finisce mai di imparare! Per gestire il posizionamento dello sfondo esistono varie possibilità offerte dalle proprietà background-position e background-size. La prima definisce la posizione dell’immagine rispetto all’elemento a cui è applicata come sfondo, e può essere avvalorata con ad esempio i classici top/bottom/left/right/center oppure, oppure dando direttamente le coordinate in percentuale o in pixel. La seconda invece determina la dimensione che deve avere lo sfondo. Se infatti non conosciamo a priori le dimensioni dell’elemento, risulterà conseguenzialmente difficile assegnarle allo sfondo. Ma esiste anche qui la soluzione facile e indolore, basta applicare questa regola:

background-size: cover;

Così facendo andiamo ad istruire il browser di inserire lo sfondo in modo che tutto l’elemento venga coperto da esso, indipendentemente dalla sua dimensione, senza che si deformi l’immagine, e allo stesso tempo facendo in modo che si veda la maggiore porzione possibile di sfondo. Potete dare un’occhiata a questo esempio per capire meglio come funziona:

Conclusione

Il mondo dei CSS è vasto e variegato, esistono tanti modi per raggiungere lo stesso risultato, ma trovare quello più semplice ed elegante è una sfida nella sfida. Con questa carrellata abbiamo cercato di regalarvi qualche chicca che speriamo possa tornarvi utile, fateci sapere cosa ne pensate, o se avete delle vostre chicche da condividere saremo felici di conoscerle!

Stay Tuned!

 

 

 

5 trucchi CSS che forse non conoscevi ultima modifica: 2015-07-06T00:05:49+00:00 da Codelab Studio

One Comment

  1. 10 ottobre 2015 at 9:37

    La pseudo classe “first-letter” non la conoscevo, usavo metodi molto più complicati, Grazie!

Lascia un commento