CSS: differenze tra le versioni

Versione delle 12:30, 10 lug 2023

Versione attuale delle 14:35, 23 set 2025

(24 versioni intermedie di 16 utenti non mostrate)

Riga 2:

{{Formato file

| nome = Cascading Style Sheets

| logo = CSS3_logo_and_wordmarkOfficial CSS Logo.svg

| icona =

| didascalia =

Riga 17:

| esteso_a =

| standard =

| aperto =si

| sito = www.w3.org/TR/CSS

|uniform_type_identifier=public.css}}

}}

Il '''CSSCascading Style Sheets''', (siglameglio dinoto come '''Cascading Style SheetsCSS''', (in italiano '''fogli di stile a cascata'''), in [[informatica]], è 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.

Riga 37:

Un'ulteriore questione era, nelle pagine web non standard, l'uso del tag <code>&lt;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">

Riga 59:

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.

Riga 73:

* 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]] eI CSS3 costituisconopresentano nuove possibilità e unproprietà linguaggiorispetto [[turinga completo]]CSS2<ref>{{Cita web|autore = |url = https://githubwww.comhtml.it/elitheeliguide/stupidguida-machinescss3/|titolo =CSS3: Stupidguida Machines - rule 110completa|accesso sito= HTML.it|editore lingua= it|data accesso= 2021-01-27}}</ref><ref>{{Cita web|autore = |url = httphttps://eliwww.fox-epstew3schools.incom/rule110-full.html|titolo =W3Schools RuleOnline 110Web OnLine DemonstrationTutorials|accesso = |editore = |data = 2021-01-28}}</ref>,. condizioneLe sufficientepiù perimportanti un linguaggio per essere considerato un [[linguaggio di programmazione]].sono:

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

Riga 81 ⟶ 79:

* 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-US|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-US|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-US|accesso=2021-01-28}}</ref>.

{| class="wikitable"

Riga 224 ⟶ 222:

|Bordi decorati

|border-image

|#border {(border-image: url(border.png) 27 27 27 27 round round; }

|-

|Ombre dei contenitori

Riga 290 ⟶ 288:

|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-US|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-US|accesso=2022-02-07}}</ref>

|writing-mode: ''"valore"'';

text-orientation: ''"valore"'';

Riga 517 ⟶ 515:

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

Riga 715 ⟶ 713:

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

Riga 809 ⟶ 806:

==== 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-US|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=https://web.archive.org/web/20071229140059/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|sitodata=|accesso=2021-01-27|dataarchivio=29 dicembre 2007|urlarchivio=https://web.archive.org|data=/web/20071229140059/http://blog.netscape.com/2007-/12/28/end-29|accesso=2021of-01support-27for-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-us|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

Riga 873 ⟶ 870:

<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 ==

Riga 883 ⟶ 880:

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 (informatica)|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).

Riga 899 ⟶ 896:

</syntaxhighlight>

=== [[Tipo di carattere|Font]] ===

Non usare troppi [[Tipo di carattere|font]] incorporati (''@font-face'' e [[Google Fonts]]).

=== Numero di file ===

Riga 921 ⟶ 918:

== 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-US|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 ==

Riga 933 ⟶ 930:

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;

}

Riga 1 005 ⟶ 1 002:

== 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-US|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=|data=|accesso=2021-02-17|dataarchivio=19 agosto 2010|urlarchivio=https://web.archive.org/web/20100819062059/http://www.jori-koolstra.nl/DCSS/dcss.txt|titolourlmorto=Wayback Machine|sito=web.archive.org|data=2010-08-19|accesso=2021-02-17sì}}</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]].

Riga 1 088 ⟶ 1 085:

== 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/ |datedata=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}}

{{Estensioni}}

{{Controllo di autorità}}

{{Portale|internet}}