CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Etichetta: Annullato |
m clean up, replaced: lingua=en-GB → lingua=en, |lingua=it-IT → |lingua=it (3), |date= → |data= |
||
| (11 versioni intermedie di 9 utenti non mostrate) | |||
Riga 2:
{{Formato file
| nome = Cascading Style Sheets
| logo =
| icona =
| didascalia =
Riga 17:
| 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]].
Riga 31:
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.
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
* 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]
* 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
{| class="wikitable"
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
|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 808 ⟶ 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
==== 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
== Il supporto dei Browser ai CSS ==
Riga 818 ⟶ 816:
;[[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
{{cita web
|url=http://www.quirksmode.org/css/condcom.html
Riga 872 ⟶ 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 882 ⟶ 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.
===
{{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 898 ⟶ 896:
</syntaxhighlight>
===
Non usare troppi [[Tipo di carattere|font]] incorporati (''@font-face'' e [[Google Fonts]]).
=== Numero di file ===
Riga 920 ⟶ 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
== Acid3 ==
Riga 932 ⟶ 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 004 ⟶ 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
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 092 ⟶ 1 090:
* {{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/ |
*
{{Browser Internet}}
| |||