Più stile nei fogli di Stile

3 maggio 2017, by Alessandro Filira SHARE

Quando si realizza un sito web o una pagina statica per la visualizzazione di contenuti nel web si pensa subito a quale linguaggio utilizzare (php, html, javascript..) e a come poter implementare la soluzione adottata.
Le soluzioni più comuni per la realizzazione di progetti web non troppo complessi sono i linguaggi HTML e CSS.
Il codice HTML viene usato per strutturare il contenuto mentre i CSS per formattare la struttura del contenuto stesso.
Vi sono poi tre modi per far interagire il nostro html con i fogli di stile: il primo metodo consiste nell’inserimento del tag “style” nel file “.html” all’interno del tag head.
Il secondo metodo prevede l’inserimento in-line nei relativi tag del body mediante l’attributo “style”.
Infine, ultimo metodo, migliore rispetto agli altri, è la creazione di un file esterno con estensione, appunto, “.css”, nel quale inserire tutti i nostri selettori con le relative proprietà.
Quest’ultima tecnica ha molti vantaggi poiché permette:

  • – il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile
  • – l’applicazione di regole css diverse in base al tipo di media (computer, tablet, smartphone, stampa..)
  • una corretta ottimizzazione del codice.

 

Ma come poter ottimizzare completamente i nostri fogli di stile?

Una delle regole principali è quella di usare le shorthands o scorciatoie, ovvero racchiudere nella stessa proprietà dei valori multipli; il loro uso è decisamente vantaggioso in quanto consentono di snellire molto le regole del codice e di conseguenza l’intero foglio di stile.

Quando si scrive un foglio di stile spesso si formatta in maniera tale che ogni proprietà occupi una riga del foglio. Così facendo qualora si dovesse riprendere in mano il codice non si fatica a trovare il punto esatto in cui intervenire con evidente risparmio in termini di tempo. Purtroppo però questo metodo di scrittura non è del tutto ottimizzato in quanto ogni carattere “a capo” occupa spazio che rallenterà poi il caricamento del nostro file.

Per ovviare a questo problema esistono molti siti che comprimono per noi i css e li ottimizzano accorciando le notazioni, riducendo il testo inutile, unendo i selettori, comprimendo i codici di colore e le proprietà dei font, rimuovendo backslashes & new lines e scartando le proprietà non valide.
Uno dei migliori siti per comprimere i css è www.codebeautifier.com/.
Certo questo è solo una piccola procedura da fare per ottimizzare il vostro sito, ma chi ben comincia è già a metà dell’opera!!

About Alessandro Filira
Ehmmm.....
Caricamento in corso...
Hai un progetto da condividere con noi?
Richiedi un preventivo gratuito