Uno dei cambiamenti più significativi nel design web è stata la separazione tra stile e contenuto. CSS – che sta per Cascading Style Sheet – rappresenta il lato stile di questa separazione, ed è andato molto avanti da quei primi giorni, e ora può quindi offrire trucchi e scorciatoie per diventarne esperti facilmente.
Naturalmente, ci sono molti trucchi avanzati di CSS utili da imparare, dalle basi a cose un po’ più avanzate. Come molte cose nella vita, l’esperienza con CSS rende il processo di progettazione web più veloce e fluido. Un designer di talento sarà in grado di lavorare attraverso un problema di design, ma un designer esperto non avrà bisogno di lavorare sul problema perché probabilmente lo avrà già incontrato prima.
Non possiamo fornirti esperienza, ovviamente, ma possiamo condividere alcuni dei frutti dell’esperienza per aiutarti a risolvere alcuni dei problemi di CSS che probabilmente incontrerai.
Perché il CSS è importante?
Il CSS è un aspetto fondamentale dello sviluppo web per dell’accessibilità. Se l’accessibilità non fosse un problema, il modo più semplice per creare una pagina web di bell’aspetto sarebbe creare l’intero design in un pacchetto di modifica grafica e utilizzare l’immagine invece di codificare file HTML e CSS. Ma cosa intendiamo con accessibilità?
Sebbene abbia usi più ampi, l’accessibilità significa essenzialmente che un sito web funzionerà bene con strumenti e tecnologie che aiutano le persone con disabilità – come l’ipovisione – a navigare i contenuti del sito. La chiave per raggiungere questa accessibilità è garantire che una pagina web “degrade con grazia”.
Degrade con grazia significa che se per qualsiasi motivo ci sono problemi nel caricamento del sito web, il contenuto del sito sarà comunque presente e accessibile. Tali problemi potrebbero essere immagini temporaneamente inaccessibili, browser più vecchi che non supportano tutte le funzionalità che il sito web utilizza o qualsiasi altra cosa che interferirebbe con il modo in cui la pagina viene renderizzata.
Qui entra in gioco il CSS. Con il design web accessibile, tutti i contenuti sono memorizzati nel codice HTML, mentre tutti gli stili sono contenuti nei file CSS. Nel peggiore dei casi, un utente – sia esso una persona, un bot o un software di accessibilità – sarà in grado di accedere al testo e alle immagini sulla pagina.
Ora, passiamo a quei trucchi avanzati di CSS che devi conoscere.
Layout di tabella fisso
Le tabelle sono incredibilmente utili per visualizzare una varietà di dati, e anche per certe situazioni di formattazione (anche se non dovresti usare le tabelle per altro che non siano dati tabulari). Il comportamento predefinito di una tabella è impostare la larghezza delle colonne sulla larghezza del contenuto contenuto nelle sue celle, ma questo può portare a un design disordinato, specialmente se hai molte tabelle che finiscono tutte con colonne di dimensioni diverse.
Per peggiorare le cose, il comportamento predefinito può essere alquanto imprevedibile quando stai iniziando a familiarizzarti con esso. Ad esempio, puoi specificare la larghezza di una colonna come percentuale della larghezza totale, ma dare a quelle colonne una larghezza fissa sarà semplicemente ignorato dal motore di rendering nella maggior parte dei casi.
Ecco che entra in gioco il layout di tabella fisso. Impostando la proprietà table-layout di una tabella su “fisso”, puoi ottenere un controllo più prevedibile e intuitivo del formato della tua tabella. Improvvisamente, cose come nascondere l’overflow funzionano, e le colonne avranno la larghezza che hai impostato indipendentemente dal contenuto che contengono. E la buona notizia è che impostare una tabella su un layout fisso è semplice;
.element {
transition: all 0.5s ease;
background: blue;
}
.element:hover {
background: yellow;
}Code language: CSS (css)Con quel codice, l’elemento in questione passerà da uno sfondo blu a uno giallo quando il mouse passa sopra, e di nuovo a blu quando il mouse se ne va.
Utilizzo di SVG per le icone
SVG – Scalable Vector Graphics – è un tipo di formato di immagine che memorizza una rappresentazione matematica dell’immagine in questione. Per spiegare questo; immagina una normale immagine di una linea curva. Se ingrandisci quell’immagine con i metodi convenzionali, inizierà a diventare pixelata. I file SVG non memorizzano i pixel, ma formule matematiche che descrivono la curva. Il vantaggio di ciò è che l’immagine può essere ridotta o ingrandita quanto si vuole senza influire sulla qualità.
Le immagini SVG possono essere incluse in una pagina web utilizzando il markup img come si farebbe con qualsiasi immagine normale, ma con il vantaggio che possono essere ridimensionate senza doversi preoccupare che la qualità dell’immagine sia compromessa. Si dovrebbe notare che ci sono alcune questioni di compatibilità da considerare, tra cui le versioni precedenti del browser Android e Internet Explorer 8 e inferiori.
Curvare il testo attorno a un’immagine flottante
Formattare il testo attorno a un’immagine non è certo una novità, ma ciò che è piuttosto nuovo è la capacità di curvarsi attorno a immagini e altri elementi. Particolarmente utile quando si tratta di immagini rotonde. Il codice per farlo sembra questo;
.circle {
height: 250px;
width: 250px;
float: left;
shape-outside: circle();
}Code language: CSS (css)Colonne di dimensionamento automatico
Abbiamo menzionato sopra che non dovresti usare le tabelle per scopi di layout generale. CSS è stato notoriamente riluttante a offrire un’alternativa simile a una tabella… fino all’aggiunta dei layout a griglia.
I layout a griglia permettono agli utenti di ottenere un aspetto da tabella senza dover ricorrere al markup della tabella, ed è possibile sfruttare alcune opzioni intuitive di dimensionamento automatico nel processo. Ad esempio;
.grid-container {
display: grid;
grid-auto-columns: 50px;
}Code language: CSS (css)Come suggerisce il codice, questo garantirà che tutte le colonne nella griglia siano larghe 50px. L’unica cosa rimasta è implementare la tua griglia nel documento HTML. Fai questo semplicemente impostando un div genitore sulla classe grid-container (o come l’hai chiamata) e poi includendo un nuovo div per ogni “cella” che vuoi nella tua griglia.
Creazione di forme
Il fatto che si possano creare forme direttamente in CSS è un pezzo di conoscenza che spesso viene trascurato sia dai nuovi che dai vecchi sviluppatori. Ovviamente, è quasi sempre stato possibile creare quadrati e rettangoli: basta dare a un div un colore di sfondo e hai proprio questo. Usando CSS, puoi anche creare cerchi e ovali, una varietà di triangoli, trapezi, frecce, stelle e molto altro.
Così tanto altro, infatti, che raddoppierebbe la lunghezza di questo post per mostrarti il codice per tutti loro qui. Invece, ci accontenteremo di alcuni esempi;
Quadrato
#square {
width: 100px;
height: 100px;
background: blue;
}Code language: CSS (css)Cerchio
#circle {
width: 100px;
height: 100px;
background: blue;
border-radius: 50%
}Code language: CSS (css)Triangolo
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}Code language: CSS (css)Uovo
#egg {
display: block;
width: 106px;
height: 160px;
background-color: blue;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}Code language: CSS (css)Conclusioni
In verità, questo post graffia appena la superficie di tutti i piccoli trucchi utili che puoi avere nel tuo arsenale quando affronti un nuovo progetto di web design. La chiave per scoprire i trucchi di un CSS avanzato risiede nel sapere quale strumento è giusto per il lavoro.
