CSS: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m fix parametri template cita web |
m Annullata la modifica 139301834 di 93.40.193.237 (discussione) spam Etichetta: Annulla |
||
| (7 versioni intermedie di 7 utenti non mostrate) | |||
Riga 2:
{{Formato file
| nome = Cascading Style Sheets
| logo =
| icona =
| didascalia =
Riga 37:
Un'ulteriore questione era, nelle pagine web non standard, l'uso del tag <code><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
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
* 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 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 ==
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
;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 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 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|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=
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/ |
*{{en}} [https://mdbootstrap.com CSS Framework] - Accelera il tuo sviluppo
| |||