I vantaggi offerti dai fogli di stile
Originariamente, il linguaggio HTML prevedeva l’uso di tag di formattazione, come <big>, <center>, <font> e altri.
Questa modalità è stata abbandonata, a favore dell’uso dei fogli di stile, che offrono numerosi vantaggi:
- la formattazione viene mantenuta separata dalla struttura della pagina, permettendo un codice HTML più “pulito”;
- è possibile rappresentare la pagina web con stili diversi, ad esempio in base al dispositivo su cui viene visualizzata, senza intervenire sul codice HTML, ma solo sul CSS;
- è possibile associare la stessa formattazione a tutti gli elementi HTML presenti nella pagina che hanno le stesse caratteristiche (ad esempio a tutti i titoli) ;
- se si usa un foglio di stile esterno (vedere il prossimo paragrafo), è possibile associare la stessa formattazione a tutti gli elementi HTML che hanno le stesse caratteristiche, pur essendo presenti su pagine diverse;
- un uso appropriato del CSS migliora il posizionamento (il ranking) della pagina per i motori di ricerca;
- è possibile sovrascrivere uno stile specificando le nuove caratteristiche in base ai criteri di “cascading” in un foglio di stile successivo, ovvero “in cascata” al precedente.
Diverse modalità per dichiarare gli stili
Esistono tre modalità per dichiarare lo stile di un elemento HTML:
- tramite un foglio di stile esterno (definito anche “foreign CSS”): gli stili vengono dichiarati in file esterno alla pagina, avente estensione .css, che viene richiamato nell’intestazione di quest’ultima. Questa modalità permette di riutilizzare lo stesso foglio di stile su pagine HTML diverse.
- tramite l‘elemento <style> all’interno dell’intestazione della singola pagina HTML (definito anche page-specific CSS). Questa modalità viene utilizzata nel caso siano necessarie poche dichiarazioni tipiche della pagina, offendo il vantaggio di non dover richiedere un ulteriore accesso al server per scaricare un ulteriore foglio di stile, specifico per la pagina.
- inline, ovvero come attributo di un singolo elemento HTML. Questa modalità viene utilizzata quando si vuole che un particolare elemento HTML abbia uno stile specifico, diverso dai corrispondenti elementi HTML presenti nella pagina.
La priorità nell’applicazione degli stili (il “cascading”)
Date le diverse modalità di dichiarazione degli stili, è possibile che per un particolare elemento di una pagina HTML vengano dichiarate più regole tra loro contrastanti. Quale di queste verrà applicata?
Il linguaggio CSS prevede quattro criteri per definire la priorità di applicazione delle regole:
- la modalità utilizzata: la modalità inline è prioritaria rispetto alla modalità interna, che a sua volta è prioritaria sulla modalità esterna;
- la specificità (“specificity”) del selettore; ogni tipologia di selettore ha un suo specifico “peso”, i selettori con peso maggiore sono prioritari rispetto agli altri. Nell’articolo Cosa sono i selettori CSS è indicato il “peso” di ciascun selettore.
- la sequenza; a parità delle altre condizioni, la regola indicata per ultima (ovvero “in fondo alla cascata”) è prioritaria;
- l’uso della clausola !important; quando in una regola viene dichiarata la clausola !important, questa regola avrà priorità su tutte le altre, a prescindere dal normale flusso di cascading.
I framework CSS
Un framework CSS è una raccolta di file CSS predefiniti che forniscono stili, componenti e strumenti per creare interfacce web in modo rapido e coerente. Questi framework aiutano gli sviluppatori a evitare la scrittura di codice CSS da zero, offrendo griglie, modelli di design e funzionalità avanzate per layout responsive.
Caratteristiche dei framework CSS
- Layout responsivo: Spesso includono sistemi di griglie per adattarsi a diverse dimensioni di schermo.
- Componenti UI pronti: Pulsanti, modali, tabelle, card, menu, e altri elementi già stilizzati.
- Compatibilità cross-browser: Evita problemi di visualizzazione tra browser diversi.
- Efficienza nello sviluppo: Riduce il tempo necessario per creare interfacce visivamente accattivanti.
Principali framework CSS
- Bootstrap: (il mio preferito, anche perché usa il preprocessore Sass) Il più popolare, con una vasta gamma di componenti e una griglia flessibile basata su Flexbox.
- Foundation: Framework avanzato con una griglia potente e strumenti per l’accessibilità.
- Materialize: Implementa le linee guida di Material Design di Google per un’interfaccia moderna e intuitiva.
- UIkit: Minimalista e leggero, ideale per applicazioni web snelle.
- Pure CSS: Creato da Yahoo, è un framework molto leggero con un approccio mobile-first.
Il Reset
I browser assegnano regole di formattazione intrinseche ai diversi elementi HTML.
Browser diversi utilizzano dichiarazioni diverse, con l’esito finale di ottenere pagine visualizzate in modo diverso da ciascun browser.
Per ovviare a questo problema, e per avere il pieno controllo di come verrà visualizzata la pagina sui diversi browser, gli sviluppatori ricorrono ai fogli di stile di reset.
I framework CSS, come Bootstrap, forniscono già al loro interno le regole di reset.
Ecco alcuni esempi di fogli di stile CSS di reset disponibili online:
- Modern CSS Reset di Josh W. Comeau: Un reset CSS aggiornato con tecniche moderne per migliorare l’esperienza utente e la gestione dei layout.
- Reset CSS di Eric Meyer: Uno dei reset CSS più famosi, progettato per eliminare le differenze tra browser e creare una base uniforme.
- Modern CSS Reset di W3Things: Una guida su perché è utile un reset CSS e come implementarlo correttamente.
- normalize.css: Proponendosi come un’alternativa moderna e compatibile con HTML5 ai CSS Reset, Normalize.css consente ai browser di visualizzare tutti gli elementi in modo più coerente e in linea con gli standard moderni.
Questi reset CSS aiutano a garantire una base coerente per lo sviluppo web, riducendo le discrepanze tra browser.
0 commenti