Il linguaggio CSS è fondamentale nel background di un web developer. Insieme al linguaggio HTML è il linguaggio in grado di dare una dinamicità è uno stile grafico al sito web che si vuole realizzare.
CSS: cos’è?
CSS sta per Cascading Style Sheets e definisce lo stile (colori, aspetto, ecc.) degli elementi di una pagina web. Si tratta di uno strumento fondamentale per costruire una pagina e dare una personalizzazione specifica agli elementi che la compongono. Il linguaggio CSS serve a controllare tutto ciò che concerne l’aspetto estetico degli elementi presenti all’interno del “foglio stile”.
Gli elementi HTML a cui si vuole attribuire uno stile specifico, sono caratterizzati da stati (o pseudo stati) e da pseudo-classi. Nello specifico stati e pseudo-classi sono sempre in relazione. Lo stato di un elemento in CSS cambia a seconda del verificarsi di certe condizioni, del tipo di elemento e dello stile associato a quest’ultimo. Una pseudo-classe non definisce la presentazione di un elemento ma di un particolare stato dell’elemento stesso. Ad esempio, modificando lo stile di un elemento quando l'utente passa sopra di esso o quando viene visitato un collegamento.
La sintassi di una pseudo-classe è facilmente riconoscibile
1. selector: pseudo-class{
2. property: value;
3. }
Il modulo selector ci aiuta a definire le pseudo-classi e molte di queste sono già definite e messe a disposizione da CSS. Come ad esempio:
- :hover – questa pseudo-classe viene utilizzata per aggiungere effetti speciali a un elemento quando il puntatore del mouse si trova sopra di esso.
- :active – questa pseudo-classe viene utilizzata per selezionare un elemento che viene attivato quando l’utente fa clic su di esso.
- :focus – viene utilizzata per selezionare un elemento che è attualmente focalizzato dall'utente. Funziona sugli elementi di input dell'utente utilizzati nei form da compilare e viene attivato non appena l'utente fa clic su di esso.
- :visited – viene utilizzata per selezionare i collegamenti che sono già stati visitati dall'utente.
Quelli elencati sono i più comuni e utilizzati, ma ce ne sono diversi utili anche per gestire i moduli di form in input oppure comunicare informazioni utili ad un utente che naviga. Imparare a programmare CSS passa anche da questi concetti un po’ più avanzati. Il linguaggio CSS mette a disposizione dello sviluppatore la possibilità di creare degli pseudo-stati custom che si discostano dai built-in precedentemente citati.
Una pagina web che utilizza un elemento personalizzato potrebbe voler applicare uno stile a questi stati. L'elemento personalizzato potrebbe esporre i suoi stati tramite classi CSS (attributo di classe) sul suo elemento host, ma questo è considerato un anti-pattern, non è vista come una soluzione di programmazione molto elegante.
Chrome ora supporta un'API per l'aggiunta di stati interni agli elementi personalizzati. Questi stati personalizzati sono esposti alla pagina esterna tramite pseudo-classi di stato personalizzato. Ad esempio, una pagina che utilizza un elemento <live-score> può dichiarare gli stili per lo stato –loading personalizzato di quell'elemento.
Questo aumenta il livello di personalizzazione del proprio sito web in maniera esponenziale. Inoltre, la lista di pseudo-classi che viene quotidianamente aggiornata in CSS è molto ampia.
Le pseudo-classi consentono di applicare uno stile a un elemento non solo in relazione al contenuto e alla struttura del documento (pagina web), ma anche in relazione a fattori esterni come la navigazione dell’utente (:visited, ad esempio), lo stato del suo contenuto ( come :checked su alcuni elementi del form), o la posizione del mouse (come :hover, che ti permette di sapere se il mouse è sopra un elemento oppure no).
Per questo il linguaggio CSS diventa sempre più profondo ed è importante, per chi ambisce a diventare sviluppatore web, avere sempre a portata di mano la documentazione e tutte le risorse utili per poter apprendere e sfruttare al meglio il linguaggio, così da imparare a programmare. Se l’articolo ti ha incuriosito e vuoi saperne di più, non puoi perderti la nostra guida html e css interamente in italiano e gratuita, da consultare ogni volta che vuoi!
