CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
m →Selettori: fix esempio |
||
| (559 versioni intermedie di oltre 100 utenti non mostrate) | |||
Riga 1:
{{nota disambigua}}
{{Formato file
| nome = Cascading Style Sheets
| logo = Official CSS Logo.svg
| icona =
| didascalia =
| estensione = .css
| mime = text/css
| sviluppatore = [[World Wide Web Consortium|W3C]]
| proprietario =
| licenza =
| data_pubblicazione = 17 dicembre 1996
| ultima_versione =
| data_ultima_versione =
| genere =
| estensione_di =
| esteso_a =
| standard =
| aperto =si
| sito = www.w3.org/TR/CSS
|uniform_type_identifier=public.css}}
'''Cascading Style Sheets''', meglio noto come '''CSS''' (in italiano '''fogli di stile a cascata'''), è un linguaggio usato per definire la [[Formattazione del testo|formattazione]] di documenti [[HTML]], [[XHTML]] e [[XML]], ad esempio i [[sito web|siti web]] e relative [[pagina web|pagine web]]. Le regole per comporre il CSS sono contenute in un insieme di direttive (''Recommendations'') emanate a partire dal [[1996]] dal [[World Wide Web Consortium|W3C]].
L'introduzione del CSS si è resa necessaria per separare i contenuti delle pagine HTML dalla loro formattazione o layout e permettere una [[programmazione (informatica)|programmazione]] più chiara e facile da utilizzare, sia per gli autori delle pagine stesse sia per gli utenti, garantendo contemporaneamente anche il [[riuso di codice|riutilizzo di codice]] ed una sua più facile manutenzione.
== Storia ==
{{Vedi anche|Tipografia web|Formattazione del testo}}
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 [[Norma tecnica|standard]] né compatibili con i browser concorrenti. Un esempio di questi tag era <code><font></code> 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 [https://www.antoniocostadev.it/css/ CSS], una pagina che non lo adotta è in genere più pesante (in termini di [[Bit (informatica)#Il bit come numero binario|bit]]) in un rapporto che spesso raggiunge lo 0,2%.{{senza fonte}} Inoltre, le istruzioni CSS possono essere raccolte in un [[file]] 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 palmare|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 PC|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 <code><table></code> (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 [[Impaginazione|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<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=Flash & The Future of Interactive Content {{!}} Adobe Blog|sito=web.archive.org|data=2017-12-02|accesso=2021-01-27|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>) 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:<syntaxhighlight lang="html">
<p style="color:blue;font-size:46px;">
Wikipedia è un'enciclopedia
</p>
</syntaxhighlight>
=== 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 del testo|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 <code><table></code>) 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 [[palmare|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|Internet Explorer 5]], [[Mozilla Firefox|Firefox]] e [[Opera (browser)|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)<ref>{{Cita web|url=https://www.html.it/pag/14259/i-pi-comuni-layout-table-less/|titolo=I più comuni layout table-less|autore=Alessandro Fulciniti|sito=HTML.it|lingua=it-IT|accesso=2021-02-02}}</ref><ref>{{Cita web|url=https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/|titolo=Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?|sito=Smashing Magazine|data=2009-06-02|lingua=en|accesso=2021-02-02}}</ref>:
* 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 ===
{{Vedi anche|CSS Animations}}
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à.<ref>{{Cita web|url=https://www.w3.org/Style/CSS/current-work|titolo=CSS current work}}</ref> A novembre 2014, cinque moduli risultavano pubblicati formalmente dal [[W3C]] come [[World Wide Web Consortium#Raccomandazioni|raccomandazioni]]:
* 2011-06-07: [https://www.w3.org/TR/css3-color/ CSS Color Module Level 3]
* 2011-09-29: [https://www.w3.org/TR/css3-namespace/ CSS Namespaces Module Level 3]
* 2011-09-29: [https://www.w3.org/TR/selectors/ Selectors Level 3]
* 2012-06-19: [https://www.w3.org/TR/css3-mediaqueries/ Media Queries]
* 2013-11-07: [https://www.w3.org/TR/css-style-attr/ CSS Style Attributes]
[[HTML]] e CSS3 costituiscono un linguaggio [[turing completo]]<ref>{{Cita web|autore = |url = https://github.com/elitheeli/stupid-machines|titolo = Stupid Machines - rule 110|accesso = |editore = |data = }}</ref><ref>{{Cita web|autore = |url = http://eli.fox-epste.in/rule110-full.html|titolo = Rule 110 OnLine Demonstration|accesso = |editore = |data = }}</ref>, condizione sufficiente per un linguaggio per essere considerato un [[linguaggio di programmazione]].
I CSS3 presentano nuove possibilità e proprietà rispetto a CSS2<ref>{{Cita web|url=https://www.html.it/guide/guida-css3/|titolo=CSS3: guida completa|sito=HTML.it|lingua=it-IT|accesso=2021-01-27}}</ref><ref>{{Cita web|url=https://www.w3schools.com/|titolo=W3Schools Online Web Tutorials|accesso=2021-01-28}}</ref>. 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 [[CSS Animations|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<ref name=":0">{{Cita web|url=https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/|titolo=5 things you can do with CSS instead of JavaScript|sito=LogRocket Blog|data=2019-10-29|lingua=en|accesso=2021-01-28}}</ref><ref name=":1">{{Cita web|url=https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/|titolo=Creating beautiful tooltips with only CSS|sito=LogRocket Blog|data=2020-06-29|lingua=en|accesso=2021-01-28}}</ref><ref name=":2">{{Cita web|url=https://freefrontend.com/css-gallery/|titolo=49 CSS Galleries|sito=Free Frontend|lingua=en|accesso=2021-01-28}}</ref>.
{| class="wikitable"
! PROPRIETÀ CSS3
! TIPOLOGIE
! ESEMPIO
|- bgcolor="#f3f3f3"
| colspan="3" |'''Selettori'''
|-
|Selettori di base
|
* Selettore universale
* Selettori di tipo
* Selettori di classe
* Selettori di ID
|* {color: red}
h1 {color: red}
.titolo {color: red}
<nowiki>#</nowiki>titolo {color: red}
|-
|Selettori combinatori o di relazione
|
* Selettore di discendenti
* Selettore di figli
* Selettore di fratelli adiacenti
* Selettore generale di fratelli
|div#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 <code>:target</code>
* Pseudo-classe <code>:not</code>
* Pseudo-classi degli stati degli elementi della UI (User Interface):
** <code>E:enabled</code>
** <code>E:disabled</code>
** <code>E:checked</code>
|div: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
|
* <code>::first-letter</code>
* <code>::first-line</code>
* <code>::before</code>
* <code>::after</code>
|::first-letter {color:red}
|- bgcolor="#f3f3f3"
| colspan="3" |'''Colore'''
|-
|Opacità
|opacity
|div {background:white; color:black; opacity: 0.5}
|-
|Colore RGBa
|rgb
rgba
|body {background-color: rgb(100%, 100%, 100%)}
_____________________
body {background-color: rgb(255, 255, 255)}
_____________________
body {background-color: rgba(255, 255, 255, 0.5)}
|-
|Colore HSLa
|hsl
hsla
|body {background-color: hsl(0, 100%, 50%) }
______________________
<nowiki>#</nowiki>box1 { background-color: hsla(0,100%,100%,0.5); }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Bordi'''
|-
|Angoli 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 decorati
|border-image
|#border (border-image: url(border.png) 27 27 27 27 round round; }
|-
|Ombre dei contenitori
|box-shadow
|box-shadow: 5px 5px 10px 2px #333333;
|- bgcolor="#f3f3f3"
| colspan="3" |'''Sfondi'''
|-
|Sfondi multipli
|url(''prima immagine''), url(''seconda immagine''),...
|background-image: url(immagine1.png), url(immagine2.png);
|-
|Taglio della immagine di sfondo
|
* <code>border-box</code>
* <code>padding-box</code>
* <code>content-box</code>
|#box {background-clip: border-box}
<nowiki>#</nowiki>box {background-clip: padding-box}
<nowiki>#</nowiki>box {background-clip: content-box}
|-
|Posizione della immagine di sfondo
|
* <code>border-box</code>
* <code>padding-box</code>
* <code>content-box</code>
|background-origin: padding-box;
|-
|Dimensione dello sfondo
|
* dimensione espressa in percentuale;
* dimensione espressa con un’unità di misura;
* proprietà<code>cover</code>;
* proprietà <code>contain</code>.
|background-size: 50% 50%;
background-size: 200px 50px;
background-size: cover;
background-size: contain;
|-
|Gradienti come immagini di sfondo
|linear-gradient
|background-image: linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
|- bgcolor="#f3f3f3"
| colspan="3" |'''[[Formattazione del testo|Testo e font]]'''
|-
|Web fonts
(alternativa a [[Google Fonts|Google fonts]])
|@font-face
|@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
|-
|Interruzione del testo
|word-wrap:
|#box {word-wrap: break-word; }
|-
|Ombra sotto il testo
|text-shadow:
|p {text-shadow: 2px 2px 3px #333;}
|-
|Orientamento del testo (ad esempio per le lingue dove il testo è verticale)<ref>{{Cita web|url=https://www.w3.org/International/articles/vertical-text/index.en.html|titolo=Styling vertical Chinese, Japanese, Korean and Mongolian text|accesso=2022-02-07}}</ref><ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation|titolo=text-orientation - CSS: Cascading Style Sheets {{!}} MDN|sito=developer.mozilla.org|lingua=en|accesso=2022-02-07}}</ref><ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode|titolo=writing-mode - CSS: Cascading Style Sheets {{!}} MDN|sito=developer.mozilla.org|lingua=en|accesso=2022-02-07}}</ref>
|writing-mode: ''"valore"'';
text-orientation: ''"valore"'';
|text-orientation: mixed;
upright;
sideways;
use-glyph-orientation;
----writing-mode: horizontal-tb;
vertical-rl;
vertical-lr;
|-
|Caratteri speciali
|content: "''carattere speciale''";
|h1:after {
content: ' \00A7';
}
|-
|Direzione del testo
|horizontal-tb;
vertical-rl;
|p.contenuto1 {
writing-mode: horizontal-tb;
}
|-
|Contorno del testo
|width:
color:
|h1 {text-stroke: 1px black;}
|-
|Interruzione del testo
|text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";
Valori globali:
* inherit;
* initial;
* revert;
* unset;
|<code>.overflow-clip-clip</code>
<code>{text-overflow: clip clip;}</code>
<code>.overflow-clip-ellipsis {text-overflow: clip ellipsis;}</code>
<code>.overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;}</code>
|- bgcolor="#f3f3f3"
| colspan="3" |'''Layout e box model'''
|-
|Eccedenze
|overflow-x:
overflow-y:
|#box2 {overflow-x: hidden; }
|-
|Posizione dei contenitori
|box-sizing:
|#box1 { box-sizing: content-box; }
|-
|Layout multicolonna
|
* Proprietà di base:
** column-width
** column-count
** column-gap
** column-rule
* Per pagine stampate:
** <code>break-before</code>
** <code>break-after</code>
** <code>break-inside</code>
* Gestione delle colonne
** column-span
** column-fill
|#container { width: 750px; margin: 20px auto; column-width: 350px; column-gap: 25px; }
|-
|Flexible box layout
|
* Display: box
* Orientamento dei box
* Direzione e l’ordine dei box
* Allineamento e spazio box-align box-pack Box flessibili
|display: box;
box-orient: vertical;
box-align: center;
box-pack: justify;
box-flex: 1;
|-
|Media queries
|
* <code>all</code>: il CSS si applica a tutti i dispositivi di visualizzazione;
* <code>screen</code>: schermo di computer;
* <code>print</code>: pagina stampata;
* <code>projection</code>: presentazioni e proiezioni;
* <code>speech</code>: dispositivi a sintesi vocale;
* <code>braille</code>: supporti basati sull’uso del braille;
* <code>embossed</code>: stampanti braille;
* <code>handheld</code>: dispositivi mobili con schermo piccolo e dotati di browser con limitate capacità grafiche;
* <code>tty</code>: dispositivi a carattere fisso come i terminali;
* <code>tv</code>: visualizzazione su schermi televisivi
|@media screen and (color) { ''regole css'' }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Transizioni, trasformazioni e animazioni'''
|-
|Transizioni
|
* <code>transition-property</code>
* <code>transition-duration</code>
* <code>transition-timing-function</code>
* <code>transition-delay</code>
|div {transition-property: background-color; transition-duration: 2s; }
|-
|Trasformazioni
|
* transform e transform-origin
* matrix
* translate
* scale
* rotate
* skew
* trasformazioni multiple
|transform: rotate(40deg);
transform-origin: left bottom;
matrix( a, b, c, d, tx, ty );
transform: translate(10px, 10px);
transform: scale(0.5);
transform: rotate(180deg);
transform: skew(15deg, 20deg);
transform: rotate(180deg) skew(20deg, 30deg) scale(2);
|-
|[[CSS Animations|Animazioni]]
|@keyframe
* animation-name
* animation-duration
* animation-iteration-count
* animation-timing-function
# ease;
# linear;
# ease-in;
# ease-out;
# ease-in-out;
# cubic-bezier.
|@keyframes 'pulse' { from { background-color: red; opacity: 1.0; -transform: scale(1.0) rotate(0deg); }
|- bgcolor="#f3f3f3"
| colspan="3" |'''Grafica'''
|-
|Filtri
|<nowiki>filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();</nowiki>
|img {
filter: blur(5px);
}
|-
|Maschere
|
* <code>mask-clip</code>
* <code>mask-composite</code>
* <code>mask-image</code>
* <code>mask-mode</code>
* <code>mask-origin</code>
* <code>mask-position</code>
* <code>mask-repeat</code>
* <code>mask-size</code>
|<code>mask: url(masks.svg#star) luminance;</code>
|}
== Caratteristiche ==
[[File:External-css.png|alt=Un file CSS esterno può formattare un numero infinito di pagine HTML ed evita quindi di riscrivere lo stesso codice in tutte le pagine.|miniatura|Un file CSS esterno può formattare un numero infinito di pagine HTML ed evita quindi di riscrivere lo stesso codice in tutte le pagine.]]
=== Il codice ===
L'inserimento di codice CSS nelle pagine web può essere effettuato in tre modi diversi:
* Inserendo nel tag <code><head></code> 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 (programmazione)|direttiva]] ''import'', che può essere utilizzata anche negli stessi file ''.css'' per collegare più file tra loro:
<syntaxhighlight lang="html5">
<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>
</head>
</syntaxhighlight>
: oppure
<syntaxhighlight lang="html5">
<html>
<head>
<title>Esempio</title>
<style type="text/css">
@import url(foglio_di_stile.css);
</style>
</head>
</syntaxhighlight>
questa soluzione garantisce il massimo riuso di codice possibile potendo essere richiamato in ciascuna delle pagine web HTML desiderate.
* Inserendo, sempre all'interno dell'<code><head></code> tra gli specifici tag <code><style></code> e <code></style></code> le dichiarazioni css.
<syntaxhighlight lang="html5">
<html>
<head>
<title>Esempio</title>
<style type="text/css">
codice css
</style>
</head>
</syntaxhighlight>
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.
=== Regole ===
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.
<syntaxhighlight lang="css">
selettore1 {
proprietà1:valore1;
proprietà2:valore2;
}
selettore2 {
proprietà3:valore3
}
</syntaxhighlight>
=== Selettori ===
Si descrivono di seguito alcune delle principali tipologie di selettori.
==== Selettori di tipo ====
I selettori di tipo applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi:
<syntaxhighlight lang="css">
body {
[...]
}</syntaxhighlight>
o<syntaxhighlight lang="css">
p {
[...]
}</syntaxhighlight>
==== Selettori di classe ====
Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà <code>class="nome_classe"</code>. La sintassi CSS è la seguente:<syntaxhighlight lang="css">
.nome_classe {
[...]
}</syntaxhighlight>
==== Selettori d'identificatore ====
Gli identificatori (comunemente '''ID''') applicano la regola a quell'elemento della pagina che presenta la proprietà <code>id="nome_identificatore"</code>. Gli ID contraddistinguono elementi ''unici''. La sintassi CSS è la seguente:<syntaxhighlight lang="css">
#nome_identificatore {
[...]
}
</syntaxhighlight>
==== Selettori di pseudo-classe ====
Le pseudoclassi identificano elementi in base alle loro proprietà.
* ''first-child'' individua un elemento solo se è il ''primo figlio'' dell'elemento padre. Così quindi
<syntaxhighlight lang="css">
p:first-child {
[...]
}</syntaxhighlight>
individuerà nel codice (X)HTML sottostante solo il primo paragrafo.<syntaxhighlight lang="html5">
<p>Lorem ipsum</p>
<p>Lorem ipsum</
<p>Lorem ipsum</p>
</body>
</syntaxhighlight>
* ''link'' e ''visited'' si applicano ai collegamenti. La prima identifica i collegamenti non visitati, la seconda quelli visitati. La sintassi CSS è:
<syntaxhighlight lang="css">
a:link {
[...]
}
</syntaxhighlight>
* ''active'', ''focus'' e ''hover'' identificano gli elementi solo in particolari condizioni, la prima se l'elemento è attivo, la seconda se è selezionato, la terza se il cursore del mouse è sopra di esso. Quindi
<syntaxhighlight lang="css">
p:hover {
[...]
}
</syntaxhighlight>
si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà.
* ''lang'' si utilizza per identificare gli elementi di una certa lingua ma il suo supporto è esiguo.
==== Selettori di pseudo-elementi ====
Gli pseudo-elementi identificano solo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML.
* ''first-line'' individua solo la prima linea di un paragrafo. Se la finestra del browser cambia dimensione si adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:
<syntaxhighlight lang="css">
p::first-line {
[...]
}
</syntaxhighlight>
* ''first-letter'' individua solo il primo carattere di un elemento.
* ''before'' e ''after'' sono due pseudoclassi utilizzate nella creazione dei '''contenuti generati'''. Non individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato supporto di Internet Explorer.
==== Selettori di gerarchia ====
Identificano solamente gli elementi che si trovino in una particolare relazione derivante dalla struttura arborescente del documento (X)HTML, come la discendenza, la figliolanza, la fratellanza.
* Il selettore di discendenza identifica solo gli elementi contenuti in altri elementi. Così
<syntaxhighlight lang="css">
p span {
[...]
}
</syntaxhighlight>
identifica solo gli elementi <code><span></code> contenuti in elementi <code><p></code>.
* Il selettore figlio identifica invece solo gli elementi che siano contenuti ''direttamente'' nell'elemento padre. Così
<syntaxhighlight lang="css">
div > p {
[...]
}
</syntaxhighlight>
individua solo i <code><p></code> contenuti direttamente in un <code><div></code>.
* Il selettore fratello identifica il ''primo'' elemento immediatamente successivo ad un altro con cui condivida lo stesso padre. Così
<syntaxhighlight lang="css">
h1 + p {
[...]
}
</syntaxhighlight>
individua solo il primo <code><p></code> fratello di <code><h1></code>
==== Selettori di attributo ====
Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai loro attributi.
<syntaxhighlight lang="css">
a[title=Esempio]{
[...]
}
</syntaxhighlight>
Questa regola si applica solo agli elementi <code><a></code> che presentano l'attributo <code>title="Esempio"</code>. 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.
[[File:CSS Floated Layout.png|alt=Esempio di Griglia CSS|miniatura|Esempio di Griglia CSS]]
=== Griglie CSS ===
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)<ref>{{Cita web|url=https://css-tricks.com/snippets/css/complete-guide-grid/|titolo=A Complete Guide to Grid|sito=CSS-Tricks|lingua=en|accesso=2021-02-02}}</ref>.<syntaxhighlight lang="html">
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>
</syntaxhighlight>
===
[[File:Stampa-web-confronto.png|alt=Confronto tra pagina web a schermo e stampata|miniatura|310x310px|Confronto tra pagina web a schermo e stampata]]
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<ref>{{Cita web|url=https://www.sitepoint.com/css-printer-friendly-pages/|titolo=How to Create Printer-friendly Pages with CSS - SitePoint|lingua=en|accesso=2021-08-24}}</ref><ref>{{Cita web|url=https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/|titolo=How To Set Up A Print Style Sheet|sito=Smashing Magazine|data=2011-11-24|lingua=en|accesso=2021-08-24}}</ref>. 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<ref>{{Cita web|url=https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj|titolo=Print Friendly & PDF|sito=chrome.google.com|lingua=it|accesso=2021-08-24}}</ref>.
Esempio di CSS esterno per la stampa collegato ad una pagina web HTML:<syntaxhighlight lang="html">
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
</syntaxhighlight>Esempio di CSS esterno per la stampa:<syntaxhighlight lang="css">
/* main.css */
body {
margin: 2em;
color: #fff;
background-color: #000;
}
/* print.css */
@media print {
body {
margin: 0;
color: #000;
background-color: #fff;
}
}
</syntaxhighlight>
=== Colori ===
{{vedi anche|Colori Web}}
'''I colori Web''' sono [[Colore|colori]] usati nella [[Web design|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 [[Sistema numerico esadecimale|esadecimale]] (una ''tripletta esadecimale'') o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro [[Software grafico|software di grafica]] viene spesso utilizzato per generare valori di colore. Un esempio: <code>#0099CC</code> (un tipo di azzurro che si può anche scrivere <code>Pacific Blue</code>).
==== Cambiamento del nome dei colori ====
I CSS3 permettono di rinominare i colori a piacere e richiamarli successivamente<ref>{{Cita web|url=https://css-tricks.com/what-do-you-name-color-variables/|titolo=What do you name color variables?|sito=CSS-Tricks|data=2018-12-07|lingua=en|accesso=2021-02-04}}</ref>:<syntaxhighlight lang="css">
$color-danube: #668DD1;
/* RICHIAMO */
$color-alpha: $color-danube;
</syntaxhighlight>
=== Creazione di variabili ===
{{vedi anche|Sass|Less (CSS)}}
'''Sass''' ('''S'''yntactically '''A'''wesome '''S'''tyle'''S'''heets) è un'estensione del linguaggio CSS che permette di utilizzare [[Variabile (informatica)|variabili]], di creare [[Funzione (informatica)|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 [[Funzione (informatica)|funzioni]], [[Operatore (informatica)|operatori]] e [[Variabile (informatica)|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.
=== Proprietà ===
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
=== Valori ===
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
* [[RGB|colore]]
* [[Uniform Resource Identifier|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:
<syntaxhighlight lang="css">
p {
margin : 5px;
border: 1em;
padding: 0;
}
</syntaxhighlight>
I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato con:
<syntaxhighlight lang="css">
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 */
</syntaxhighlight>
L'[[URL]] viene indicato nelle forme
<syntaxhighlight lang="css">
url(http://esempio.it/file.html)
url("http://esempio.it/file.html")
</syntaxhighlight>
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:
<syntaxhighlight lang="css">
p {
font-family : "Arial", "Verdana", serif;
}
</syntaxhighlight>
==== CSS per SVG ====
È possibile utilizzare i CSS per modificare gli stili di SVG (linguaggio facente parte di HTML5)<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS|titolo=SVG and CSS - SVG: Scalable Vector Graphics {{!}} MDN|sito=developer.mozilla.org|accesso=2021-01-28}}</ref>. Esempio:<syntaxhighlight lang="css">
svg {
background-color: beige;
}
</syntaxhighlight>CSS per [[Canvas (elemento HTML)|HTML5 Canvas]]<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>
==== Creazione automatica dei CSS ====
Con programmi di grafica e fotoritocco come [[Adobe Photoshop|Photoshop]] è possibile convertire i livelli in stili CSS<ref>{{Cita web|url=https://squareinternet.co/exporting-css-from-photoshop-when-building-from-a-psd-file/|titolo=Exporting CSS From Photoshop When Building From A PSD File|sito=Square Internet|data=2019-08-11|lingua=en-GB|accesso=2021-01-28}}</ref>.
==== Utilizzo del 3D ====
I CSS3 hanno introdotto la proprietà "3D Transform" che consente di creare alcune animazioni e forme in 3D ma non possono equiparare le possibilità di [[WebGL]]<ref>{{Cita web|url=https://we-rad.com/browser-webgl-vs-css-3d-transforms/|titolo=Guida per il 3D nei browser – WebGL Contro CSS 3D Transforms|sito=WE RAD|data=2017-05-05|lingua=it-IT|accesso=2021-01-29}}</ref><ref>{{Cita web|url=https://onaircode.com/css-3d-transforms-example-with-code-snippets/|titolo=10+ CSS 3D Transforms Example With Code Snippets|autore=Pratik|sito=OnAirCode|data=2018-03-27|lingua=en|accesso=2021-01-29}}</ref>.
== Il supporto dei Browser ai CSS ==
La lista che segue è di [[layout engine|motori di rendering]] perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.
;[[Gecko]] ([[Mozilla Firefox]] e [[Netscape Navigator]]): Gecko ha un ottimo supporto dei CSS 1,2 e 3 ed è per questo spesso utilizzato nella verifica della resa delle pagine web. Gecko e Mozilla Firefox sono [[software libero]]. Anche Netscape Navigator (obsoleto dal 1º marzo 2008<ref>{{Cita web|url=http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers/|titolo=End of Support for Netscape web browsers - The Netscape Blog|sito=web.archive.org|data=2007-12-29|accesso=2021-01-27|dataarchivio=29 dicembre 2007|urlarchivio=https://web.archive.org/web/20071229140059/http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers/|urlmorto=sì}}</ref>) era distribuito sotto [[licenza libera]].
;Trident ([[Internet Explorer]] e [[AOL Explorer]]): Internet Explorer (obsoleto dall'agosto 2020<ref>{{Cita web|url=https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support|titolo=Internet Explorer Web Browser End of Support - Microsoft 365|lingua=en|accesso=2021-01-27}}</ref> in favore di [[Microsoft Edge|Edge]]), dalla [[Windows Internet Explorer 9|versione 9]] supportava CSS 3. Una peculiarità di Internet Explorer erano i cosiddetti ''commenti condizionali'' che consentivano di applicare delle regole di CSS soltanto a una determinata versione di Internet Explorer. Questa funzionalità era ampiamente utilizzata laddove si presumeva un'utenza che utilizzava ancora vecchie versioni di Internet Explorer e che perciò richiedevano frequentemente alcune regole di CSS addizionali per la corretta visualizzazione della pagina web.<ref>
{{cita web
|url=http://www.quirksmode.org/css/condcom.html
|titolo=CSS Conditional comments
|citazione=Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case
|lingua=en
|accesso=10 giugno 2014
}}
</ref> In molti casi era necessario utilizzare regole di stile CSS ad-hoc esclusivamente per Internet Explorer a causa delle differenze sostanziali nel modo in cui alcune versioni di Internet Explorer si discostavano dagli standard, come per esempio nel "<code>box model</code> non-standard" utilizzato da alcune versioni di Internet Explorer e che differivano sostanzialmente da quello imposto dagli standard del World Wide Web Consortium.<ref>
{{cita web
|url=http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
|titolo=Internet Explorer and the CSS box model
|citazione=Internet Explorer’s non-standard way of calculating box dimensions
|accesso=10 giugno 2014
|lingua=en
}}
</ref><ref>
{{cita web
|url=https://www.w3.org/TR/CSS2/box.html
|titolo=CSS2 Box model
|editore=W3C
|lingua=en
}}
</ref> La sintassi dei commenti condizionali era la seguente:
<syntaxhighlight lang="html">
<!--'''[if IE]>'''
''regole CSS ad-hoc per Internet Explorer''
'''<![endif]'''-->
</syntaxhighlight>
:poiché <code><!--</code> introduceva di norma un commento, i browser diversi da Explorer 5.0 o superiori non interpretavano il codice. I commenti condizionali permettevano di specificare un foglio di stile specifico per Internet Explorer nel modo che segue:
<syntaxhighlight lang="html">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="'''foglio_di_stile_ad-hoc_per_IE.css'''">
<![endif]-->
</syntaxhighlight>
Trident e Internet Explorer sono [[software proprietario]].
;[[Presto (motore di rendering)|Presto]] ([[Opera (browser)|Opera]]): Presto offre un ottimo supporto dei CSS 1,2 e 3. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri. Presto e Opera sono [[software proprietario]].
;[[KHTML]] e [[WebKit]] ([[Safari (browser)|Safari]], [[Google Chrome]] e [[Konqueror]]):KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una quasi totale interpretazione anche dei CSS 3. KHTML e WebKit sono [[software libero]]; Safari e Google Chrome sono [[software proprietario|software proprietari]] (mantenuti rispettivamente da [[Apple]] e [[Google (azienda)|Google]]), mentre Konqueror è [[software libero]] (sotto [[licenza GPL]], mantenuto dalla community di [[KDE]]).
Oltre alle differenze di compatibilità, ogni motore di rendering aggiunge ai CSS standard alcuni nuovi elementi o nuove proprietà.
Normalmente tali proprietà iniziano con un prefisso che cambia in base al browser, per esempio <code>-webkit</code> indica che la proprietà riguarda il motore di rendering WebKit, ad esempio <code>-webkit-appearance</code>. Tutte queste proprietà però dovrebbero essere utilizzate esclusivamente quando si desidera solo utilizzare quel browser con quel determinato motore di rendering poiché tutte queste proprietà sono caratteristiche aggiuntive valide solo per quel determinato motore di rendering e non sono proprietà standard definite dal World Wide Web Consortium.
'''[[EdgeHTML|Edge HTML]] ([[Microsoft Edge]])'''
EdgeHTML supporta bene i CSS, compresi i CSS3. EdgeHTML e Microsoft Edge sono [[software proprietario]].
== Utilizzo su diversi dispositivi ==
Prima dell'arrivo dei CSS3, con i CSS2 si facevano più file CSS per lo stesso sito web che caricava il file CSS corrispondente al dispositivo utilizzato dall'utente. In HTML si specificava la seguente sintassi:
<link rel="stylesheet" type="text/css" href="foglio.css" '''media="screen"'''/>
Il codice precedente associa il foglio di stile solo ai browser standard per [[computer desktop]] e portatili. I valori dell'attributo "media" sono gli stessi della regola CSS "''media queries''". Sebbene sia ancora possibile creare più fogli di stile per diversi media e specificarlo nel tag "link rel", da quando le ''media queries'' sono supportati da tutti i moderni browser la maggior parte degli sviluppatori utilizza esse poiché consentono in un solo foglio CSS di adattare la relativa pagina HTML a tutti i dispositivi utilizzando molte meno righe di codice<ref>{{Cita web|url=https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|titolo=CSS @media Rule|accesso=2021-01-28}}</ref>.
== Riduzione delle chiamate al server ==
[[File:CSS-Sprite Schema.gif|alt=Esempio di uso di uno sprite in CSS|miniatura|Esempio di uso di uno sprite in CSS]]
Ogni richiesta del server separata (''time to first byte'' o TTFB) influisce sulla velocità di essa (quando si richiamano nel codice immagini, font, video, elementi JS...). Con i CSS si possono aumentare notevolmente le prestazioni di una pagina riducendo quel numero di richieste.
=== Immagini ===
Utilizzare i CSS3 per evitare di utilizzare le immagini (jpg, png,...) ad esempio per gli angoli arrotondati, le ombre, i gradienti e le trasparenze.
=== Sprite ===
{{Vedi anche|Sprite (informatica)}}[[File:Pixel Dungeon - warrior tileset.png|alt=Un singolo sprite di Pixel Dungeon realizzato con 147 sotto-immagini|miniatura|Un singolo ''sprite'' di [[Pixel Dungeon]] realizzato con 147 sotto-immagini]]
Utilizzare i [[Sprite (informatica)|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).
=== Minify ===
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]]<ref>{{Cita web|url=https://cssminifier.com/|titolo=CSS Minifier|sito=cssminifier.com|accesso=2021-01-27}}</ref>. 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:<syntaxhighlight lang="css">
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
/* EQUIVALE A */
.bar,.foo{color:red}
</syntaxhighlight>
=== Font ===
Non usare troppi [[Tipo di carattere|font]] incorporati (''@font-face'' e [[Google Fonts]]).
=== Numero di file ===
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.
=== JavaScript ===
Sostituire [[JavaScript]] con i CSS per creare [[tooltip]], gallerie d'immagine e altro<ref name=":0" /><ref name=":1" /><ref name=":2" />. I CSS richiedono infatti meno risorse di JS.
== Fogli di stile preferiti e alternativi ==
Come descritto, ad ogni pagina si possono collegare più fogli di stile. Tuttavia è anche possibile far scegliere all'utente quali applicare. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della pagina, ma disattivabili, aggiungendo l'attributo <code><title></code> come nell'esempio che segue:
<link rel="stylesheet" type="text/css" href="foglio_preferito.css" '''title="Esempio1"'''/>
A questo punto si possono specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili dall'utente, come nell'esempio che segue:
<link rel="'''alternate''' stylesheet" type="text/css" href="foglio_alternativo.css" '''title="Esempio2"'''/>
Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia Internet Explorer non offriva questa possibilità quindi era necessario creare uno script [[JavaScript]] che svolgesse la funzione di sostituire i fogli. Il codice era stato pubblicato la prima volta su {{en}} [http://www.alistapart.com/articles/alternate A List Apart]. Tuttavia se questo script era facile da mettere in opera per gli sviluppatori, richiedeva un browser aggiornato con un buon supporto del [[Document Object Model|DOM]], oltre che avere attivati sia JavaScript e i [[cookie]]. Un sistema più complesso ma molto più robusto poteva essere uno script [[lato server]] come [[PHP]]. Un esempio è disponibile sempre sullo [http://www.alistapart.com/articles/phpswitch/ stesso sito].
== Pattern ==
[[File:Pattern-CSS.png|alt=Pattern CSS|miniatura|Pattern CSS]]
I pattern sono figure modulari che si ripetono all'infinito che solitamente fanno da sfondo a elementi HTML come contenitori DIV, bottoni, il background della pagina web, paragrafi. Si possono creare direttamente in CSS, con le immagini o fondendo entrambi i metodi ossia creando un'immagine base e ripetendola con la regola ''background-repeat''<ref>{{Cita web|url=https://freefrontend.com/css-background-patterns/|titolo=51 CSS Background Patterns|sito=Free Frontend|lingua=en|accesso=2021-02-05}}</ref>. In questi tre casi non c'è bisogno di realizzare un'immagine di sfondo della grandezza del contenitore che peserebbe molto di più.
== Acid3 ==
{{Vedi anche|Acid3}}
Acid3 è un test con cui è possibile verificare l'aderenza di un [[browser]] a determinati standard web compresi i CSS3<ref>{{Cita web|url=http://acid3.acidtests.org/|titolo=The Acid3 Test|sito=acid3.acidtests.org|accesso=2021-02-03}}</ref>.
== Stylus ==
'''Stylus''' è un linguaggio per preprocessore di fogli di stile dinamico compilato in Cascading Style Sheets (CSS). Il suo design è influenzato da [[Sass]] e [[LESS]]. È considerata la quarta sintassi del preprocessore CSS più utilizzata<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref>. È stato creato da TJ Holowaychuk, un ex programmatore di Node.js e creatore del linguaggio Luna. È scritto in JADE e [[Node.js]].
=== Selettori ===
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:
<syntaxhighlight lang="css">
body {
color: white;
}
</syntaxhighlight>
può essere abbreviato in:
<syntaxhighlight lang="css">
body
color: white;
</syntaxhighlight>
Inoltre, anche i due punti (:) e le virgole (,) sono facoltativi; ciò significa che quanto sopra può essere scritto come segue:
<syntaxhighlight lang="css">
body
color white
</syntaxhighlight>
=== Variabili ===
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.
<syntaxhighlight lang="css">
messaggio = 'Hello, World!'
div::before
content messaggio
color #ffffff
</syntaxhighlight>
Il compilatore Stylus tradurrebbe l'esempio sopra in:
<syntaxhighlight lang="css">
div::before {
content: "Hello, World!";
color: #ffffff;
}
</syntaxhighlight>
===
Sia i mixin che le funzioni sono definiti nello stesso modo, ma vengono applicati in modi diversi.
Ad esempio:
<syntaxhighlight lang="css">
border-radius ( n )
-webkit-border-radius n
-moz-border-radius n
border-radius n
</syntaxhighlight>
quindi, per includerlo come mixin:
<syntaxhighlight lang="css">
div.rettangolo
border-radius( 10px )
</syntaxhighlight>
che verrebbe compilato in:
<syntaxhighlight lang="css">
div.rettangolo {
-webkit- border-radius: 10 px;
-moz- border-radius: 10 px;
border-radius: 10 px;
}
</syntaxhighlight>
=== Interpolazione ===
Per includere variabili negli argomenti e negli identificatori, le parentesi graffe circondano le variabili. Per esempio,
<
-webkit- { 'border' + '-radius' }
</syntaxhighlight>
corrisponde a
<syntaxhighlight lang="css">
-webkit-border-radius
</syntaxhighlight>
== CSS dinamici ==
Dynamic CSS, o DCSS, è un termine che comprende un insieme di tecnologie utilizzate assieme per creare fogli di stile dinamici, utilizzando una combinazione di qualsiasi [[linguaggio di programmazione]] per il [[lato server]] (come ad esempio [[PHP]]/[[Active Server Pages|ASP]]/[[Perl]]/[[JavaServer Pages|JSP]]) e CSS)<ref>{{Cita news|lingua=en|url=http://www.digital-web.com/articles/generating_dynamic_css_with_php/|titolo=Generating Dynamic CSS with PHP - Digital Web|pubblicazione=Digital Web|data=2014-01-24|accesso=2021-02-17}}</ref>. L'idea iniziale del DCSS è stata scritta nel luglio 2002 da [[Jori Koolstra]], un programmatore olandese<ref>{{Cita web|url=http://www.jori-koolstra.nl/DCSS/dcss.txt|titolo=Wayback Machine|sito=web.archive.org|data=2010-08-19|accesso=2021-02-17|dataarchivio=19 agosto 2010|urlarchivio=https://web.archive.org/web/20100819062059/http://www.jori-koolstra.nl/DCSS/dcss.txt|urlmorto=sì}}</ref>.
DCSS permette di lavorare con variabili in CSS e con la riscrittura dinamica del codice sorgente CSS. Molti [[Content management system|CMS]] hanno creato moduli aggiuntivi, per esempio [[Drupal]].
Esempio:<syntaxhighlight lang="php">
$persistent = [
'bgmast' => 'bbd9ee', /* elenco */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3', /* menu */
'fgmenu' => '444',
'bgcont' => 'fff', /* contenuto */
'fgcont' => '444'
];
</syntaxhighlight>
== Modifica del cursore con i CSS ==
{{Vedi anche|Cursore}}
I CSS possono generare una serie di diversi cursori del mouse che l'utente vedrà appena arrivato sulla pagina [[HTML]] che li contiene<ref>{{Cita web|url=https://developer.mozilla.org/it/docs/Web/CSS/cursor|titolo=cursor - CSS {{!}} MDN|sito=developer.mozilla.org|accesso=2021-02-17}}</ref><ref>{{Cita web|url=https://www.w3schools.com/cssref/pr_class_cursor.asp|titolo=CSS cursor property|accesso=2021-02-17}}</ref>:
== Progetti in divenire ==
[[File:CSS3 region exclusion.png|alt=CSS3 region e exclusion|miniatura|CSS3 ''region'' e ''exclusion'']]
Il W3C sta sviluppando alcune specifiche CSS3 per creare layout simili a quelli per [[Rivista|riviste]] e settimanali, con la possibilità di far scorrere il testo attorno alle immagini prive di sfondo (PNG e GIF) e forme geometriche<ref>{{Cita web|url=https://www.html5rocks.com/en/tutorials/regions/adobe/|titolo=Magazine-like Layout for the Web with CSS Regions and Exclusions - HTML5 Rocks|autore=Christian Cantrell Published: August 3rd, 2012 Comments: 0 Your browser may not support the functionality in this article|sito=HTML5 Rocks - A resource for open web HTML5 developers|lingua=en|accesso=2021-08-23}}</ref><ref>{{Cita web|url=https://lists.w3.org/Archives/Public/www-archive/2011Mar/att-0011/CSS_Regions.pdf|titolo=w3c}}</ref><ref>{{Cita web|url=https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/|titolo=Exclusions will hopefully be like more powerful grid-friendly floats|sito=CSS-Tricks|data=2018-11-21|lingua=en|accesso=2021-08-23}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/css3-exclusions/Overview.html|titolo=CSS Exclusions Module Level 1|accesso=2021-08-23}}</ref>.
=== Esempi ===
CSS inline<syntaxhighlight lang="html">
<div id=”circle”
style="exclusion-shape: poly(x1, y1, .., xN, yN)"></div>
<div style="region-thread:content;
exclusions: #circle;"></div>
</syntaxhighlight>CSS esterno<syntaxhighlight lang="css">
.exclusion {
wrap-flow: both;
position: absolute;
width: 200px;
}
.region {
flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
</syntaxhighlight>
== Esempi di CSS3 ==
<gallery>
File:Css-drawing.png|alt=Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas|Confronto tra il logo CSS3 creato con i CSS, con SVG e con HTML5 Canvas
File:Css-filtri-vs-gimp.png|alt=Confronto tra alcuni filtri CSS3 e i filtri equivalenti di Gimp|Confronto tra alcuni filtri CSS3 e i filtri equivalenti di Gimp
File:Css-multiple-column.png|alt=Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più <nowiki><p>. Con i CSS3 si può usare un solo <p>.</nowiki>|Prima dei CSS3 per distribuire un testo su più paragrafi si usavano più <nowiki><p>. Con i CSS3 si può usare un solo <p>.</nowiki>
File:Css3-background-multiplo.png|alt=Confronto tra sfondi multipli CSS2 e CSS3. Nel primo caso servivano più tag ognuno con uno sfondo e uno z-index, nel secondo un solo con più sfondi|Confronto tra sfondi multipli CSS2 e CSS3. Nel primo caso servivano più tag <img> ognuno con uno sfondo e uno z-index, nel secondo un solo <img> con più sfondi
File:Maschere-css-confronto.png|alt=Confronto tra maschera GIMP, CSS3 e SVG e|Confronto tra maschera GIMP, CSS3 e SVG
</gallery>
== Standardizzazione ==
=== Frameworks ===
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 (framework)|Bootstrap]], Cascade Framework, Foundation, [https://mdbootstrap.com 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.
=== Metodologie di progettazione ===
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)
== Note ==
<references/>
== Bibliografia ==
* {{RivistaVG|mc|174|306-310|6|1997|titolo=Cascading Style Sheet (prima parte)}}
* {{RivistaVG|mc|175|298-302|7/8|1997|titolo=Cascading Style Sheet (seconda parte)}}
== Voci correlate ==
* [[Formattazione del testo]]
* [[Accessibilità (design)]]
* [[Browser]]
* [[Pagina web]]
* [[W3C]]
* [[HTML]]
* [[Tipografia web]]
== Altri progetti ==
{{interprogetto|preposizione=sul}}
== Collegamenti esterni ==
* {{Collegamenti esterni}}
* {{FOLDOC|Cascading Style Sheets|Cascading Style Sheets}}
* {{en}} [https://www.w3.org/Style/CSS/ Css] di [[W3C]]
* [https://curlie.org/World/Italiano/Computer/Formato_Dati/Linguaggi_di_Marcatura/Css Css] - Articoli e guide su [[DMOZ|Curlie (Ex DMoz)]]
* {{en}} [https://web.archive.org/web/20140831121826/http://www.mezzoblue.com/zengarden/alldesigns/ CSS Zen Garden] - Esempi.
* {{en}} [https://www.w3schools.com/css/default.asp Css w3schools] - Tutorial, Esempi, Reference su [[W3Schools]].
* {{en}} [https://cssoptimizer.online CSS Optimizer] {{Webarchive|url=https://web.archive.org/web/20201001040432/https://cssoptimizer.online/ |date=1 ottobre 2020 }} - Tool per ottimizzare e pulire il CSS inutilizzato.
*{{en}} [https://mdbootstrap.com CSS Framework] - Accelera il tuo sviluppo
{{Browser Internet}}
{{Linguaggi foglio di stile}}
{{Controllo di autorità}}
{{Portale|internet}}
[[Categoria:CSS| ]]
| |||