Utilizzare gli stili css per rendere standard i siti Internet

I CSS (Cascading Style Sheets - fogli di stile a cascata) sono una tecnologia che permette di dare stile alle pagine Internet come per esempio l'assegnazione di un colore al testo o la disposizione di elementi grafici nei siti web.

I CSS possono quindi controllare gli attributi stilistici e tipografici del testo e sono uno strumento potente, flessibile e preciso per dominare il layout di un sito Internet.

I fogli di stile permettono ai designer di risparmiare tempo nello sviluppo di soluzioni web-based e garantiscono integrità e qualità delle pagine web: i CSS sono utilizzabili da tutti i sistema di navigazione (browser) comunemente diffusi.

Il W3C ha creato i CSS per definire delle regole standard che permettano ai designer di definire gli attributi dei contenuti secondo un linguaggio comune e di semplice applicabilità.

I CSS vengono utilizzati per sviluppare qualsiasi tipo di soluzione on-line e off-line: da sistemi Intranet come gestionali o back-office a portali Internet di grandi dimensioni.

I fogli di stile vengono utilizzati assieme al linguaggio di codifica XHTML (ampiamente utilizzato da Siti Ottimizzati) per separare la struttura di un sito dalla sua presentazione: i siti costruiti con questa metodologia sono più scalabili, semplici da aggiornare, accessibilità da parte degli utenti, veloci nel caricamento e quindi più performanti in ambito di posizionamento nei motori di ricerca.

I principali vantaggi dei CSS sono:

  • aumento dell'acessibilità delle pagine
  • ridurre la quantità di codice presente nelle pagine incrementando quindi la velocità di scaricamento di un sito Internet: i contenuti arrivano prima e sono prima disponibili.
  • il server che fornisce le informazioni deve leggere meno dati poichè le pagine sono più scariche: si ha un minore consumo delle risorse hardware
  • riduzione dei tempi di progettazione e mantenimento di un sito web perchè la logica strutturale è separata da quella di presentazione (i contenuti)
  • maggiore stabilità ed efficenza del codice: il codice è più leggibile, aggiornabile e gestibile.
  • aumento della possibilità di concentrarsi sul contenuto della pagina piuttosto che sulla sua struttura
  • miglioramento dell'interoperabilità tra vari sistemi e browser come definito nelle specifiche W3C

LINK:

- Eric Meyer
- W3C/css

LIBRI

- Eric Meyer on Css
- CSS Pocker Reference (Eric Meyer)

Includere gli stili in una pagina web

Una pagina Internet utilizza gli stili CSS per darsi attributi e proprietà stilistiche e per separare il contenuto dalla logica di presentazione.

Esistono 3 metodi per implementare i fogli di stile CSS in una pagina web, ovvero utilizzando stili:
- esterni (collegati o importati)
- incorporati
- inline

Metodo di inclusione CSS esterno collegato:

<lynk rel="stylesheet" href="/percorso_della_cartella/stile.css" type="text/css" media="all">

Metodo di inclusione di più CSS esterni tramite @import:

<style type="text/css" media="all">
@import "/percorso_della_cartella/stile1.css";
@import "/percorso_della_cartella/stile2.css";
@import url("http://www.miosito.it/percorso_della_cartella/stile2.css");
</style>

Metodo di inclusione CSS incorporato:

<style type="text/css" media="all">
<!--
body{
//qui va il codice
}
-->
</style>

Metodo di inclusione CSS inline:

<h1 style="color:red;">Titolo di pagina</h1>

I primi due metodi citati sono preferiti perchè permettono di lavorare su file esterni a se stanti: il codice delle pagine XHTML/HTML diventa molto pulito ed organizzato.

L'inclusione di tipo incorporato è utile nel momento in cui si vuole modificare una sola pagina web. Il codice CSS scritto con il metodo dell'inclusione interviene solo in punti specifici di un sito web su singole pagine.

Il terzo metodo, quello inline, viene utilizzato come una sorta di "coltellino svizzero": interviene in punti molto specifici di una pagina web modificandone una porzione.

Il miglior design basato su fogli di stile tiene conto di questi 3 metodi di inclusione, a seconda del caso specifico. Non esiste un metodo migliore per includere un file CSS: tutti i metodi sono validi. Il metodo più usato è il primo perchè permette di gestire globalmente il layout del sito utilizzando un file a se stante: questo permette di avere una visione globale del foglio di stile creando varianti dello stesso per specifici utilizzi.

CSS a seconda del browser utilizzato

Internet Explorer ha la capacità, a differenza di Mozilla/Firefox, di leggere ed eseguire del codice html innestato nei commenti condizionali.

Partendo da questo presupposto possiamo creare dei sistemi di inclusione CSS personalizzati per diversi browser in questo modo:

<!--[if lte IE 6]>
<link href="/css/stile_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Questa riga

<!--[if lte IE 6]>

dice sostanzialmente al browser: "se sei explorer 6 sovrascrivi tutte le regole del precedente CSS con quelle contenute in quest'altra versione CSS".

I commenti condizionali sono utili quindi per personalizzare il layout con i CSS ottimizzandolo per diversi tipi di browser: è noto infatti che tutti browser interpretano il codice CSS e l'html maniera diversa gli uni dagli altri.

Un approfondimento sui commenti condizionali è reperibile qui

siti con css, css siti Internet, vantaggi dei css, siti Internet con i css, Cascading Style Sheets, progettare un sito con i CSS, posizionamento Google realizzare siti con XHTML e CSS. posizionamento nei motori di ricerca, indicizzazione motori di ricerca