Alcuni chiarimenti su HTML 5 e i vecchi IE

**ldetomi** · 21-11-2011, 01:05

Sto cercando di farmi una cultura in materia di HTML 5 ma nel calderone delle informazioni qualcosa non mi torna. Scrivo di seguito un po' di concetti pregandovi di dirmi, dove sbaglio e dove no

1) I nuovi tag semantici non vengono riconosciuti dai vecchi browser, in particolare i vecchi IE, ma si può ovviare grazie a JavaScript. Praticamente si tratta di creare gli elementi che mancano grazie una sintassi tipo createElement(header) per esempio.
2) In alternativa a crearsi tutte queste funzioni specifiche, è possibile appoggiarsi a html5shiv.js è un file fornito da Google e che praticamente le racchiude tutte, è giusto fino a qui?

3) Esiste anche modernizr che dovrebbe fare qualcosa di più ma non ho capito ancora cosa. Credo sia una soluzione alternativa a quella di Google ma in che cosa si differenzia, cosa fa in più?

4) E' appena uscito JQuery 1.7 che offre supporto pieno a html5 (e in questo pensavo che fosse di fatto una terza soluzione direttamente integrata nel framework) ma nella documentazione ufficiale scopro che è necessario comunque inserire in testa alla pagina lo shim di base, o quello di google o anche modernizr. Ma allora... che fa JQuery 1.7 in più della precedente versione, da questo punto di vista????

Insomma... un po' di domande per chiarire meglio i vari concetti...

**fcaldera** · 21-11-2011, 10:50

1) corretto
2) corretto
3) modernizr esegue principalemente una detection delle nuove features, ad esempio se il browser può o meno usare la geolocation, canvas, video, localstorage, etc.
Inoltre è pensato per integrarsi con boilerplate sostituendo la classe no-js in testa all'elemento <html>. Usarlo o meno dipende da quanto complessa è la tua pagina e se devi prevedere meccanismi di fallback
4) Nei vecchi IE lo shiv risolve il problema di fare riconoscere gli elementi html5 solo quando già presenti nel markup. Se devi crearli dinamicamente con jQuery < 1.7 (o con i normali metodi javascript) ad es

codice:

$('<figure>...</figure>').appendTo($('body'));

devi includere un altro script chiamato innerShiv da richiamare così

codice:

$(window.innerShiv('<figure>...</figure>'), false).appendTo($('body'));

jQuery 1.7 risolve quest'ultimo problema.

**ldetomi** · 21-11-2011, 11:05

Grazie, 2 commenti sugli ultimi 2 punti che mi hai scritto, visto che spesso certe risposte creano nuove domande

:
3) Modernizr fa un check delle feature disponibili, mentre html5shiv fornisce un metodo per avere i nuovi tags semantici anche nei vecchi browser, ho capito bene? Ma Modernizr si "affianca" a quanto fatto da html5shiv o ingloba le sue funzionalità aggiungendo il feature detection (che se ho ben capito html5shiv non fa)?
Inoltre, abbinare modernizr a boilerplate cosa mi dà in più? (quest'ultimo può vivere anche di vita propria senzaq modernizr?)
4) Se ho ben capito con JQuery 1.7 posso creare nuovi elementi con tag semantici dinamicamente senza preoccuparmi della retrocompatibilità? Una volta incluso comunque in alto lo shim di base... il resto lo fa tutto lui???

**fcaldera** · 21-11-2011, 11:25

Originariamente inviato da ldetomi
Grazie, 2 commenti sugli ultimi 2 punti che mi hai scritto, visto che spesso certe risposte creano nuove domande

:

3) Modernizr fa un check delle feature disponibili, mentre html5shiv fornisce un metodo per avere i nuovi tags semantici anche nei vecchi browser, ho capito bene? Ma Modernizr si "affianca" a quanto fatto da html5shiv o ingloba le sue funzionalità aggiungendo il feature detection (che se ho ben capito html5shiv non fa)?

se vai su http://www.modernizr.com/download/ vedrai che tra gli extra puoi includere anche lo shiv

Originariamente inviato da ldetomi
Inoltre, abbinare modernizr a boilerplate cosa mi dà in più?

vedi risposta nel post precedente.

Originariamente inviato da ldetomi
(quest'ultimo può vivere anche di vita propria senzaq modernizr?)

Sì

Originariamente inviato da ldetomi
4) Se ho ben capito con JQuery 1.7 posso creare nuovi elementi con tag semantici dinamicamente senza preoccuparmi della retrocompatibilità? Una volta incluso comunque in alto lo shim di base... il resto lo fa tutto lui???

Sì

**ldetomi** · 21-11-2011, 11:59

Ok, ci siamo quasi

Solo qualche ultimo commento su modernizr.

1) Includere o meno lo shim di base in modernizr mi permette, non solo di avere il feature detection offerto da quest'ultimo ma anche di creare gli elementi semantici per i vecchi IE? Ovvero se metto modernizr ma NON html5shiv, avrò SOLO il feature detection ma i vecchi IE continueranno a non riconoscere i nuovi tag semantici?

2) Mi hai detto di guardare il post precedente per quanto riguarda l'abbinamento modernizr e boilerplate, e da lì mi pare di capire che boilerplate aggiunge a modernizr la possibilità del fallback delle funzionalità, giusto?

3) Ma se è così, e se boilerplate può vivere di vita propria come hai scritto nel secondo post. Perché abbinare le 2 soluzioni? Cioè, se modernizr da solo mi offre il feature detection, se abbinato a boilerplate mi dà sia il feature detection che il fallback.... se metto SOLO boilerplate cosa ottengo?? (solo il fallback senza il feature detection!?!?

ma ha senso ciò che sto dicendo?!?!?)

Grazie ancora!!!!

**ldetomi** · 28-11-2011, 21:18

Non mi rispondi più????

**fcaldera** · 29-11-2011, 10:23

Originariamente inviato da ldetomi
Ok, ci siamo quasi

Solo qualche ultimo commento su modernizr.

1) [...] Ovvero se metto modernizr ma NON html5shiv, avrò SOLO il feature detection ma i vecchi IE continueranno a non riconoscere i nuovi tag semantici?

2) ... da lì mi pare di capire che boilerplate aggiunge a modernizr la possibilità del fallback delle funzionalità, giusto?

3) Ma se è così, e [... grossa supercazzola ...]

ma ha senso ciò che sto dicendo?!?!?)

Grazie ancora!!!!

1) Corretto
2) boilerplate è solo un insieme di assets html5 di base.
3)

secondo me dovresti scaricarti boilerplate, modernizr e shiv e leggerti qualche tutorial e usarli.

**ldetomi** · 29-11-2011, 17:44

Per il momento vorrei avvicinarmi a html5 nel modo più soft e graduale possibile, quindi come prima iterazione vorrei limitarmi a sostituire i vecchi:

codice:

<div id='header'></div>

con

codice:

<header></header>

e ovviamente tutti i tags simili, ovvero limitarmi a usare i nuovi tags semantici, senza funzionalità sofisticate.

Per fare questo ho letto su un libro di hmtl5, che per rendere la cosa compatibile con i vecchi Firefox ad esempio, è suddificiente definire tali oggetti con un css di reset in una maniera naaloga a questa:

codice:

header
{
  display:block;
}

Mentre con i vecchi IE è necessario ricorrere a JS, ma se ho capito bene, con html5shiv.js di google, risolvo tutti i miei problemi, mi confermi tutto questo???
(poi, magari penserò a modernizr e boilerplate in un secondo momento, visto che non sembrano necessari per le attuali esigenze...)

**fcaldera** · 29-11-2011, 18:19

Originariamente inviato da ldetomi
...necessario ricorrere a JS, ma se ho capito bene, con html5shiv.js di google, risolvo tutti i miei problemi, mi confermi tutto questo???

sì, ti ho risposto nel mio primo post

lo devi includere nell'head e per i nuovi elementi devi impostare il display via css

Discussione: Alcuni chiarimenti su HTML 5 e i vecchi IE

Strumenti discussione

Ricerca discussione

Visualizza

Alcuni chiarimenti su HTML 5 e i vecchi IE

Permessi di invio