CSS: differenze tra le versioni

Versione delle 11:29, 17 mar 2022

Versione delle 07:29, 29 mag 2022

Riga 75:

[[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|sito=www.w3schools.com|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 291:

|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|sito=www.w3.org|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 687:

[[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|sito=www.sitepoint.com|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">

Riga 839:

;[[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|sito=web.archive.org|data=2007-12-29|accesso=2021-01-27}}</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|sito=www.microsoft.com|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 893:

<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|sito=www.w3schools.com|accesso=2021-01-28}}</ref>.

== Riduzione delle chiamate al server ==

Riga 1 042:

== 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|sito=www.w3schools.com|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|sito=www.w3.org|accesso=2021-08-23}}</ref>.

=== Esempi ===