CSS: Image Sprites

In termini di performance delle pagine html noi possiamo ottenere risultati migliori riducendo il numero di richieste che la nostra pagina fa al server (HTTP requests).

A tal riguardo sappiamo che una pagina web con molte immagini può prendersi molto tempo per caricare, generando multiple richieste al server. Attraverso i CSS sprite (collezioni di immagini inserite all’interno di una singola immagine) noi riduciamo il numero delle richieste HTTP al server e risparmiando larghezza di banda.

… 

 

CSS: Tecniche di Image Replacement

Le tecniche di Image Replacement sono metodi css che permettono di sostituire il testo di un elemento html con una immagine di sfondo. Lo scopo è quello di rendere il sito accessibile ai programmi screen reader e ai motori di ricerca, senza rinunciare al testo con effetti grafici che di solito possono essere ottenuti solo con un’immagine.

… 

 

CSS: creare colonne della stessa altezza

Creare colonne con background colorati può essere utile per vari motivi ma anche semplicemente un modo per dare più colore alle nostre pagine. Questo però fa nascere un problema molto comune, quello di ritrovarsi colonne che non hanno uguale altezza se le varie colonne hanno contenuti di diversa lunghezza.

… 

 

CSS: bozza di layout liquido (o fluido) a 3 colonne, posizionato

E’ possibile creare colonne all’interno di layou di vario tipo con la tecnica dei float, oppure utilizzando la proprietà position (tecnica meno popolare rispetto ai float perchè comporta alcuni problemi in più: uno dei problemi tipi dei layout posizionati è il footer, la cui presenza è spesso foriera di particolari problemi).

… 

 

CSS: layout ibridi

In molti casi ci troviamo di fronte a layout ibridi che usano una combinazione di empx% come misure.

Ciò avrà un senso in casi con particolari esigenze, ad esempio se hai una sidebar che debba contenere un determinato banner con una precisa misura. In tal caso si darà alla sidebar la misura necessaria in px e si fa in modo di consentire alla colonna accanto di adeguarsi allo spazio restante.

… 

 

Il Doctype

Ogni documento html, di norma, inizia con una dichiarazione <!DOCTYPE> la quale ha la funzione di informare il browser su quale versione di HTML (o XML) verrà utilizzata per scrivere il documento.

Si tratta di una dichiarazione, e non di un tag, che va inserita come primo elemento in assoluto in un documento html, e quindi ache prima del tag <html>.

… 

 

CSS: bozza di layout liquido (o fluido) a 3 colonne, usando i float

Rispetto ad un layout liquido a 2 colonne con float le differenze sono poche.

Impostiamo i 3 elementi centrali con float a sinistra e width specificata per ognuno di essi, assicurandoci che la somma tra la misura delle varie width e dei margini non ecceda il 100%. Quindi diamo il clear al footer per tenerlo in fondo alla pagina.

… 

 

CSS: layout elastico

Il layout elastico è un tipo di layout dove la lunghezza delle linee si accoppia con la misura del testo: tali layout si espandono e si contraggono in relazione alla misura del testo; più largo è il testo più largo sarà il box che lo contiene. Vediamo le differenze con gli altri tipi di layout.

… 

 

CSS: bozza di layout liquido (o fluido) a 2 colonne, usando i float

I layout liquidi (o fluidi)  vengono creati innanzitutto specificando la larghezza in percentuale. E’ anche possibile  però omettere  del tutto le larghezze, ed in tal caso esse saranno impostate di default in auto e gli elementi andranno a riempire gli spazi disponibili della finestra o dell’elemento che li contiene.

… 

 

CSS: bozza di layout a 2 colonne, con larghezza fissa, usando i float

I layout fissi sono creati specificando i valori di width in pixel. Tipicamente, il contenuto dell’intera pagina è inserito all’interno di un div (spesso chiamato “content”, o “wrapper”, o “container”) che può essere impostato con una specifica width in px.

…