Compatibilità browser e primi passi – HTML5 e CSS3

html5_compatibilita_browser_primi_passi

Vuoi avanzare i primi passi con questa nuova tecnologia? Vuoi farlo conservando l’accessibilità di tutti gli utenti e tutti i browser anche più obsoleti? Sei nel posto giusto!

Iniziamo subito col definire quali sono gli elementi principali che contraddistinguono HTML5 e CSS3, rispetto alle vecchie versioni:


DOCTYPE HTML5

La doctype di HTML5 è molto semplice:

<!DOCTYPE html>

Per chi non lo sapesse, la DOCTYPE è un elemento identificativo della pagina, che indica al browser il tipo di documento, gli standard utilizzati e così via.

In realtà, essa serviva in passato quando i browser utilizzavano specifiche tutte loro, e si facevano guerra a vicenda, con contenuti e tecniche creati da loro stessi.

Oggi esiste la tendenza inversa, ovvero quella volta ad uniformare tutti i contenuti, per una compatibilità assoluta tra tutti i browser. Ecco perchè con l’HTML5, anzichè avere la riga di testo, ad esempio così:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Abbiamo unicamente:

<!DOCTYPE html>

NUOVI ELEMENTI HTML5

Con l’html5, ai classici div, vengono accostati altri elementi, che hanno le stesse funzioni dei div, ma che sono creati specificamente per determinate aree del sito. Questo favorisce un riconoscimento migliore da parte del browser, e consente un ordine concettuale più specifico ed unificato per tutti i siti web.

I nuovi elementi sono:

  • header
  • footer
  • section
  • article
  • aside
  • nav

Header e footer non hanno bisogno di presentazioni, infatti tutti conosciamo la loro valenza. Tuttavia la novità è che tutti questi elementi possono essere ripetuti all’interno di una pagina web. Ad esempio possiamo creare, oltre all’header e footer che tutti conosciamo, degli altri contenitori con questi nomi.

Ad esempio, possiamo organizzare l’articolo in questo modo:

<article>
   <header>...</header>
   <section>...<section>
   <footer>...</footer>
</article>

Per cui l’intera pagina web, diventerà:

<header>...</header>
<nav>...</nav>
<section>
   <article>
      <header>...</header>
      <section>...<section>
      <footer>...</footer>
   </article>
   <article>
      <header>...</header>
      <section>...<section>
      <footer>...</footer>
   </article>
   <aside>...</aside>
</section>
<footer>...</footer>

Section funge da contenitore per una qualsiasi sezione all’interno di un documento, tuttavia non va utilizzato come contenitore generico e se c’è bisogno di un contenitore con una valenza esclusivamente estetica, è consigliato utilizzare comunque il div generico.

Nav va utilizzato per tutti quegli elementi che conentono la navigazione all’interno del sito web, ad esempio:

Menu verticali e orizzontali, pulsanti per lo scorrimento di pagine e così via…

Article, a differenza del tag section, va utilizzato quando abbiamo dei contenuti testuali che anche se discostati dall’inseme, hanno comunque un valore individuale e definiscono compiutamente un concetto.

Aside potrebbe esser utilizzato per identificare una sidebar, ma non solo. Infatti per Aside si intende qualsiasi elemento che ha un contenuto, che si avvicina e si accosta al contento dell’articolo.

Ma qual’è il grande vantaggio?

Utilizzando questi tag, le pagine acquisteranno valore anche dal punto di vista semantico, per cui i browser, i motori di ricerca e gli utenti identificheranno al meglio tutti gli elementi del sito, offrendo una migliore fruibilità dei contenuti e tutti i vantaggi che ne derivano.

Compatibilità  browser

Le specifiche HTML5 non sono ancora supportate a pieno da tutti i browser, sopratutto se si fa riferimento ad Internet Explorer e le sue versioni più vecchie.

Tuttavia esistono diversi modi per aggirare questo problema, e far riconoscere anche a questi browser, tutte le specifiche HTML5. Vediamo quali:

  1. Il primo si tratta di un file JavaScript da inserire all’interno della propria pagina.. html5.js.
  2. Il secondo metodo, è molto simile al primo, e si propone per risolvere l’incopatibilità con i browser più obsoleti, in particolare IE6 (Internet Explorer 6).Il file è ie7.js.
  3. Infine esiste Modernizr, libreria che individua le funzioni supportate dal browser in uso dagli utenti e allo stesso tempo aggiunge degli elementi html, delle classi, in modo da ricreare effetti altrimenti non possibili.

CSS Reset

I documenti con HTML5, come anche quelli in HTML4, hanno gli elementi riconosciuti dai browser sui quali viene applicato uno stile CSS standard direttamente dai browser stesso.

Se vogliamo evitare che ci siano differenze, ad esempio tra come visualizziamo il sito con Firefox, Chrome ed Internet Explorer, allora al nostro foglio di stile dobbiamo aggiungere il CSS Reset.

Il documento che allego a questa sezione è un particolare CSS Reset, esclusivo per HTML5 e CSS3.

Ora tocca a te! Cosa ne pensi di HTML5? vale la pena utilizzarlo? 


Suggerisci una modifica Commenta
Nicola Spisso
Nicola Spisso
  • Scrittore e Blogger
  • Redattore specializzato in Design
G News Pin It
Commenti Espandi

Lascia una risposta