Come anticipato precedentemente, in questo articolo andremo ad analizzare alcune tra le più utili proprietà introdotte di recente nel CSS. Molte di queste nuove proprietà ci permettono di semplificare alcuni processi e layout che in passato richiedevano uno sviluppo più complesso o il supporto di JavaScript.
Dunque passiamo in analisi le singole proprietà.
Balance. Addio ai titoli giustificati “male”
La prima proprietà che andiamo ad analizzare è la seguente:
h1{
text-wrap: balance;
}Tramite questa proprietà il testo viene organizzato in modo ottimale su ciascuna riga, migliorando il layout e la leggibilità. Tuttavia, questa funzionalità è disponibile solo per blocchi di testo che si estendono su un numero limitato di righe, a causa della complessità computazionale coinvolta.
Nella praticità
L’impiego di questa nuova proprietà è molto utile nei titoli delle nostre pagine web; infatti capita molto spesso che i titoli (sia da desktop che da mobile) vadano a capo con una sola parola, mostrando visivamente un layout poco piacevole. L'attributo balance permette di bilanciare automaticamente le parole tra le righe, evitando (ad esempio) di lasciare una singola parola a capo.
Line-clamp. Niente più JavaScript per aggiungere i “…” nelle descrizioni
Altra proprietà molto utile, che trova largo impiego nelle descrizioni delle card o negli articoli:
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}La proprietà -webkit-line-clamp in CSS offre un modo per limitare il numero di righe di un blocco di testo. Tuttavia, è importante notare che questa funzionalità è attiva solo quando la proprietà display è impostata su -webkit-box o -webkit-inline-box, e quando la proprietà -webkit-box-orient è impostata su vertical.
Solitamente è consigliabile anche impostare la proprietà overflow su hidden, altrimenti il testo non verrà troncato ma verranno comunque visualizzati i puntini di sospensione dopo il numero di righe specificato.
Nella praticità
Quante volte abbiamo avuto necessità di limitare il numero di righe di una descrizione? Ora possiamo farlo direttamente con il CSS! L’uso più comune è nelle card degli ultimi articoli di un blog ad esempio, dove hai necessità di mantenere un numero massimo di righe nella descrizione di preview (e di aggiungere in fondi i 3 classici puntini di sospensione). Può essere utile anche in altri layout, dove hai necessità di mantenere un numero limitato di righe di testo.
:has(), la vera novità degli ultimi anni
Proprio così! Questa proprietà è la vera novità degli ultimi anni! Una grande limitazione CSS che ora diventa una potenzialità:
div:has(p) {
background-color:orange;
}Questa pseudo-classe permette di applicare degli stili se “la condizione specificata è vera”. Prendiamo come riferimento l’esempio sopra, in questo caso il colore di sfondo arancione verrà applicato a tutti i div che al suo interno contengono un tag p.
Nella praticità
Questa pseudo-classe può avere un larghissimo impiego su tantissimo fronti, e può semplificare notevolmente lo sviluppo, evitando di dover intervenire con JavaScript, per verificare determinate condizioni. Si può utilizzare per generare layout dinamici, nelle web app o anche banalmente per evidenziare degli elementi genitore in un form (ad esempio quando un input va in errore).
L’utilizzo di questa proprietà è infinito e per studiarlo nello specifico servirebbe un articolo dedicato. In questo caso ci limitiamo unicamente a scoprire le proprietà, senza andare nello specifico!
CSS si avvicina a SCSS? Struttura annidata
Da ora in avanti è possibile scrivere CSS annidando i tag, proprio come per SCSS:
article {
h1 {
color: orange;
}
p {
color: blue;
}
}Questo ci permette di semplificare il nostro foglio di stile rendendo più semplice, e semplificandone la lettura.
Possiamo abbandonare SCSS?
Assolutamente no! SCSS non si limita a poter scrivere le proprietà in questo modo, ma permette di fare molto altro; quindi, per il momento, rimane ancora valido e largamente utilizzato!
::marker, personalizziamo il nostro elenco puntato
Finalmente è possibile personalizzare l’icona delle nostre liste:
li::marker {
content: '♥️';
font-size: 20px;
}Se prima eravamo molto limitati nella personalizzazione dell’elemento della singola lista (tramite l’utilizzo dell’attributo list-style-type), ora possiamo inserire un qualsiasi elemento a piacere all’interno del content:’’ del ::marker.
È inoltre possibile andare a personalizzare solo il colore o la dimensione del :marker, mantenendo quindi il simbolo nativo:
li::marker {
color: orange;
font-size: 20px;
}Conclusione
Questo sono solo alcune delle innumerevoli proprietà introdotte di recente nel mondo CSS.
Per ulteriori approfondimenti, rimanete aggiornati suoi nostro prossimi articoli!
