[SharePoint 2010][HTML5] Préparer une masterpage pour HTML5 – Partie 1
Pour faire suite à ce post, la première étape obligatoire est de transformer une masterpage SharePoint 2010 afin quelle permette l’exécution du code HTML5.
Je vais donc vous montrer les différentes étapes nécessaires à cette transformation.
Dans cette article, je montrai les bases, le minimum pour avoir une masterpage compatible HTML5.
Le Doctype
C’est un très bon exemple de la simplification qu’apporte cette nouvelle version d’HTML.
Le doctype avant :
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
devient :
1: <!DOCTYPE html>
Note : L’utilisation de ce doctype peut entrainer des problèmes avec JavaSript sous IE8.
Retirer les namespaces de la balise html
La balise avant :
1: <html lang="" dir="" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">
devient :
1: <html lang="" dir="" runat="server" __expr-val-dir="ltr">
Là encore, on est dans la simplification de l’information.
Modifier la balise X-UA-Compatible
Jusqu’à présent cette balise était configurer pour permettre le mode de compatibilité IE8. Afin de profiter des nouveautés d’HTML5, il est nécessaire configurer le mode de compatibilité pour IE9.
La balise avant :
1: <meta http-equiv="X-UA-Compatible" content="IE=8"/>
devient :
1: <meta http-equiv="X-UA-Compatible" content="IE=9">
Note : Cette modification peut entrainer des problèmes avec JavaSript sous IE.
Simplifier l’encodage
Là encore la simplification est de mise.
La définition de l’encodage avant :
1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
devient :
1: <meta charset="utf-8">
Remodeler les balises script et link pour css
La compréhension de ces balises par HTML5 est améliorer. Ainsi, de base, la balise link est utilisée pour le CSS et la balise script est utilisée pour JavaScript.
Ces balises avant :
1: <script type="text/javascript">
2: <link rel="stylesheet" type="text/css" href="file.css" />
deviennent :
1: <script>
2: <link rel="stylesheet" href="file.css" />
HTML5Shiv (Modernizer)
Comme j’en parlais dans mon précédent article, il est aussi important d’assurer la compatibilité avec les anciens navigateurs.
C’est pourquoi nous allons inclure la librairie JS HTML5Shiv. Celle-ci va permettre au navigateur de comprendre les nouvelles balises HTML5 et ainsi garder cohérant le design appliqué à ces balises.
Pour se faire, il suffit donc de rajouter ces lignes :
1: <!--[if lt IE 9]>
2: <script src="https://raw.github.com/aFarkas/html5shiv/master/dist/html5shiv.js"></script>
3: <![endif]-->
Maintenant, nous sommes en présence d’une masterpage qui est prête à accueillir tout nos développement HTML5.
Comme vous avez pu le voir, tout n’est pas parfait lors de cette transformation. Il faut donc encore une fois, bien prendre en compte le risque lié à ces modifications avant de les effectuer
Dans le prochain article, j’irais un peu plus loin dans la transformation de la masterpage en la modifiant en profondeur.
Jicay
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
