Utente:Sassospicco/bozza CSS: differenze tra le versioni

Versione delle 21:26, 20 dic 2005

Versione attuale delle 00:40, 24 giu 2016

(30 versioni intermedie di 8 utenti non mostrate)

Riga 1:

<div class="toccolours itwiki_template_avviso" style="margin-bottom: 0.5em;border-radius: 0.5em;-moz-border-radius: 0.5em;">

{| style="valign:center; background-color: #EEF8FF;"

| style="padding: 0.4em;"| [[Image:Symbol_opinion_voteNuvola_apps_error.svgpng|25px]]

|''Questa pagina è stata pubblicata alla voce '''[[Foglio di stile]]''', per favore non fare modifiche qui, ma alla pagina suddetta. Grazie.''

|''Questa pagina è un ambizioso (e probabilmente fallimentare) tentativo di produrre una nuova versione di "[[Foglio di stile]]", che è stata sospettata di violazione di copyright. Vi prego di non modificarla, avrete modo di farlo con tutta tranquillità quando e se la proporrò come alternativa dell'attuale articolo.''

| style="padding: 0.4em;"| [[Image:Nuvola_apps_important.svg|25px]]

|}

</div>

I '''fogli di stile a cascata''' (dall'inglese '''CSS''' ''Cascading Style Sheet'') sono il linguaggio definito dal [[W3C]] (''World Wide Web Consortium'') per '''definire l'aspetto''' delle [[pagine web]]. I fogli di stile sono applicati soprattutto a pagine scritte in [[HTML]] e [[XHTML]], tuttavia si prestano a qualsiasi file [[XML]], compresi [[SVG]] e [[XUL]]. La loro creazione, avvenuta nel [[1996]] si è resa necessaria per '''separare i contenuti dalla [[formattazione]]''' e imporre una programmazione più chiara e facile da utilizzare, sia per l'autore che per l'utente.

== Motivi ed evoluzione dei CSS ==

Riga 21 ⟶ 22:

Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione e così il loro uso è diventato massiccio. Tuttavia questi tag presentano '''tre problemi''':

#Il primo problema è costituito dalla lunghezza di questi 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_Bit (informatica)#Il_Il .27.27bit.27.27_come_cifra_binaria27 come cifra binaria|bit]]) in un rapporto che spesso raggiunge il '''200%'''. 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 comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i nuovi '''[[Computer_palmareComputer palmare|computer palmari]]''' e gli [[smartphone]]. Queste pagine infatti sono progettate per schermi con risoluzione minima ''800x600 pixel''. I palmari, che hanno 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 e l'utente dovrà tentare di "decodificarla", operazione spesso molto scomoda.

Si tende ad evidenziare anche un ulteriore questione, nelle pagine web non standard, ovvero l'uso del tag <code>&lt;table></code> (le '''tabelle''') per realizzare l'impaginazione delle pagine web. Questo viene considerato dai puristi come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. In realtà l'unico svantaggio serio di questo sistema è l'incredibile peso delle pagine, come già indicato al problema 1.

Riga 41 ⟶ 42:

Per includere nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel [[1998]] il W3C '''emanò le specifiche CSS 2''' e nel [[2004]] le specifiche '''CSS 2.1'''. I CSS 2 sono la naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il problema tre, con la possibilità di creare fogli di stile separati per i dispositivi portatili. Anche il problema due è ormai pienamente risolvibile, scrivendo una pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente con i CSS per impaginarla.

Con la comparsa di [[Internet_ExplorerInternet Explorer|Internet Explorer 5]], di [[Mozilla Firefox|Firefox]] e di [[Opera_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.

=== CSS 3 ===

Le specifiche CSS 3 non sono state ancora rilasciate, sebbene il W3C pubblichi costantemente [http://www.w3.org/Style/CSS/current-work informazioni] sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di alcuni bachi di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per realizzare i '''bordi arrotondati''' che la cui realizzazione affligge i webdesigner da tempo.

== Il codice CSS ==

=== Inserire il codice ===

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

*Inserendo nel tag <code>&lt;head></code> della pagina un [[link|collegamento]] ad un foglio di stile '''esterno''', cioè un file contrassegnato dall'estensione ''.css'' come negli esempi seguenti:

<html>

<head>

Riga 75 ⟶ 77:

</head>

=== Una regola CSS ===

Le regole CSS sono strutturate secondo il seguente schema:

''selettore'' {

Riga 100 ⟶ 103:

==== Identificatori ====

Gli identificatori (comunemente '''ID'''): applicano la regola a quell'elemento della pagina che presenta la proprietà <code>id="nome_identificatore"</code>. Solo un elemento in tutta la pagina può corrispondere ad un identificatore. La sintassi CSS è la seguente:

#nome_identificatore {

[...]

Riga 179 ⟶ 182:

* ''border''. Definisce il bordo di un elemento. È la somma delle proprietà più specifiche ''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''.

* ''float''. Questa proprietà definisce un blocco ''[[Flottante_Flottante (informatica)|flottante]]'', ovvero che permette la disposizione di altri elementi ai suoi lati.

* ''font''. Definisce le proprietà del carattere. È la somma di proprietà più specifiche tra cui ''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.

Riga 186 ⟶ 189:

=== Valori ===

ISe valorinon chespecificata, una proprietà assume i valori predefiniti di ogni browser, altrimenti può assumere possonouno dei essereseguenti:

*''inherit''

*''auto''

*numero

*numeri

*percentuale

*percentuali

*[[RGB|colore]]

*URL

*[[URI]]

*colori

*[[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'' indica che il browser deve utilizzare il suo valore di default.

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;

padding: 0;

}

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

#ff6600

#f60

rgb(255,102,0)

rgb(100%,40%,0%)

L'[[URL]] viene indicato nelle forme

url(<nowiki>http://esempio.it/file.html</nowiki>)

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

I CSS permettono di indicare nella proprietà ''font-family'' più di un font. In questo modo il browser utilizzerà il primo che troverà installato sul [[sistema operativo]]. La dichiarazione utilizza questa sintassi:

p {

font-family : Arial, Verdana, sans-serif;

}

== Browser e CSS ==

Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia esistono browser che si avvicinano molto a questo risulatato ed altri che invece ne sono molto lontani. La lista che segue è di [[motore di rendering|motori di rendering]] perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS.

*Trident ([[Internet Explorer]] e AOL Browser): Internet Explorer è attualmente il browser più diffuso e il suo supporto molto scarso dei CSS è probabilmente il maggior freno al loro sviluppo. Explorer presenta infatti molti [[Bug (informatica)|bachi]] nella formattazione delle pagine, che le rendono diverse da quelle ottenute con altri browser. In aggiunta ai bachi, Explorer non supporta assolutamente alcune porzioni delle specifiche CSS 2. Le mancanze più gravi sono l'assenza di supporto per i '''contenuti generati''' e per il '''selettore di attributo'''. Gli unici strumenti a disposizione dei [[web designer]] sono i ''commenti condizionali'', una particolare funzionalità di Explorer che consente di inviare istruzioni solo a questo browser. La sintassi dei commenti condizionali è la seguente:

&lt;!--'''[if IE]>'''

''codice esclusivamente per Internet Explorer''

'''&lt;![endif]'''-->

:poichè <code>&lt;!--</code> introduce di norma un commento, i browser diversi da Explorer 5.0 o superiori non interpretano il codice. I commenti condizionali permettono di specificare un foglio di stile specifico per Internet Explorer nel modo che segue:

&lt;!--[if IE]>

<link rel="stylesheet" type="text/css" href="'''foglio_di_stile_per_IE.css'''">

&lt;![endif]-->

*[[Gecko]] ([[Mozilla Firefox|Firefox]] e [[Netscape Navigator|Netscape]]): Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso utilizzato nella verifica della resa delle pagine web.

*[[Presto (motore di rendering)|Presto]] ([[Opera (browser)|Opera]]): anche Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri.

*[[KHTML]] ([[Safari (browser)|Safari]] e [[Konqueror]]): KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una parziale interpretazione anche dei CSS 3.

== CSS sui diversi dispositivi ==

Una utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi ('''media''') specificati dall'autore. La sintassi (X)HTML da utilizzare è la seguente.

<link rel="stylesheet" type="text/css" href="foglio.css" '''media="screen"'''>

Il codice precedente associa il foglio di stile solo (in teoria) ai browser standard per computer desktop e portatili. I valori dell'attributo media sono i seguenti:

*screen ([[Desktop (computer)|desktop]] e [[portatile|laptop]])

*handheld ([[PDA]] e [[smartphone]])

*print ([[Stampante|stampanti]])

*braille (browser braille)

*embossed (stampanti braille)

*projection (proiezioni)

*speech o aural (sintetizzatori vocali)

*tty (telescriventi)

*tv (televisioni)

*all (tutti i dispositivi)

Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto '''i primi tre sono supportati''' in maniera sufficiente. Il media screen è quello standard cui si fa riferimento. Il media handheld è specifico per i palmari, ma alcuni browser per palmari tentano, spesso con scarso successo, di interpretare anche i fogli marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo che quello per il palmare e poi usare quest'ultimo per sovrascrivere le istruzioni del primo. Il media print codifica la pagina per la stampa, è supportato discretamente. Un supporto completo è garantito da Opera.

== 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>&lt;title></code> come nell'esempio che segue:

<link rel="stylesheet" type="text/css" href="foglio_preferito.css" '''title="Esempio1"'''>

A questo punto possiamo 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 offre questa possibilità quindi è necessario creare uno script [[JavaScript]] che svolga la funzione di sostituire i fogli. Il codice è stato pubblicato la prima volta su {{en}} [http://www.alistapart.com/articles/alternate www.alistapart.com] ed è ora comunemente utilizzato. Tuttavia se questo script è facile da mettere in opera per gli sviluppatori, richiede un browser moderno con un buon supporto del [[DOM]], oltre che avere attivati sia Javascript e i cookie. Un sistema più complesso ma molto più robusto può essere uno script [[lato server]] come [[PHP]]. Un esempio è disponibile sempre sullo [http://www.alistapart.com/articles/phpswitch/ stesso sito].

== Voci correlate ==

*[[Accessibilità (informatica)|Accessibilità]]

*[[Browser]]

*[[Pagina web]]

*[[W3C]]

== Collegamenti esterni ==

* {{en}} [http://www.w3.org/TR/CSS1 Specifiche ufficiali CSS 1]

* {{en}} [http://www.w3.org/TR/CSS21 Specifiche ufficiali CSS 2.1]

* {{en}} [http://www.w3.org/Style/CSS/current-work Progetto CSS 3]

* {{en}} [http://jigsaw.w3.org/css-validator/ Validatore CSS]

* [http://www.html.it/css/ Guida ai CSS] di html.it

* [http://www.constile.org constile.org] Sito dedicato all'uso dei CSS

* [http://lau.csi.it/risorse/CSS2/index.shtml Lista delle proprietà CSS2 con descrizione delle funzionalità, valori e supporto dei browser.]

<nowiki>{{Link_AdQ|en}}</nowiki>

<!-- [[Categoria:Linguaggi di markup]]-->

<!-- [[Categoria:Internet]]-->

<!-- [[Categoria:Informatica]]-->

[[ar:صفحات الطرز المتراصة]]

<!-- Il codice della pagine non standard, rappresenta quella che è stato definita una '''zuppa di codice'''. Una zuppa di codice è un codice che contiene elementi non validi (come il tag <code>&lt;marquee></code>), elementi usati per uno scopo diverso da quello per il quale sono stati creati (come il tag <code>&lt;table></code>), elementi usati solo per le loro capacità di formattazione e non per il loro scopo originario (come il tag <code>&lt;h5></code> annidato dentro un <code>&lt;h1></code>). -->

[[bs:CSS]]

[[cs:CSS]]

[[da:CSS]]

[[de:Cascading Style Sheets]]

[[en:Cascading Style Sheets]]

[[eo:CSS]]

[[es:Hojas de estilo en cascada]]

[[et:CSS]]

[[fi:CSS]]

[[fr:Feuilles de style en cascade]]

[[he:Cascading Style Sheets]]

[[hu:CSS]]

[[id:CSS]]

[[is:Cascading Style Sheets]]

[[ja:Cascading Style Sheets]]

[[ko:CSS]]

[[lt:CSS]]

[[nl:Cascading Style Sheets]]

[[nn:Stilark]]

[[no:Cascading Style Sheets]]

[[pl:Kaskadowe arkusze stylów]]

[[pt:Cascading Style Sheets]]

[[ro:Cascading Style Sheets]]

[[ru:CSS]]

[[simple:CSS]]

[[sk:Kaskádové štýly]]

[[sl:CSS]]

[[sv:CSS]]

[[th:Cascading Style Sheets]]

[[tr:CSS]]

[[vi:CSS]]

[[zh:CSS]]