CSS: differenze tra le versioni

Versione delle 14:22, 16 gen 2024

Versione delle 11:28, 16 mar 2024

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

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