HTML 5
HTML5 (HyperText Markup Language Version 5) est la dernière révision du principal langage du World Wide Web, HTML. HTML5 spécifie deux syntaxes d’un modèle abstrait défini en termes de DOM : HTML5 et XHTML5.
A quoi cela va bien pouvoir servir ? Les nouveaux sites pourront adopter les balises telles que Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu’une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement. De nouvelles fonctionnalités permettront aussi d’utiliser HTML et uniquement HTML au lieu d’y implémenter toute une série de plugins pour faire des choses finalement pas très compliquées. Doctype Parmi les nouveaux éléments apportés par HTML5, j’ai identifié la liste suivante pour la structure de mon site : Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout. Concrètement, il suffira d’appeler un script externe dès le début de la page de manière spécifique à IE : L’attribut "role" HTML5 définit une liste de valeurs pour l’attribut "role". Les principales étant : Source http://www.w3.org/TR/xhtml2/mod-rol... traduit par http://www.alsacreations.com Styles CSS2 et CSS3 pour la mise en forme : La Police peut enfin être belle !
La propriété @font-face réintégrée à CSS3 permet d’afficher une police exotique embarquée sur le serveur. Beware :
Les navigateurs modernes tels qu’Opera 10, Firefox 3.5, Safari 3 et Chrome 4 reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu’un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .ttf (ou .otf) pour le commun des mortels, et une version .eot pour IE. Une fois vos fichiers convertis à l’aide de Font-Face generator, il vous suffit de les appeler dans vos feuilles de styles de la sorte : Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple : Beware : Sachez qu’Internet Explorer télécharge les deux fichiers de police (.eot et .ttf) et non pas seulement celui qui le concerne ! Soyez donc doublement vigilants quant au poids de vos fontes.
Une des solutions pour éviter ce problème serait d’appeler la police classique .ttf à l’aide d’un commentaire conditionnel excluant Explorer, tel que Autre exemple de "Police embarquée" (tiens ça change .... :-) ) : http://www.w3.org/2010/Talks/0407-n... Ombrages sur le texte et les boîtes La propriété CSS3 box-shadow crée un ombrage solide ou dégradé sur tous les éléments HTML et la propriété text-shadow crée une ombre autour des textes. Voici les règles CSS appliquées pour créer un halo autour des figures : Et voici ce qui a été mis en œuvre pour le texte du logo : Plus d’informations sur ces propriétés (et leur compatibilité) dans un article sur les ombrages (box-shadox et text-shadox) qui y est consacré.
Coins arrondis La propriété CSS3 border-radius accomplit le rêve ancestral du webdesigner de pouvoir créer facilement des coins arrondis sans images dans ses pages web.
Beware : Comme pour les ombrages, cette propriété est reconnue par tous les navigateurs récents (y compris Opera 10.5)... sauf Internet Explorer (y compris IE8), et là aussi des préfixes sont de mise. Border-radius devient donc -moz-border-radius sur Firefox et -webkit-border-radius sur Webkit. La synthaxe : Afin de conserver cette fonctionnalité sur Internet Explorer, il a été nécessaire de recourir à un petit script JavaScript de 8ko : Roundies.js. J’en explique le mécanisme et la mise en oeuvre dans le tutoriel nommé "Créer des coins arrondis en CSS et sans images". Ce petit stratagème léger, uniquement appliqué à IE permet d’obtenir des coins arrondis aux différents éléments de la page sans l’apport l’images. Transparence Il suffit pour cela d’adopter l’écriture RGBa telle que nous la décrivons en détail dans le tutoriel "La transparence de couleur avec RGBa en CSS3". La Synthaxe : Beware : Comme prévu, la plupart des navigateurs prennent en charge cette valeur de transparence... à l’exception d’Internet Explorer, IE8 compris. Pour ce navigateur, il est possible de se rabattre sur le filtre propriétaire "Gradient" afin d’émuler partiellement cette propriété (voir article sus-cité).
Rotation" Les propriétés de Transformation CSS3 sont reconnues sur Firefox à partir de la version 3.5, sur Webkit (Chrome 1+, Safari 4+) et sur Opera à partir de la version 10.5 A condition de ne pas tomber dans l’excès, elles permettent d’offrir de petits agréments visuels sur les navigateurs récents. : au survol, les images se tournent selon un angle de 10 degrés. Conclusion Si vous n’aviez à retenir que l’essentiel, ce serait :<header> pour remplacer les <div id= "header"> que l’on trouve sur la plupart des sites construits actuellement.
<!DOCTYPE html>
<header> : en-tête de la page
<nav> : liens de navigation
<section> : section de contenu
<figure> : pour regrouper des images et leur description
<footer> : pied de page<!--[if IE]><script src="scripts/html5-ie.js"></script><![endif]--> -
main : définit le contenu principal d’un document
secondary : représente une section unique et secondaire du document, tel que l’heure, la météo ou autre module de ce genre
navigation : définit le menu de navigation du document. Typique de liens vers d’autres pages du site ou vers d’autres endroits de la page
banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...
contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...
definition : représente la définition d’un élément
note : correspond à une note entre parenthèse ou de bas de page
seealso : indique que l’élément contient des données contextuelles au contenu principal de la page
search : la section de recherche d’une page. Typiquement un formulaire de recherche Comme toute œuvre artistique, une fonte est soumise à des droits d’auteurs. Peu sont libres de droits ;
L’ensemble du fichier est téléchargé même si vous n’utilisez que quelques caractères. Certaines fontes pèsent plus de 1Mo et vont considérablement ralentir l’affichage de votre document.@font-face {
font-family: 'SeanRegular';
src: url('webfonts/handsean-webfont.eot');
src: local('?'), url('webfonts/handsean-webfont.woff') format('woff'), url('webfonts/handsean-webfont.ttf') format('truetype'), url('webfonts/handsean-webfont.svg#webfontttRXhnWa') format('svg');
font-weight: normal;
font-style: normal;
}h1 {
font-family: "SeanRegular", "Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
} <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->.#content figure {
-moz-box-shadow: 1px 1px 13px #999;
-webkit-box-shadow: 1px 1px 13px #999;
box-shadow: 1px 1px 13px #999;
} h1 {
text-shadow: 0px 0px 5px #fff;
} 
header nav a:hover, header nav a:focus {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
} #content figure {
background: rgba(255,255,255,0.2);
border: 12px solid rgba(255,255,255,0.2);
} #rss-leaf
{
display: block;
position: absolute;
right: 460px;
/* FIXME sprite */
/*background: url(images/icons/rss-leaf.png) no-repeat center center;*/
background: url(images/sprites/icons-big.png) no-repeat -10px -10px;
width: 63px;
height: 59px;
text-indent: -150px;
text-decoration: none;
}
#rss-leaf:hover
{
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
} HTML5, même à l’état de brouillon, est déjà parfaitement utilisable en production (avec une astuce pour IE), sous réserve d’éviter les balises encore "conflictuelles" telles que <canvas>, <audio> et <video>.
inline-block, c’est bien, utile, et ça marche... là aussi sous certaines conditions.
Les effets CSS3 nécessitent tous (et pour un certain temps encore) de prendre en compte le "cas Internet Explorer". Des alternatives existent en JavaScript, mais à un moment il faut faire un choix car on ne pourra pas obtenir un équivalent "au pixel près".
Voir en ligne : Nouveautés HTML5
Bonus : message d’avertissement pour IE6
Cette partie bonus ne fera pas plaisir à tout le monde, notamment certains modérateurs, mais s’il est un combat que je tiens à mener c’est celui de tout faire pour prévenir les internautes qu’Internet Explorer 6 est une antiquité obsolète et, surtout, peu sécurisée.
Pour ce faire, j’ai pour habitude d’afficher un bandeau contenant message d’avertissement en haut de mes sites web. A l’aide d’un commentaire conditionnel réservé à IE6, vous pouvez très facilement cibler ce navigateur et lui adresser un code HTML dédié :
<!--[if lte IE 6]><div class="alert-ie6">
Ici votre message d'avertissement pour IE6 le préhistorique
</div>
<![endif]-->
Fichier html :