Progettato in HTML5, questa guida parla di tutto: a partire dal significato di “Internet”, fino a tutto il mondo dell’open source e dei browser moderni.

Articoli correlati:

1. Cheat Sheets per il Web Design
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. CSS3: compatibilità cross-browser…da oggi!

AI⇒Canvas è un plug-in che offre infatti le opzioni per il disegno, l’animazione e la codifica, come "eventi" JavaScript in modo da poter costruire applicazioni web interattive ben progettate basate sul tag canvas.
Lo scopo di Ai⇒Canvas è di accelerare lo sviluppo del tag HTML5 canvas: esso infatti, partendo da un file vettoriale, genera ed esporta codice HTML e JavaScript che può essere subito copiato nella propria applicazione ed eventualmente ampliato in un secondo momento.

Cominciamo a usare HTML5 Canvas

Per installare Ai⇒Canvas, scaricare la versione adatta al prorio sistema operativo (per Windows o OS X), ed estrarre il file Ai2Canvas.aip nella cartella plug-in di Adobe Illustrator. Assicurarsi di riavviare Illustrator se è già in esecuzione. Una volta fatto questo, possiamo scaricare un file illustrator di esempio, e salvare ciascun elemento vettoriale in un livello separato.

Canvas in inglese vuol dire tela, per incomincare fin da subito a "dipingere" e per testare fin da subito le potenzialità del plugin, è sufficiente cambiare il nome di ciascun livello del file .AI come se fosse una funzione JavaScript, per esempio: "nomeElemento();". Possiamo vedere fin da subito il risultato scegliendo File / Esporta, selezionare " <canvas> " come tipo di file, quindi fare clic su Salva per visualizzare il risultato nel browser.

Animazioni e Canvas: ecco un semplice esempio

Ogni livello di disegno all’interno del file .AI può essere ruotato, ridimensionato, e sbiadito, configurando le impostazioni di animazione. Le impostazioni di animazione controllano come le proprietà cambiano nel tempo, e ogni impostazione è dotata di otto possibili settaggi (si veda la documentazione estesa per ulteriori dettagli). Le impostazioni includono la direzione dell’animazione, la sua durata complessiva, invertire o no la direzione, una funzione di interpolazione, e un ritardo iniziale prima che l’animazione abbia inizio.

Quando l’animazione riguarda una forma, è spesso utile riposizionare il punto di origine (il luogo in cui gli assi X e Y si intersecano a 0, 0). Ai⇒Canvas rende facile spostare l’origine di ogni livello in modo che le animazioni siano esportate correttamente.

Per esempio, rinominiamo il livello nomeElemento(); in nomeElemento(origine: -1.5, 0.5);. I due valori indicano uno spostamento rispettivamente sull’asse orizzontale e su quella verticale: in particolare essi posizionano il punto di origine a una volta e mezzo l’intera larghezza dell’oggetto vettoriale verso sinistra (al di fuori dei confini dell’oggetto, verso sinistra), in verticale a metà della sua altezza.
Per aggiungere una seconda proprietà, inserire un punto e virgola prima della nuova proprietà e il suo valore. Cambiare il nome del livello in nomeElemento(origin: -1.5, 0.5; rotate-direction:cw);, questa prprietà imposta una rotazione all’animazione, che imprime all’oggetto un movimento in senso orario ("CW significa ClockWise, senso orario; per imposare in senso antiorario scrivere AW, AnticlockWise ").

Come utilizzare il tag Canvas su Internet Explorer 6+?

Ecco come essere sicuri che il tag canvas, ad oggi non supportato da IE precedenti alla versione 9, sia interpretato da tutte le versioni, dalla 6 alla 8.
Ecco come procedere: per prima cosa, scarichiamo la versione compatta di explorercanvas e colleghiamola al file contenente il canvas, inserendo la chiamata alla libreria all’interno dei commenti condizionali per InternetExplorer, così:

<!--[if IE]><script type="text/javascript" src="cartellaScript/excanvas.compiled.js"></script><![endif]--> 

Purtroppo però, ExCanvas non permette a IE di vedere le animazioni costruite con canvas.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tavola degli elementi interattiva!

Creiamo le ancore

Una tipologia di siti web che sta recentemente prendendo piede è il "Vertical Portfolio", cioè un sito web di una sola pagina che si sviluppa in verticale.
Sostanzialmente, per creare questo effetto, si fa uso degli ancoraggi interni alla pagina web: utilizzando l’attributo name specifichiamo il nome dell’ancoraggio e impostiamo così il segnalibro all’interno del documento HTML.
Questi segnalibri non vengono visualizzati in alcun modo particolare, sono invisibili all’utente, ma servono per spostare la pagina fino a quel determinato punto.
Ecco un esempio:

<a href="#nome-della-sezione">Vai a Nome della sezione</a>
...
<h2><a name="nome-della-sezione"></a>Nome della sezione</h2>
<p>Testo della sezione</p>

jQuery: come rendere fluido lo scorrimento delle pagine web?

Notiamo che il passaggio da una sezione a un’altra non è fluido.
Per ottenere questo effetto, cioè l’effetto scorrimento verticale morbido, possiamo usare la libreria JavaScript jQuery.
Ecco qual’è il codice da inserire:

$('a[href*=#]').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body').animate({scrollTop: targetOffset}, 1000);
  return false;}
  }
 });

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. jQuery: imparare le basi con toggle. Mostra e nascondi con stile!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Il grafico tratteggia le principali novità e tutte le caratteristiche del nuovo standard, mettendo anche a confronto i maggiori browser per verificare quali tra essi sia già pronti per affrontare la rivoluzione.

Articoli correlati:

1. Internet e il web: cosa è? Come funziona?
2. HTML5: tag nuovi e anteprima delle novità
3. HTML5: tavola degli elementi interattiva!

Novità in HTML5

HTML5 introduce nuove caratteristiche per uno sviluppo più facile delle applicazioni web improntate alla multimedialità e una gestione più sofisticata dei form, assieme a una presentazione più semantica del codice: nuovi elementi tag, nuovi input type, nuovi attributi ed eventi, nuove API.
Ecco di seguito una lista di tutte le principali novità e le anteprime:

1. Nuovi elementi HTML5

Elementi strutturali più semantici

• article contrassegna gli articoli di una sezione
• aside delimita informazioni aggiuntive
• footer rappresenta la sezione conclusiva della pagina
• header contiene i contenuti principali eventualmente raggruppati con hgroup
• nav raggruppa gli elementi di navigazione principale
• section distingue le sezioni di un documento, come se fossero capitoli di un libro

e torna nell’HTML, dopo essere stato deprecato dalla versione 4.01, il tag

• menu usato per una specifica lista di comandi

Interattività

• canvas permette il rendering dinamico delle bitmap
• command definisce un command button
• details rappresenta informazioni aggiuntive

Maggiore semantica in pagina e lingue asiatiche

• figure raggruppa elementi multimediali e le loro didascalie
• mark mette in risalto una porzione di testo rilevante
• rp, rt e ruby sono usati per le parentesi e per le annotazioni di Ruby

Multimedialità nativa

• audio consente la riproduzione audio nativa nel browser
• embed inserisce una applicazione esterna
• source specifica più sorgenti di un video o di un audio
• video definisce un video

Form migliorati

• datalist fornisce una sorta di auto-complete
• keygen definisce una coppia di keygen generate
• output rappresenta il risultato di un calcolo

Tempo e unità di misura

• meter definisce le unità di misura
• progress indica lo stato di avanzamento di un compito
• time specifica il formato di una data

Alcuni tag già definiti nella versione 4.01, in HTML5 assumono nuove proprietà. Ecco i principali nel dettaglio:

• il tag a potrà contenere elementi a livello di blocco, è potrà essere privo dell’attributo href, per essere usato come "link placeholder"
• l’elemento address potrà essere applicato a una specifica sezione section o articolo article
• l’elemento b verrà utilizzato solo per rendere il testo più marcato, senza particolari valenze keyword-SEO
• blockquote diventa un elemento sectioning root
• l’elemento dl rappresenta un elenco di associazioni composto da zero o più coppie nome-valore
• i tag h1, h2… possono essere ripetuti all’interno di ogni sezione della pagina
• l’elemento html potrà avere un proprio id
• il tag i verrà usato per indicare il testo da pronunciare con un particolare tono di voce, o testo che appartiene a un linguaggio tecnico, o una frase che nel contesto da cui è presa viene rappresentata con testo "italic"

2. Nuovi input type

Ecco la lista dei campi input si potranno utilizzare con HTML5:

• color
• date
• datetime
• datetime-local
• email
• number
• range
• search
• tel
• time
• url
• week

Articoli correlati:

1. HTML5: tavola degli elementi interattiva!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. Cosa è HTML5? Ecco una infografica che lo spiega!

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

• descrivere il contenuto della pagina (HTML semantico)
• specificare la presentazione di tale contenuto (CSS)
• controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

<a href="#" onclick="alert('Hello World');">click</a>

e il codice javaScript all’interno dell’attributo href:

<a href="javascript:alert('Hello World');">click</a>

È poi possibile inserire snippets di codice all’interno del tag script:

<script type="text/javascript">
	alert("Ciao mondo!");
</script>  

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

<script src="script.js" type="text/javascript"></script> 

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dove inserire il link al core di jQuery? Qui sotto!</title>
<meta name="description" content="jQuery Tutorial" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

<script type=”text/javascript” src=”scripts/mioScript.js”></script>

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:

<div id="menu">
	<h2 class="trigger">
    <a href="#">Prima Voce del Menù</a>
	</h2>	<div class="container">
	 <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.</p>
	</div>
</div>

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. jQuery SmoothScroll: effetto scorrimento verticale morbido!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Le Cheat Sheet sono uno strumento di riferimento che fornisce semplici, brevi istruzioni per realizzare un compito specifico.

Ecco quindi di seguito una selezione di riferimenti rapidi per numerosi linguaggi e tecnologie web, gratuiti e stampabili:

ASCII – Caratteri speciali

Character Entity References in HTML 4 and XHTML 1.0
HTML: Special Characters
Decimal ASCII code, Reference, URL code and HTML entity
HTML special character reference
HTML – Special Entity Codes
Using HTML Symbol Entities

Colori e web

Coloreminder.com; find colors palette easily and inspiration
RGB Hex Colour Chart
Web safe color chart
The browser safe colors

InDesign CS5

Indesign Keyboard Shortcuts

CSS

CSS2.1 Sheet
CSS3 Sheet
CSS Shorthand Guide
CSS Property Index
CSS Cheat Sheet (V2)
CSS Cheat Sheet: Inheritance, Cascade, Specificity
CSS Shorthand Cheat Sheet
CSS Properties and Values
Esempi di utilizzo di CSS
Will the browser apply the rule(s)?

CSS3

Tutto quello che c’è da sapere su CSS3

Google

Google Guide Quick Reference: Google Advanced Operators
The Google Cheat Sheets: Everything You Need To Know

Freelance

Esempio di contratto per prestazione occasionale
Pubblicare un sito web: verifiche e controlli preventivi

HTML 5

HTML 5 Visual Cheat Sheet (Reloaded)
HTML 5 Cheat Sheet

HTML/XHTML

HTML Cheat Sheet
HTML Codes Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
HTML Cheat Sheet: quick reference guide
A Simple Guide To HTML
Browser Compatibility Master Table
HTML/XHTML in one page

jQuery

jQuery 1.4 Cheat Sheet
Woork: jQuery Visual Cheat Sheet

Lorem Ipsum generators

Render dummy text in English, French, German…

Mac OS

The OS X Keyboard

Programmi Adobe

Dreamweaver CS4: Cheat Sheet and shortcuts
Photoshop: Toolbox Reference
Flash CS4: PC Shortcuts

SEO

Web Developer’s SEO Cheat Sheet

Tipografia e Font

The New CSS Font-Family List
Approximate Conversion from Points to Pixels
PX to EM conversion made simple.
Compare screen type
16 Gorgeous Web Safe Fonts To Use With CSS
Top 10 (Web Safe) Blogging Fonts
How safe are Web-safe Font Families really? Font preview

UI and wireframing

Sketching & Wireframing kit free set
UI and wireframing tools
Browser Safe Area

Windows

Alt Key + Numeric Codes

WordPress

WordPress Cheat Sheet
WordPress Help Sheet in Italiano

Cheat Sheet per tutto, tutte insieme!

All cheat sheets, round-ups, quick reference cards.

Articoli correlati:

1. Internet e il web: cosa è? Come funziona?
2. HTML5: tavola degli elementi interattiva!
3. Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità

In più vogliamo utilizzare il minor numero di immagini possibile (tecnica della “sprite image” e “sliding door”), avere codice più semantico possibile, e avere la possibilità di bordi arrotondati.

Ecco la pagina di esempio.

Esempio css bottoni espandibili con una sola immagine

Ed ecco il listato html:

<a href="#" target="_self"><span>Testo del bottone</span></a>

Ecco come settare il css:

1) al link associamo come background l’immagine, posizionata a destra (attenzione: non è possibile utilizzare questa tecnica con immagini png):

a.button {
background: transparent url(bg_button.gif) no-repeat scroll
top right;
font: bold 12px arial, sans-serif;
float:left; /* la proprietà float è necessaria, può essere settata
anche in right*/
height: 24px;
margin:15px 0 0 0;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

2) allo span associamo come background l’immagine, che si posizionerà normalmente a sinistra:

a.button span {
background: url(bg_button.gif) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
color: #FFF;
}

Per modificare il comportamento al mouse-over:

a.button:hover {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
color: #FFF;
font-weight:bold;
}

a.button:hover span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
color: #FFF;
font-weight:bold;
}

Articoli correlati:

1. CSS: immagine di sfondo a tutto schermo
2. Cheat Sheets per il Web Design
3. CSS3: compatibilità cross-browser…da oggi!

Dato che avremo a che fare ancora per un po’ di tempo con la bestia nera, tanto vale attrezzarci per essere pronti, alla bisogna, a tirare fuori l’asso nella manica, e ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser.

1) Blocchi flottanti e altezza del blocchi contenitori

Questo bug riguarda il comportamento di un box contentente uno o più elementi flottanti. Vediamo un esempio di codice HTML:

<div class="contenitore">
   <div class="contenuto">Testo e altro</div>
</div>

ecco il codice CSS associato:

.contenitore {
   background: #CCFFCC;
}

contenuto {
   float: left;
   width: 300px;
}

Abbiamo innestato dentro a un blocco un box flottante con larghezza definita (se non specificata, il blocco flottante assume la larghezza di ciò che racchiude, a meno che non si tratti di un elemento rimpiazzato). Dato che i blocchi flottanti sono estratti dal flusso, l’altezza del blocco contenitore non dovrebbe essere influenzata da quella del blocco flottante. In IE6 invece l’altezza del box contenitore è influenzata da quella del box contenuto.  Per risolvere questo baco, è necessario riprsitinare il flusso all’interno del blocco contenitore, inserendo un blocco con proprietà clear:both; dopo il blocco flottante:

<div class="contenitore">
   <div class="contenuto">Testo e altro</div>
   <div class="clear"></div>
</div>

clear {
   .clear: both;
}

2) Blocchi flottanti e doppio margine

A volte accade che se al blocco flottante è applicato un margine sullo stesso lato in cui flotta, IE6 raddoppia questo margine. Per risolvere questo baco è sufficiente applicare all’elemento flottante la proprietà display:inline; che di fatto non ha conseguenze sul layout del blocco, in quanto un blocco flottante è sempre implicitamente un elemento a livello di bocco.

3) Impostare altezza / larghezza minima

#elemento {
   min-height:150px;
   height:auto !important;
   height:auto;
}

4) Spazio tra gli elementi in lista

IE6 aggiunge dello spazio verticale tra gli elementi di una lista settati a livello di blocco:

<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>

Ecco come settare i CSS per aggirare il problema:

ul {
   margin:0;
   padding:0;
   list-style:none;
}
li {
   display: inline; /* bug-fix */
}
li a {
   background: #95CFEF;
   display: block;
}

5) Evitare l’effetto scaletta nelle liste orizzontali

Ecco come evitare l’effetto scaletta nelle liste orizzontali:

<ul>
   <li><a href="#"><!-- --></a></li>
   <li><a href="#"><!-- --></a></li>
   <li><a href="#"><!-- --></a></li>
</ul>

ul 	{
   list-style:none;
   margin:0;
   padding:0;
}

ul li {
   display:inline;
   margin:0;
   padding:0;
}

ul li a {
   display:block; /*IE6 Hack*/
   float:left;
   height:30px;
   margin:0 0 0 20px;
   padding:0;
}

6) Incapacità di avere elementi con altezza piccola

Il nostro layout richiede una linea orizzontale separatrice? Ecco il listato CSS:

#horizontal_row{
   background: #95CFEF;
   border: solid 1px #36F;
   width: 300px;
   height: 2px;
   margin: 30px 0;
   overflow: hidden; /* l'elemento collassa all'altezza definita*/
}

7) Elementi che appaiono scompaiono in modo strano

A volte capita che elementi appaiano scompaiano in modo strano nella pagina, nonostante il nostro html e i CSS siano scritti bene. Per risolvere questo bug, settiamo la proprietà position: relative al contenitore dell’elemento che appare/scompare.

8) Compatibilità con immagini PNG trasparenti

Se il layout del sito che dobbiamo produrre necessita di immagini con effetti di trasparenza,  dobbiamo aggirare il problema del mancato supporto alle png su IE6. Ecco cosa dobbiamo fare:

1. Scaricare da questa pagina l’archivio zip, copiare iepngfix.htc nella cartella dei CSS, e il file spacer.gif nella cartella immagini;
2. Incollare questo codice nella head della pagina html:

   <!--[if IE 6]>
   <style>
   
   * {
          behavior: url(css/iepngfix.htc)
   }
   
   </style>
   <![endif]-->

9) L’ultima spiaggia: colpire il browser con la precisione di un cecchino!

Quando non sappiamo più dove sbattere la testa, ecco come dichiarare proprietà CSS selettivamente per i maggiori browser con questo codice:

#selettore {
   width: 200px !important;     /* browsers moderni*/
   width: 100px;                /* IE6 e precedenti */
}

html>body #selettore {
   width: 150px; !important;    /* solo firefox */
}

..oppure con questo codice:

#selettore {
   background: red; 	/* browsers moderni */
   *background: green; 	/* IE 7 e precedenti */
   _background: yellow; /* IE6 */
}

..o questo codice:

#selettore {
      color: red; /* tutti i browsers */
      color : green\9; /* IE8 and below */
     *color : yellow; /* IE7 and below */
     _color : orange; /* IE6 */
}

Update! Ecco una lista di hack per i maggiori browser.

10) Internet Explorer: testare il sito su tutte le versioni!

Come verificare che il bug-fix sia efficace su tutte le versioni di IE? Non ci resta che testarlo: dimenticaveti di Multiple IEs o emulatori affini (non sempre affidabili al 100%), con IETester possiamo testare IE8, IE7 IE6 e IE5.5 su Windows 7, Vista and XP con risultati del tutto equivalenti alle versioni orginali (a patto che sulla macchina sia installto Internet Explorer 8 e il .NET framework sia aggiornato). Da provare!

Articoli correlati:

1. CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni
2. Internet e il web: cosa è? Come funziona?
3. CSS Pseudo-classi: come usarle su IE6+!