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:

1. Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perché riducevano notevolmente le dimensioni delle pagine.
2. 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.
3. 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.

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)^[2][3]:

• 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.

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à.^[4] A novembre 2014, cinque moduli risultavano pubblicati formalmente dal W3C come raccomandazioni:

• 2011-06-07: CSS Color Module Level 3
• 2011-09-29: CSS Namespaces Module Level 3
• 2011-09-29: Selectors Level 3
• 2012-06-19: Media Queries
• 2013-11-07: CSS Style Attributes

I CSS3 presentano nuove possibilità e proprietà rispetto a CSS2^[5][6]. 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^[7][8][9].

font-family: myFirstFont;

 src: url(sansation_light.woff);

 content: ' \00A7';

 writing-mode: horizontal-tb;

filter: blur(5px);

L'inserimento di codice CSS nelle pagine web può essere effettuato in tre modi diversi:

• Inserendo nel tag <head> della pagina in codice HTML un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall'estensione .css come negli esempi seguenti, tramite il tag link o tramite la direttiva import, che può essere utilizzata anche negli stessi file .css per collegare più file tra loro:

 <html>
 <head>
 <title>Esempio</title>
 <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
 </head>

oppure

 <html>
 <head>
 <title>Esempio</title>
 <style type="text/css">
 @import url(foglio_di_stile.css);
 </style>
 </head>

questa soluzione garantisce il massimo riuso di codice possibile potendo essere richiamato in ciascuna delle pagine web HTML desiderate.

• Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css.

 <html>
 <head>
 <title>Esempio</title>
 <style type="text/css">
   codice css
 </style>
 </head>

Questa soluzione garantisce un minor riuso di codice rispetto al precedente potendo essere utilizzato solo all'interno della pagina HTML in cui è dichiarato.

• In linea all'interno degli elementi

<tag style="dichiarazioni CSS">...</tag>

Questa soluzione garantisce un riuso di codice ancora minore rispetto al precedente.

Un foglio di stile CSS è sintatticamente strutturato come una sequenza di regole, che sono coppie costituite da un selettore e un blocco di dichiarazioni, racchiuso tra parentesi graffe. Un selettore è un predicato che individua certi elementi del documento HTML; una dichiarazione, separata con un punto e virgola dalle altre, è a sua volta costituita da una proprietà, ovvero un tratto di stile (come il colore del testo) e un valore da assegnare a quest'ultimo (per esempio blu). separati dai due punti.

selettore1 {
  proprietà1:valore1;
  proprietà2:valore2;
}
selettore2 {
  proprietà3:valore3
}

Si descrivono di seguito alcune delle principali tipologie di selettori.

 body {
 [...]
 }

 p {
 [...]
 }

 .nome_classe {
 [...]
 }

 #nome_identificatore {
 [...]
 }

 p:first-child {
 [...]
 }

 <body>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
 </body>

 a:link {
 [...]
 }

 p:hover {
 [...]
 }

 p::first-line {
 [...]
 }

 p span {
 [...]
 }

 div > p {
 [...]
 }

 h1 + p {
 [...]
 }

Selettori di attributo

Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi.

 a[title=Esempio]{
 [...]
 }

Questa regola si applica solo agli elementi <a> che presentano l'attributo title="Esempio". I selettori di attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li supporta ed il loro uso è quindi molto limitato.

Le Griglie CSS sono un sistema di layout bidimensionale, ossia che può gestire sia colonne che righe, a differenza di flexbox che è in gran parte un sistema monodimensionale. Si applicano le regole CSS sia a un elemento genitore (che diventa il Grid Container) che ai figli di quell'elemento (che diventano Grid Items)^[13].

CSS
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
---------------------------------------
HTML
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

Con i CSS si può fare in modo che l'utente, nel caso stampi una pagina web, stampi solo determinati elementi della pagina e non tutta. Solitamente si toglie dalla pagina stampata il menu, l'immagine di sfondo e i banner pubblicitari. Nel caso la pagina web sia particolarmente ricca di grafica e impaginata in modo creativo e non standard, si tende a farla stampare in modo più classico e standard^[14][15]. Un'alternativa al CSS per la stampa sono alcuni plugin dei browser che permettono all'utente di togliere dalla stampa determinati elementi della pagina web^[16].

Esempio di CSS esterno per la stampa collegato ad una pagina web HTML:

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

Esempio di CSS esterno per la stampa:

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* print.css */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

I colori Web sono colori usati nella visualizzazione di pagine Web sul World Wide Web e nei metodi per descrivere e specificare tali colori. I colori possono essere specificati come una tripletta RGB o in formato esadecimale (una tripletta esadecimale) o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro software di grafica viene spesso utilizzato per generare valori di colore. Un esempio: #0099CC (un tipo di azzurro che si può anche scrivere Pacific Blue).

$color-danube: #668DD1;

/* RICHIAMO */
$color-alpha: $color-danube;

Sass (Syntactically Awesome StyleSheets) è un'estensione del linguaggio CSS che permette di utilizzare variabili, di creare funzioni e di organizzare il foglio di stile in più file.

Less (LESS) è un preprocessore CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di funzioni, operatori e variabili, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere.

Le proprietà CSS sono numerose. Le più utilizzate sono:

• width e height. Queste proprietà vengono utilizzate per impostare l'altezza e la larghezza di un determinato elemento.
• background. Definisce lo sfondo di un elemento. È una scorciatoia (shorthand properties) per background-attachment, background-color, background-image, background-position e background-repeat.
• border. Definisce il bordo di un elemento. È una scorciatoia (shorthand properties) per border-color, border-style e border-width.
• color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà background.
• position. Definisce il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso, assoluto o appiccicoso).
• z-index. Specifica l'ordine di un elemento posizionato e dei suoi discendenti (sopra o sotto gli altri presenti in pagina).
• float. Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri elementi ai suoi lati.
• font-family. Definisce le proprietà del carattere. È una scorciatoia (shorthand properties) per font-family, font-size e font-weight.
• margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi, la seconda quello interno.
• text-align. Definisce l'allineamento degli elementi, tra cui il testo.
• !important. Fa prevalere una regola CSS rispetto alle altre
• min-width e max-width. Permettono di far apparire e scomparire un elemento a seconda della dimensione del dispositivo
• clear. Impedisce che a fianco di un elemento compaiano altri elementi con il float

Se non specificata, una proprietà assume i valori predefiniti di ogni browser, o in seconda istanza lo stile utente scelto, altrimenti può assumere uno dei seguenti:

• inherit
• auto
• numero
• percentuale
• colore
• URI
• font
• altri valori tipici di ogni proprietà

La stringa inherit specifica che la proprietà deve ereditare il valore dagli elementi da cui l'elemento discende. La stringa auto ha significati molto diversi a seconda della proprietà a cui viene assegnata.

Se i numeri sono contraddistinti da un'unità di misura è necessario che tale unità sia espressa (tranne che nel caso dello zero). Tra il numero e l'unità non devono esserci spazi, come nell'esempio che segue:

 p {
 margin : 5px;
 border: 1em;
 padding: 0;
 }

I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con:

 orange                 /* colore predefinito */
 rgb(255, 165, 0)       /* formato rgb da 0 a 255 */
 rgb(100%,64%,0%)       /* è possibile utilizzare le percentuali */
 rgba(255, 165, 0, 1)   /* è possibile specificare l'alpha che va da 0 a 1 */
 hsl(39, 100%, 50%)     /* notazione hue saturation lightness */
 hsla(39, 100%, 50%, 1) /* è possibile specificare l'alpha */
 #ffa600    /* formato esadecimale RRGGBB */
 #ffa600ff  /* formato esadecimale RRGGBBAA */
 #fa0       /* formato esadecimale RGB approssimazione del valore iniziale */
 #fa0f      /* formato esadecimale RGBA approssimazione del valore iniziale */

L'URL viene indicato nelle forme

 url(http://esempio.it/file.html)
 url("http://esempio.it/file.html")

I CSS permettono di indicare nella proprietà font-family più di un font, o una famiglia di font (serif e sans). In questo modo il browser utilizzerà il primo che troverà installato sul sistema operativo. La dichiarazione utilizza questa sintassi:

 p {
 font-family : "Arial", "Verdana", serif;
}

svg {
  background-color: beige;
}

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

Utilizzare i CSS3 per evitare di utilizzare le immagini (jpg, png,...) ad esempio per gli angoli arrotondati, le ombre, i gradienti e le trasparenze.

Utilizzare i CSS Sprite, attuando una sola chiamata al server utilizzando una sola immagine che ne contiene molte per più parti della pagina web (o dell'intero sito web).

Comprimere i file CSS con il metodo "minify" per ridurre il peso del file CSS e quindi la banda utilizzata per richiamare tale file dal server. Si può fare anche con pagine HTML e JavaScript^[28]. In questo modo però il codice sarà privo di spazi e la modifica risulterà più complessa.

Inoltre ci sono più modi di arrivare allo stesso risultato con i CSS. Il metodo che si dovrebbe scegliere è quello che consente di scrivere meno codice possibile per ridurre al minimo il peso del file ".css". Ad esempio:

.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }

/* EQUIVALE A */

.bar,.foo{color:red}

Non usare troppi font incorporati (@font-face e Google Fonts).

Ridurre al minimo il numero di file CSS e il numero di file in generale. Adattare ad esempio il layout delle pagine web a vari dispositivi e media non utilizzando più fogli di stile per ogni dispositivo ma uno solo che adatta la pagina a tutti attraverso le media queries. In questo modo il server avrà la chiamata per un solo foglio CSS.

Sostituire JavaScript con i CSS per creare tooltip, gallerie d'immagine e altro^[7][8][9]. I CSS richiedono infatti meno risorse di JS.

A differenza del CSS, che utilizza le parentesi graffe per aprire e chiudere i blocchi di dichiarazione, viene utilizzata l'indentazione. Inoltre, i punti e virgola (;) vengono facoltativamente omessi. Quindi, il seguente CSS:

body {
  color: white;
}

può essere abbreviato in:

body
  color: white;

Inoltre, anche i due punti (:) e le virgole (,) sono facoltativi; ciò significa che quanto sopra può essere scritto come segue:

body
  color white

Stylus consente di definire variabili, tuttavia, a differenza di LESS e Sass, non utilizza un simbolo per definire le variabili. Inoltre, l'assegnazione delle variabili viene eseguita automaticamente separando la proprietà e le parole chiave. In questo modo, le variabili sono simili alle variabili in Python.

messaggio = 'Hello, World!'
div::before
  content messaggio
  color #ffffff

Il compilatore Stylus tradurrebbe l'esempio sopra in:

div::before {
   content: "Hello, World!";
   color: #ffffff;
}

Sia i mixin che le funzioni sono definiti nello stesso modo, ma vengono applicati in modi diversi.

Ad esempio:

 border-radius ( n )
   -webkit-border-radius  n
   -moz-border-radius  n
   border-radius  n

quindi, per includerlo come mixin:

div.rettangolo
   border-radius( 10px )

che verrebbe compilato in:

div.rettangolo {
   -webkit- border-radius: 10 px;
   -moz- border-radius: 10 px;
   border-radius: 10 px;
}

Per includere variabili negli argomenti e negli identificatori, le parentesi graffe circondano le variabili. Per esempio,

  -webkit- { 'border'  +  '-radius' }

corrisponde a

 -webkit-border-radius

CSS inline

<div id=”circle”
style="exclusion-shape: poly(x1, y1, .., xN, yN)"></div>
<div style="region-thread:content;
exclusions: #circle;"></div>

CSS esterno

.exclusion {
    wrap-flow: both;
    position: absolute;
    width: 200px;
}

.region {
    flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 10px;
}

I framework CSS sono librerie pre-preparate che hanno lo scopo di consentire uno stile più semplice e conforme agli standard delle pagine Web utilizzando il linguaggio Cascading Style Sheets. I framework CSS includono Blueprint, Bootstrap, Cascade Framework, Foundation, MDBootstrap e Materialise. Come le librerie di linguaggi di programmazione e scripting, i framework CSS sono solitamente incorporati come fogli .css esterni a cui si fa riferimento nell'HTML <head>. Forniscono una serie di opzioni già pronte per la progettazione e il layout della pagina web. Sebbene molti di questi framework siano stati pubblicati, alcuni autori li usano principalmente per la prototipazione rapida, o per imparare da, e preferiscono 'creare manualmente' CSS appropriato per ogni sito pubblicato senza il sovraccarico di progettazione, manutenzione e download dovuto a molte funzionalità inutilizzate nello stile del sito.

Con l'aumentare della dimensione delle risorse CSS utilizzate in un progetto, un team di sviluppo deve spesso decidere una metodologia di progettazione comune per mantenerle organizzate. Gli obiettivi sono la facilità di sviluppo, la facilità di collaborazione durante lo sviluppo e le prestazioni dei fogli di stile distribuiti nel browser. Le metodologie popolari includono OOCSS (CSS orientato agli oggetti), ACSS (CSS atomico), oCSS (foglio di stile Cascade organico), SMACSS (architettura scalabile e modulare per CSS) e BEM (blocco, elemento, modificatore)