CSS: differenze tra le versioni

Versione delle 17:22, 17 mar 2025

Versione attuale delle 14:35, 23 set 2025

(3 versioni intermedie di 3 utenti non mostrate)

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

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

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/ |datedata=1 ottobre 2020 }} - Tool per ottimizzare e pulire il CSS inutilizzato.

*{{en}} [https://mdbootstrap.com CSS Framework] - Accelera il tuo sviluppo