Cascading Style Sheets, meglio noto come CSS (in italiano fogli di stile a cascata), è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal W3C.
L'introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione o layout e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine stesse sia per gli utenti, garantendo contemporaneamente anche il riutilizzo di codice ed una sua più facile manutenzione.
Storia
Per permettere agli autori di poter plasmare liberamente l'aspetto delle pagine web, dal 1993 in poi Netscape Navigator ed Internet Explorer, i due software di navigazione che si disputavano gli utenti nella nota guerra dei browser, presentarono tag proprietari, ovvero non aderenti agli standard né compatibili con i browser concorrenti. Un esempio di questi tag era <font> che andava a definire il font dei caratteri.
Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione, così il loro uso è diventato molto intenso. Tuttavia questi tag presentavano tre problemi:
Il primo problema è costituito dalla lunghezza dei tag. Se confrontata con una pagina che adotta il linguaggio CSS, una pagina che non lo adotta è in genere più pesante (in termini di bit) in un rapporto che spesso raggiunge lo 0,2%. Inoltre, le istruzioni CSS possono essere raccolte in un esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server devono trasmettere. Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente agli standard, ridondante e confuso comporta infatti molto lavoro aggiuntivo per i browser, che devono cercare di correggere ed interpretare (quando possibile) direttive arbitrarie. Il terzo problema è la mancanza di compatibilità con i computer palmari e gli smartphone. Queste pagine infatti sono progettate per schermi con risoluzione minima 800×600 pixel. Dispositivi come i palmari (o i più moderni tablet) che possono avere una risoluzione inferiore ed una forma dello schermo ben diversa dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a visualizzare correttamente la pagina con il risultato che l'utente si troverà una pagina confusa e scomoda da leggere.
Un'ulteriore questione era, nelle pagine web non standard, l'uso del tag <table> (le tabelle) per realizzare l'impaginazione delle pagine web. L'impaginazione tabellare viene considerata deprecabile dai puristi, in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. Oltre a questo, l'uso delle tabelle comporta anche svantaggi pratici: aumento del peso delle pagine, come già indicato al problema 1, e peggioramento dell'accessibilità, in quanto l'ordine logico dei dati può dover essere sacrificato per motivi di layout.
Un altro modo di creare siti web negli anni 90 e 2000 (fino al suo abbandono il 31 dicembre 2020 da parte di Adobe) era Adobe Flash che permetteva (in modo vettoriale) di creare animazioni, trasformazioni e in generale un layout molto più accattivante di HTML e CSS. Oltretutto permetteva di integrare qualsiasi font anche se l'utente sul suo dispositivo non lo aveva. Questi problemi furono risolti con HTML5 e CSS3.
Un altro problema era creare la formattazione delle pagine HTML incorporando gli stili nei tag e il carattere tipografico nel tag "font" (ora deprecato). Ciò rendeva il codice complicato e spesso disordinato. Ad esempio:<p style="color:blue;font-size:46px;"> Wikipedia è un'enciclopedia </p>
CSS Per tentare di risolvere questa situazione, nel 1996 il W3C emanò le specifiche CSS 1. I CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di questo linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la formattazione si sarebbe trasferita su un codice completamente separato, il CSS appunto. I richiami tra i due codici venivano effettuati tramite due particolari attributi: class e ID. Queste specifiche:
Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perché riducevano notevolmente le dimensioni delle pagine. Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag HTML. Non prendevano però in considerazione il terzo problema, dato che nel 1996 i PDA (i palmari) erano scarsamente diffusi.
I CSS sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non ebbero successo a causa della mancanza di browser in grado di supportarli.
CSS 2 e CSS 2.1 Per includere le nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel 1998 il W3C pubblicò le specifiche CSS 2. Nel 2004 iniziarono i lavori sulle specifiche aggiornate CSS 2.1 che divennero raccomandazione ufficiale il 7 giugno 2011. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il terzo problema, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il secondo problema è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla.
A partire da Internet Explorer 5, Firefox e Opera 7, i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web.
Si cominciò a creare i primi tipi di layout senza tabelle (solitamente a uno, due o tre colonne):
layout fisso: aveva una dimensione standard su tutti i dispositivi. layout fluido-elastico: variava la larghezza al variare della larghezza della finestra del browser ma nel caso di schermi molto ampi i testi si dilatavano molto e il layout presentava righe di testo molto lunghe e fastidiose da leggere.
CSS 3
A differenza delle specifiche CSS 2, che è costituita da un'unica specifica, le specifiche CSS3 sono costituite da sezioni separate dette "moduli". A causa di questa modularizzazione, le specifiche CSS3 hanno differenti stati di avanzamento e stabilità. A novembre 2014, cinque moduli risultavano pubblicati formalmente dal W3C come raccomandazioni: 2011-06-07: CSS Color Module LevelCSS Color Module Level 3 2011-09-29: CSS Namespaces Module Level 3CSS Namespaces Module Level 3 2011-09-29: Selectors Level 3Selectors Level 3 2012-06-19: Media QueriesMedia Queries 2013-11-07: CSS Style AttributesCSS Style Attributes I CSS3 presentano nuove possibilità e proprietà rispetto a CSS2. Le più importanti sono:
la possibilità di utilizzare codice CSS al posto delle immagini (jpg, png...) per creare trasparenze, bordi arrotondati e ombreggiature la possibilità di creare animazioni, trasformazioni e scalature come era possibile fare con Adobe Flash nuovi selettori e classi la possibilità di adattare il layout delle pagine web a vari dispositivi e media non più utilizzando più fogli di stile per ogni dispositivo ma uno solo che adatta la pagina a tutti. la possibilità di sostituire JavaScript per creare tooltip, gallerie d'immagine e altro.
PROPRIETÀ CSS3 TIPOLOGIE ESEMPIOSelettoriSelettori di base Selettore universale Selettori di tipo Selettori di classe Selettori di ID* {color: red} h1 {color: red}
.titolo {color: red}
#titolo {color: red}Selettori combinatori o di relazione Selettore di discendenti Selettore di figli Selettore di fratelli adiacenti Selettore generale di fratellidiv#container p {color: red} body > p {color: red}
h1 + h2 {color: red}
h1 ~ h2 {color: red}Selettori di attributo E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] E[attribute^=value] E[attribute$=value] E[attribute*=value]a[title] {color: blue} a[title="Lorem"] {color: blue}
a[title~="dolor"] {color: blue}
a[title^="Lorem"] {color: blue}
a[title$="amet"] {color: blue}
a[title*="dolor"] {color: blue}Pseudo-classi e pseudo-classi strutturali E:root E:nth-child() E:nth-last-child() E:last-child E:only-child E:nth-of-type() E:nth-last-of-type() E:first-of-type E:last-of-type E:only-of-type E:empty:root {background-color: red}Altre pseudo-classi Pseudo-classe :target Pseudo-classe :not Pseudo-classi degli stati degli elementi della UI (User Interface): E:enabled E:disabled E:checkeddiv:target {border: 3px} div:not(.nero) {color: red}
input:enabled {color:red}Pseudo-classi per la validazione :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write:default {background:red}Pseudo-elementi ::first-letter ::first-line ::before ::after::first-letter {color:red}ColoreOpacitàopacitydiv {background:white; color:black; opacity: 0.5}Colore RGBargb rgbabody {background-color: rgb(100%, 100%, 100%)} _____________________
body {background-color: rgb(255, 255, 255)}
_____________________
body {background-color: rgba(255, 255, 255, 0.5)}Colore HSLahsl hslabody {background-color: hsl(0, 100%, 50%) } ______________________
#box1 { background-color: hsla(0,100%,100%,0.5); }BordiAngoli arrotondati border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-radius#box1 {border-top-left-radius: 20px}Bordi decoratiborder-image#border (border-image: url(border.png) 27 27 27 27 round round; }Ombre dei contenitoribox-shadowbox-shadow: 5px 5px 10px 2px #333333;SfondiSfondi multipliurl(prima immagine), url(seconda immagine),...background-image: url(immagine1.png), url(immagine2.png);Taglio della immagine di sfondo border-box padding-box content-box#box {background-clip: border-box} #box {background-clip: padding-box}
#box {background-clip: content-box}Posizione della immagine di sfondo border-box padding-box content-boxbackground-origin: padding-box;Dimensione dello sfondo dimensione espressa in percentuale; dimensione espressa con un’unità di misura; proprietàcover; proprietà contain.background-size: 50% 50%; background-size: 200px 50px;
background-size: cover;
background-size: contain;Gradienti come immagini di sfondolinear-gradientbackground-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);Testo e fontWeb fonts (alternativa a Google fonts)@font-face@font-face { font-family: myFirstFont;
src: url(sansation_light.woff);
}Interruzione del testoword-wrap:#box {word-wrap: break-word; }Ombra sotto il testotext-shadow:p {text-shadow: 2px 2px 3px #333;}Orientamento del testo (ad esempio per le lingue dove il testo è verticale)writing-mode: "valore"; text-orientation: "valore";text-orientation: mixed; upright;
sideways;
use-glyph-orientation;
writing-mode: horizontal-tb;
vertical-rl;
vertical-lr;Caratteri specialicontent: "carattere speciale";h1:after { content: ' \00A7';
}Direzione del testohorizontal-tb; vertical-rl;p.contenuto1 { writing-mode: horizontal-tb;
}Contorno del testowidth: color:h1 {text-stroke: 1px black;}Interruzione del testotext-overflow: clip; text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
Valori globali:
inherit; initial; revert; unset;.overflow-clip-clip {text-overflow: clip clip;}
.overflow-clip-ellipsis {text-overflow: clip ellipsis;}
.overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;}Layout e box modelEccedenzeoverflow-x: overflow-y:#box2 {overflow-x: hidden; }Posizione dei contenitoribox-sizing:#box1 { box-sizing: content-box; }Layout multicolonna Proprietà di base: column-width column-count column-gap column-rule Per pagine stampate: break-before break-after break-inside Gestione delle colonne column-span