IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction à HTML5

Image non disponible Image non disponible

HTML5 est une évolution de la norme HTML dont le but avoué est de faciliter le développement d'interfaces utilisateur riches. HTML5 est beaucoup plus orienté applicatif que ses prédécesseurs et veut permettre de s'affranchir de plugins pour utiliser au maximum les technologies Web natives afin de construire une application riche.

L'article original peut être lu sur le blog de Synbioz : Introduction à HTML5.

9 commentaires Donner une note à l´article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

HTML5, pourquoi ?

HTML5 est une évolution de la norme HTML regroupant un ensemble de technologies : SVG, CSS3, WebGL, File API, MathML\x{0085}

Le but avoué de cette nouvelle version de HTML est de faciliter le développement d'interfaces utilisateur riches. HTML5 est beaucoup plus orienté applicatif que ses prédécesseurs et veut permettre de s'affranchir de plugins pour utiliser au maximum les technologies Web natives pour construire une application riche.

HTML5 arrive donc avec beaucoup de nouvelles capacités disponibles depuis une API vaste et variée. On pourra notamment communiquer avec des fonctions matérielles (micro, webcam, carnet d'adresses\x{0085}) par l'intermédiaire d'API.

On peut facilement grâce à HTML5 visionner des vidéos sans plugin, ajouter des effets visuels aux textes, images, vidéos\x{0085} On peut aussi utiliser des polices non standards, dessiner en SVG, faire de la 3D\x{0085}

Voyons les choses qui me semblent être les plus intéressantes avec quelques exemples d'utilisation.

Nouvelle structuration

En premier lieu, HTML5 met largement à jour le système de balisage et donc la structuration d'une page. Voici à quoi pourrait ressembler une page-type utilisant certaines nouvelles balises pour améliorer la dimension sémantique du code :

 
Sélectionnez
<body>
  <header>
    <hgroup>
      <h1>Titre</h1>
      <h2>Sous-titre</h2>
    </hgroup>
  </header>
 
  <nav>
   <ul>
     Navigation
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Titre</h1>
     </header>
     <section>
       Contenu...
     </section>
   </article>
   <article>
     <header>
       <h1>Titre</h1>
     </header>
     <section>
       Contenu
     </section>
   </article>
  </section>
 
  <aside>
   Liens externes
  </aside>
 
  <figure>
    <img src="..."/>
    <figcaption>Graphique</figcaption>
  </figure>
 
  <footer>
   Copyright © Synbioz
   <time datetime="2011-12-08">2011</time>.
  </footer>
</body>

Comme vous pouvez le voir, de nouvelles balises sémantiques sont utilisées pour regrouper les différents éléments en groupes logiques. Le principal avantage de ce balisage amélioré est de simplifier la lecture des pages par les moteurs de recherche qui seront alors en mesure de mieux classer et restituer les informations lors d'une recherche.

Les balises ajoutées l'ont aussi été pour simplifier l'écriture de la structure d'une application Web. Jusque-là on utilisait des div avec des id ou des classes pour représenter un entête, un menu, un article, une barre de navigation ou un pied de page. Pas très facile pour un moteur de recherche de faire la différence entre une pub, un menu ou l'article dans une page.

C'est donc pour pallier ce problème, faciliter et alléger le code que des balises sont apparues : header, section, article, nav, aside, footer\x{0085}

L'attribut \x{0093}rel\x{0094}, bien trop peu employé à mon goût, comporte lui aussi son lot de nouveautés :

  • alternate : lien vers une version alternative de la page (version imprimable, traduction, miroir\x{0085}) ;
  • author : lien vers l'auteur du document ;
  • bookmark : URL permanente pouvant servir de bookmark ;
  • external : lien vers une page externe ;
  • help : lien vers un document d'aide ;
  • license : lien vers les copyrights du document ;
  • next : prochain document dans la sélection (ex. : prochain article) ;
  • prev : document précédent dans la sélection (ex. : article précédent) ;
  • nofollow : lien vers un document tel qu'un lien commercial (Google utilise cet attribut pour ne pas suivre un lien) ;
  • noreferrer : demande au navigateur de ne pas envoyer de référant dans les entêtes HTTP si l'utilisateur clique sur le lien ;
  • prefetch : demande au navigateur de précharger la page liée ;
  • search : lien vers un outil de recherche pour le document ;
  • tag : permet d'affecter un tag (mot-clé) au document.

Quelques exemples :

 
Sélectionnez
<link rel="alternate" type="application/rss+xml" href="http://blog.com/feed"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="pingback" href="http://blog.com/xmlrpc"/>
<link rel="prefetch" href="http://blog.com/main"/>
 
<a rel="archives" href="http://blog.com/archives">anciens articles</a>
<a rel="external" href="http://notmysite.com">lien externe</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">licence</a>
<a rel="nofollow" href="http://notmysite.com/somewhere">pub</a>
<a rel="tag" href="http://blog.com/category/ruby">Articles à propos de Ruby</a>

Vous devez vous dire que l'intérêt de ces nouveautés est limité aux moteurs de recherche qui voient leur travail simplifié. C'est vrai en partie mais n'oubliez pas qu'être bien référencé c'est avoir une meilleure présence sur le Web et donc plus de visiteurs. Il est également plus simple pour vous de créer une ossature HTML compréhensible ce qui vous facilitera le travail de référencement, d'accessibilité pour vos visiteurs déficients et la maintenabilité.

Une structure claire, naturelle et légère est la base d'un bon site et je pense que HTML5 va largement contribuer à l'amélioration sémantique des applications développées.

Microdata

Les microdata sont un autre paramètre à prendre en compte pour un meilleur référencement. Les microdata sont un balisage sémantique avec un vocabulaire personnalisé qui permet de détailler très finement un élément dans la page. Ces détails pourront être repris par le moteur de recherche pour présenter des résultats plus pertinents et détaillés. On pourra donc par exemple détailler :

  • un avis ;
  • une note ;
  • un fil d'Ariane ;
  • des événements ;
  • des personnes ou entreprises ;
  • des produits ;
  • \x{0085}

Un exemple vaudra mieux qu'un long discours :

Image non disponible

Vous voyez donc que sous le lien, on retrouve des étoiles représentant une note, l'auteur et la date.

Le code de cette page pourrait être, dans sa forme la plus simple :

 
Sélectionnez
<div>
  <h1>Dragon Age</h1>
  Avis rédigé par GameSpot le 3 novembre
  Note: 5 sur 5
</div>

Vous pouvez tester vos pages utilisant des microdata via les outils Google pour voir ce que donnera un résultat de recherche pointant sur votre page.

Les formulaires

Certainement l'une des choses les plus utilisées dans toute application Web, les formulaires ne sont pas en reste côté améliorations. Jusque-là, les contrôles disponibles et surtout les types de données associées étaient très limités. HTML5 nous apporte quelques briques manquantes qui vont faciliter la récupération et le traitement de données.

Maintenant les formulaires peuvent plus ou moins être typés. L'apparition de ces nouveaux types rend le code plus compréhensible et plus accessible. Ce typage permet également au navigateur de proposer des contrôles adaptés à la situation. En effet le navigateur pourra faire du préremplissage ciblé, utiliser une interface appropriée (ex. : calendrier pour les dates, colorpicker\x{0085}) ou encore afficher un clavier adapté au contexte lorsqu'on utilise un téléphone.

Voici les nouveaux types d'input disponibles :

  • datetime, month, time, week\x{0085}
  • number ;
  • search ;
  • range ;
  • color ;
  • tel ;
  • email.

Les widgets associés à ces nouveaux types sont particulièrement bien développés sur téléphone mobile où l'intérêt ergonomique est le plus perceptible.

Des attributs ont aussi été ajoutés :

  • placeholder qui permet d'avoir un texte par défaut qui disparaitra automatiquement lors de la saisie utilisateur sans avoir la moindre ligne de JavaScript à écrire ;
  • autofocus qui donnera le focus à ce champ au chargement de page ;
  • required qui définit le champ comme obligatoire ;
  • pattern qui permet de définir un format qui devra être respecté pour valider le formulaire.

Voici quelques exemples d'utilisation :

 
Sélectionnez
<input type="text" required />
 
<input type="email" value="votre@email.com" />
 
<input type="date" min="2010-01-01" max="2011-12-31" value="2010-10-31"/>
 
<input type="range" min="0" max="50" value="10" />
 
<input type="search" results="10" placeholder="Recherche..." />
 
<input type="tel" placeholder="1234567890" pattern="^\d{10}$" />
 
<input type="color" placeholder="ex. #bbbbbb" />
 
<input type="number" step="1" min="-5" max="10" value="0" />

Parmi les possibilités moins souvent évoquées, les formulaires peuvent maintenant être découpés et être soumis de façons différentes.

En effet un champ peut maintenant se trouver hors du formulaire en lui-même, simplement en spécifiant l'attribut form="id_formulaire".

Un même formulaire peut aussi être soumis de façon différente, en modifiant son comportement directement depuis un input de type submit.

Cela peut être très pratique par exemple dans un moteur de blog ou à l'écriture d'un article, vous pouvez soit l'enregistrer, soit en faire une prévisualisation.

Exemple :

 
Sélectionnez
<form id="new_post" action="/articles" method="post">
<input type="submit" formaction="/articles/preview" formmethod="get" value="Aperçu" />
</form>
 
<input type="submit" form="new_post" value="Publier" />

Audio et vidéos natifs

Plus besoin d'intégrer un lecteur flash pour pouvoir lire du son ou de la vidéo dans une page Web. HTML5 intègre cette possibilité nativement. Une simple balise permet de lire une vidéo et d'afficher ses contrôles ! Il vous est même possible de contrôler tout cela directement en JavaScript :

 
Sélectionnez
/* Joue un son en boucle au chargement de page en affichant ses contrôles */
<audio src="/audio/test.ogg" autoplay controls loop>
 
/* Joue une vidéo en boucle au chargement de page en affichant ses contrôles */
<video id="vid" src="/videos/test.ogv" autoplay controls loop>
 
 
<script type="text/javascript" charset="utf-8">
  var video = document.getElementById('vid');
  video.pause();
  alert(video.src);
  /* Durée du son */
  alert(video.duration);
  /* Position actuelle */
  alert(video.currentTime);
  /* On redéfinit la position courante dans la lecture */
  video.currentTime=35;
  /* On reprend la lecture */
  video.play();
</script>

Canvas

Je n'ai encore pas eu l'occasion de jouer avec les éléments de type Canvas, qui permettent de dessiner point par point via une API JavaScript, mais les démos disponibles sur le Web sont vraiment impressionnantes. On imagine facilement les applications possibles. Il devient facile de dessiner en temps réel des graphiques animés. Tout cela sans Flash ni plugin, simplement de l'HTML5, un peu de CSS3 et du JavaScript !

API JavaScript enrichie

Tout d'abord de nouveaux sélecteurs très pratiques font leur apparition.

Trouver des éléments via l'API DOM

 
Sélectionnez
var el = document.getElementById('section1');
el.focus();
 
var els = document.getElementsByTagName('div');
els[0].focus();
 
var els = document.getElementsByClassName('section');
els[0].focus();

Vous connaissiez déjà getElementById() qui retourne un élément du DOM. getElementsByTagName() permet d'obtenir un tableau d'éléments correspondant à la balise passée en paramètre. getElementsByClassName() est l'équivalent pour la classe passée en paramètre.

Trouver des éléments via les sélecteurs CSS (API Selectors)

 
Sélectionnez
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td");

querySelector() et querySelectorAll() permettent respectivement de récupérer le premier élément ou tous les éléments qui correspondent au sélecteur CSS3 passé en paramètre.

Attributs personnalisés data-*

Ces attributs que vous pouvez définir sur n'importe quelle balise permettent de définir, stocker et récupérer des données personnalisées directement dans le DOM.

 
Sélectionnez
<div id="test" data-id="12" data-name="nico" data-screen-name="bounga"></div>
 
<script type="text/javascript" charset="utf-8">
  // Ajout d'un attribut via JS.
  var el = document.querySelector('#test');
  el.setAttribute('data-foo', 'bar');
 
  var html = [];
  // On récupère toutes les données personnalisées et on les affiche
  for (var key in el.dataset) {
    html.push(key, ': ', el.dataset[key], '<br>');
  }
 
  el.innerHTML = html.join('');
</script>

Le framework Ruby on Rails dans ses dernières versions fait déjà largement usage de ces attributs pour mettre en place du JavaScript non intrusif et indépendant de la bibliothèque JavaScript utilisée.

Les listes de classes

La manipulation des classes CSS appliquées à un élément a également été largement améliorée. Plus besoin d'un framework pour connaitre les classes appliquées, en ajouter, en supprimer\x{0085}

 
Sélectionnez
<div id="main" class="shadow rounded"></div>
 
<script type="text/javascript" charset="utf-8">
  var el = document.querySelector('#main').classList;
  el.add('highlight');
  el.remove('shadow');
  el.toggle('highlight');
 
  el.contains('highlight'); // false
  el.contains('shadow'); // false
  el.classList.toString() == el.className; // true
</script>

Cookies on steroïds: localStorage et sessionStorage

Un moyen bien plus puissant que les cookies de stocker des données. Le localStorage permet un stockage permanent alors que le sessionStorage permet un stockage par onglet (ou session).

 
Sélectionnez
// Enregistre le contenu d'un textarea au clic sur le bouton
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
 
// Préremplit le textarea en fonction de la valeur stockée en local
textarea.value = window.localStorage.getItem('value');

Bases de données WebSQL

Encore plus puissant, il est maintenant possible d'avoir une base de données SQL côté client. On peut y stocker des données utilisables hors-ligne, relatives à l'utilisateur qui pourraient donc être chargées sans faire appel au serveur. Très pratique pour stocker des préférences utilisateur par exemple.

 
Sélectionnez
var db = window.openDatabase("ma_base", "1.0", "description", 5*1024*1024); //5MB
 
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

API de cache

Cette API permet de rendre disponibles certaines ressources en mode hors-ligne grâce au cache applicatif.

Il suffit de déclarer votre balise HTML en précisant l'emplacement du manifeste :

 
Sélectionnez
<html manifest="cache.appcache">

Le manifeste ressemblerait lui à quelque chose comme :

 
Sélectionnez
CACHE MANIFEST
# version 1.0.0
 
CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
 
NETWORK:
*

On rend donc disponibles hors-ligne les ressources listées dans la section CACHE pour tous les réseaux.

Il ne reste plus qu'à piloter via JavaScript :

 
Sélectionnez
window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

Les sockets Web

HTML5 ouvre la possibilité d'avoir des communications bidirectionnelles. Le serveur et le client peuvent envoyer des données dès qu'ils en ont besoin. Il est même possible de le faire en simultané. Seules les données sont envoyées sans en-têtes ce qui réduit l'utilisation de la bande passante et améliore donc les temps de réponse.

Côté serveur il vous faudra souscrire à un service Web qui propose la gestion des Websockets ou vous en charger de votre côté avec Socket.IO-Node par exemple.

 
Sélectionnez
var socket = new WebSocket('ws://site.org/echo');
 
socket.onopen = function(event) {
  socket.send('Hello, WebSocket');
};
 
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }

Notre JavaScript d'exemple contacte le serveur et crée une WebSocket. Une fois la socket ouverte (onopen) le client envoie un message au serveur. Si un message est reçu du serveur sur cette WebSocket, le client l'affiche. Si la socket est fermée, un message sera affiché par le client.

On peut donc imaginer des outils comme des chats en temps réel, ultraréactifs et beaucoup moins gourmands en bande passante que des modèles basés sur un appel en boucle du client au serveur. Avec les WebSockets, c'est le serveur qui contacte le client pour lui dire qu'il y a des données à traiter !

Géolocalisation

Il est maintenant possible de localiser un utilisateur (s'il l'autorise) via GPS, 3G ou IP. Une fonctionnalité qui semble clairement avoir été mise en place pour les appareils mobiles en vue de créer des applications sociales avec géolocalisation.

 
Sélectionnez
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}

Avec ce simple morceau de code, sans bibliothèque externe ou appel d'une API, une carte centrée (Google Map) sur la position de l'utilisateur sera affichée.

Accès à l'historique

L'un des plus gros soucis rencontrés par les développeurs avec AJAX est la perte de l'historique navigateur. Il est aussi impossible de bookmarker un contenu chargé en AJAX. Avec l'API d'historique vous pourrez facilement pallier ces problèmes en manipulant les URL et l'historique depuis JavaScript.

 
Sélectionnez
// Parcourir l'historique
window.history.back();
window.history.go(-1);
 
window.history.forward();
window.history.go(1);
 
window.history.length;
 
// Modifier l'historique
var stateObj = { foo: "bar" };
 
// Ajout d'un élément à l'historique, modification de l'URL, modification du titre
// rien n'est chargé, seuls l'historique et la barre d'URL sont impactés
history.pushState(stateObj, "titre", "foo/bar.html");
 
// Ici on remplace l'élément d'historique plutôt que d'en ajouter un
history.replaceState(stateObj, "titre 2", "foo/bar2.html");
 
// Info sur l'élément courant
history.state;

Un événement popstate est envoyé à chaque fois que l'entrée courante change. Si cet élément avait été ajouté via un appel à pushState ou replaceState, alors l'événement contiendra une copie de l'état qui avait été passée en créant l'entrée. Cela peut être intéressant si à chaque changement de page vous devez remettre du contenu dans son état initial :

 
Sélectionnez
window.addEventListener('popstate', function(event) {
  document.querySelector('h1').innerText = event.state.title;
});

Gestion des fichiers

Depuis HTML5, pour peu que l'utilisateur vous accorde les droits, vous pouvez écrire dans un système de fichier virtuel cloisonné (sandbox). Cette nouveauté offre de nombreuses possibilités pour les applications Web. Dans notre exemple, nous écrirons des logs sur le disque du client :

 
Sélectionnez
/* On crée un fichier disponible de manière permanente d'une taille estimée de 5Mo */
window.requestFileSystem(window.PERSISTENT, 5*1024*1024, function(fs) {
  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
 
    fileEntry.createWriter(function(writer) {
        writer.onwrite = function(e) { };
        writer.onerror = function(e) { };
 
        var bb = new BlobBuilder();
        bb.append('je log !');
 
        writer.write(bb.getBlob('text/plain'));
    }, errorHandler);
  }
 
}, errorHandler);
 
 
/* Gestionnaire d'erreur d'accès au système de fichier virtuel */
function errorHandler(e) {
  var msg = '';
 
  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };
 
  console.log('Error: ' + msg);
}

Il est vraiment possible de gérer ce pseudosystème de fichiers comme un vrai système de fichiers. Les possibilités sont nombreuses et je vous recommande de lire cette documentation sur le sujet.

Webworkers

Les Webworkers peuvent, en quelque sorte, être comparés au multithreading. L'API des Webworkers permet d'exécuter des scripts en tâche de fond, sans bloquer le client. Un script s'exécutant dans un Webworker ne sera donc pas bloquant pour l'affichage de la page.

 
Sélectionnez
/* index.js: */
 
/* On crée un worker */
var worker = new Worker('worker.js');
 
/* On définit son comportement s'il reçoit un message */
worker.addEventListener("message", function(event) {
  alert(event.data);
}, false);
 
/* On envoie un message */
worker.postMessage('Nico');
 
/* worker.js: */
 
self.onmessage = function(event) {
  self.postMessage("Bonjour : " + event.data . " !");
};

CSS3

Les nouveaux sélecteurs CSS: nth-child(even), nth-child(odd), :not, first-child ?

Un nombre impressionnant de sélecteurs ont été ajoutés et ils s'avèrent vraiment pratiques :

 
Sélectionnez
.row:nth-child(even) {
  background: #dde;
}
/* Tous les éléments impairs ayant pour classe "row" */
.row:nth-child(odd) {
  background: white;
}
 
/* N'ayant pas la classe "box" */
:not(.box) {
  color: #00c;
}
/* Tous les éléments non span */
:not(span) {
  display: block;
}
 
/* Premier h2 si celui-ci est le premier élément du site */
h2:first-child { }
 
/* Sélectionne le premier div fils des div ayant la classe "text" */
div.text > div { }
 
/* Sélectionne les éléments header suivant directement un h2 */
h2 + header { }
 
/* Tous les inputs de type text */
input[type="text"]{ ]

La gestion des polices

CSS3 nous ouvre la possibilité d'utiliser des polices non standards, qu'elles soient installées ou non chez le client :

 
Sélectionnez
@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}
 
@font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
}
 
header {
  font-family: 'LeagueGothic';
}

Gestion de colonnes

Combien de fois avez-vous dû répartir un contenu sur plusieurs colonnes ? Une tâche fastidieuse en CSS qui peut s'avérer compliquée à mettre en œuvre de manière portable et flexible. CSS3 apporte une solution élégante :

 
Sélectionnez
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Maîtrise de l'opacité

En CSS3, il est possible de définir les couleurs en RGBA. On a donc en plus des habituels canaux rouge, vert et bleu accès au canal \x{0093}alpha\x{0094} qui permet de définir l'opacité de la couleur.

 
Sélectionnez
/* Opacité à 75 % */
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
 
/* Opacité à 50 % */
hsla(240, 100%, 70%, 0.5);

Bordures arrondies

Je rêvais de cette possibilité depuis des années. Étant clairement un manchot de Photoshop, je me suis longtemps demandé pourquoi il n'était pas possible d'arrondir les angles des div avec une simple ligne de CSS. Oubli réparé, fini les images de fond pour les coins de vos blocs. CSS3 intègre la gestion des angles des bordures :

 
Sélectionnez
/* Spécifique à webkit (Safari, Chrome) */
-webkit-border-radius: 3px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
 
/* Spécifique à Mozilla (Firefox) */
-moz-border-radius: 3px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
 
/* Future norme ? */
border-radius: 3px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

Dégradés

Encore une fois vous allez pouvoir oublier les images utilisées en arrière-plan pour simuler un dégradé. CSS3 le gère nativement :

 
Sélectionnez
/* Dégradé linéaire du haut vers le bas, de vert à blanc */
background: -webkit-gradient(linear, left top, left bottom,
                             from(#00abeb), to(white),
                             color-stop(0.5, white), color-stop(0.5, #66cc00));
 
/* Dégradé radial avec des valeurs absolues */
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000));

Fonds redimensionnables

Il était possible, jusque-là, d'ajouter une image de fond à un élément. On pouvait l'afficher une fois dans sa taille originale et également répéter le motif sur l'axe des x et/ou y. Une amélioration est apportée par CSS3 puisque maintenant il est possible de dire comment doit se comporter l'image. On peut donc la forcer à prendre toute la taille d'un bloc, à être contenue dans le bloc, avoir sa taille originale ou encore définie à un pourcentage.

 
Sélectionnez
#logo {
  background: url(logo.gif) center center no-repeat;
  /* Valeurs possibles : auto / contain / cover / 100%
  background-size: cover;
}

Fonds multiples

CSS3 permet de définir plusieurs images de fond pour un même élément :

 
Sélectionnez
div {
  background: url(/images/logo.png) 10px center no-repeat,
              url(/images/stripes.png) 0 center repeat-x;
}

Ombrages

Vous aimez ajouter des ombres à vos textes et blocs, plus besoin d'images ! Encore une fois, CSS3 apporte une solution élégante et légère à ce cas de figure :

 
Sélectionnez
/* Ombre ajoutée à un texte utilisant potentiellement une police spécifique */
text-shadow: rgba(64, 64, 64, 0.5);
 
/* Ombre ajoutée à un bloc (div, etc) */
box-shadow: rgba(0, 0, 128, 0.25);

Transitions et transformation

Vous êtes habitué à ajouter des effets de transition aux actions qui se produisent dans votre application ? Alors je suppose que vous utilisez JavaScript pour créer l'effet visuel de transition d'un état à l'autre ! En CSS3 :

 
Sélectionnez
/*
TRANSITIONS
Les éléments #box auront un effet de transition lorsque le margin-left sera modifié
*/
#box {
  -webkit-transition: margin-left 1s ease-in-out;
}
 
/*
TRANSFORMATIONS
Rotation d'éléments du DOM
utile par exemple sur un :hover
*/
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
 
/*
ANIMATIONS
Fait "clignoter" tous les divs en augmentant la taille de leur police.
*/
 
@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}
 
div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Conclusion

Dans cet article, nous n'avons malheureusement pas eu le temps de faire un tour complet des nouveautés qu'offre HTML5 mais vous trouverez de nombreux sites qui traitent du sujet. Une des références incontournables est évidemment un site à l'initiative de Google, HTML5 Rocks!. HTML5 Demos présente des cas concrets d'utilisation.

Si vous comptez utiliser HTML5, il vous faut absolument jeter un œil au projet Modernizr qui vous permettra de connaître les fonctionnalités supportées par le client. Cet outil vous facilitera la mise en place de solutions alternatives.

Il est indéniable que HTML5 a été pensé et taillé pour créer des applications et non plus de simples sites. HTML5 propose même un mode hors-ligne qui permet de surfer et interagir avec des parties du site sans connexion. Une fois une connexion rétablie, les données peuvent être synchronisées. Les possibilités offertes nativement sont désormais impressionnantes. Un vrai régal pour les développeurs d'applications Web. Pour les développeurs de sites vitrines c'est aussi une bonne nouvelle, les intégrations graphiques, les effets de transition et de transformation sont supportés nativement.

Remerciements

Cet article a été publié avec l'aimable autorisation de Synbioz, l'article original peut être vu sur le blog de Synbioz.

Nous tenons à remercier kdmbella, ClaudeLELOUP et michel.di pour leur relecture attentive de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Synbioz. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.