CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m →CSS per la stampa: Eliminato il collegamento a "La Stampa" |
m →Selettori: fix esempio |
||
| (6 versioni intermedie di 5 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 81:
* 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:
|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 811:
==== 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
== Il supporto dei Browser ai CSS ==
Riga 818:
;[[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 882:
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:
</syntaxhighlight>
===
Non usare troppi [[Tipo di carattere|font]] incorporati (''@font-face'' e [[Google Fonts]]).
=== Numero di file ===
Riga 920:
== 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:
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:
== 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]].
| |||