Accueil » Ressources » Theming Drupal ? Topo sur Html5 / css3, Drupal7

Theming Drupal ? Topo sur Html5 / css3, Drupal7

 

Un bon moment maintenant qu'on en parle d' HTML 5 ! Révolution pour certains, effet d'annonce pour d'autres ; quelques soient les avis on est encore loin du tout HTML5. Mais pourquoi en parler autant si c'est pour ne pas l'utiliser ? C'est une question qu'on s'est posé, puisque nous faisons partie des agences qui n'y sont pas [encore] à 100% :

=> Doit-on passer tous nos développements en html 5 ?

 

La réponse de nos experts à l'agence, qu'ils soient experts Drupal, experts intégration, experts R&D, etc. est OUI.
OUI il serait bon incessamment sous peu de n'utiliser que l'HTML 5, et ce pour les raisons suivantes :

1. HTML5 est le nouveau standard, donc c'est LA bonne pratique que de s'y conformer.
2. Il offre de nouvelles fonctionnalités qu'il serait dommage de rater :
http://www.html5rocks.com
http://www.html5rocks.com/en/why
(avec CSS3 et Javascript)

 

Et si on est tellement convaincu, il est tout de même bon de reconnaître qu'il y a quelques contraintes au tout html5 ; listons les principales et, surtout, voyons comment les contourner

 

Compatibilité avec les navigateurs

HTML5 c'est une nouvelle variante de la syntaxe. Mais à partir du moment où l'on a déclaré le doctype HTML5 et que l'on continue à écrire en Xhtml, ça ne pose pas de problèmes. En fait, on ne change rien, mais techniquement on fait du HTML5.

Le problème est toujours du côté d'Internet Explorer (6 à 9 inclus). Le navigateur ne reconnait pas les nouvelles balises (header, footer, section, article, aside, navigation) introduites par HTML5. Il existe cependant un script js très simple à mettre en place (et inclus dans la plupart des thèmes HTML5) http://code.google.com/p/html5shiv/ et le tour est joué.

Malheureusement, le degré d'adoption d'HTML5 (et CSS3) d'un navigateur à l'autre n'est pas le même. Ce n'est pas 0 ou 100% mais entre les 2. Et sans surprise, Chrome et Firefox s'en sortent généralement mieux que les autres.

 

Quelques ressources pour y voir plus clair :
http://caniuse.com/
http://html5readiness.com/

 

Donc pragmatiquement, il ne faut pas tout vouloir utiliser, mais se limiter à un ensemble de fonctionnalités qui sont majoritairement compatibles.

En fait c'est surtout CSS3 qui pose problème notamment avec les "rounded-corners", les dégradés, les ombres et les media-queries. Toutes ces choses qui sont superbes et pratiques pour le design, mais qui deviennent vite un cauchemar en theming.

Mais encore une fois ; là où il y a problème il y a solutions.

 

1. Il y a un script pour ça

C'est un peu une solution de facilité, mais elle a le mérite de fonctionner. Il existe en effet des scripts qui permettent en javascript de « simuler » certaines propriétés CSS3 pour les anciennes versions de IE.
Ex : http://css3pie.com/

 

Seule limitation et non des moindre, tout cela nécessite d'avoir Javascript activé sur son navigateur. Mais à l'agence nous pensons qu'il faut arrêter d'avoir peur de cela :
=> Parce que nous essayons au maximum d'utiliser javascript de façon non intrusive, pour disposer des mêmes fonctionnalités avec ou sans js ; le reste étant cosmétique
=> Parce que (à la louche) 99% des internautes ont activé javascript
=> Parce que le 1% restant, qui a su le désactiver sur son ordinateur, sait à quoi cela sert et ne vous en tiendra pas rigueur si l'ombre portée a disparu sur Internet Explorer 7 (et vous en connaissez beaucoup des geeks qui utilisent IE7 hein ???)

 

2. On détecte et on adapte

Le principe : utiliser une bibliothèque JS (ex : http://modernizr.com/) pour tester les fonctionnalités supportées par le navigateur en cours.

Généralement ça rajoute une balise <class> avec les fonctionnalités permises sur la balise <body>.

On peut ensuite modifier la feuille de style CSS en fonction.
Par exemple, si Gradient est supporté, on génère un dégradé en fond avec les CSS et, le cas échéant, on utilise une image.

Autre possibilité : on utilise les coins arrondis sur Firefox et Chrome et on laisse normal sous Internet Explorer.

C'est le principe du « progressive enhancement » ou « amélioration progressive ».
Pour aller plus loin sur ce point c'est ici.
Cette solution permet de ne laisser aucun navigateur, même ceux engendrant le plus de crises de nerfs, sur le bord de la route.

C'est cependant très coûteux en temps de développement, détail non négligeable lorsque l'on travaille en agence.

 

Autres ressources :
=> Il y enfin ce site qui permet de bien démarrer avec du code HTML5 : http://html5boilerplate.com
=> ou encore le thème Drupal qui s'en inspire : http://drupal.org/project/boilerplate

 

Emploi Natif dans Drupal

Le thème de base Drupal 7 n'utilise pas HTML5. Drupal 8 le fera très certainement. Ceci explique pourquoi on n'utilise pas par défaut l'HTML 5.

Une option dans le thème Omega existe afin d'utiliser HTML5. L'agence active actuellement cette option sur tous ses nouveaux développements.

Cependant et nous conclurons avec ce sur quoi nous avions commencé : cette option permet seulement de déclarer un doctype. À l'intégrateur ensuite de choisir d'utiliser, ou non, les nouvelles fonctionnalités HTML5 dans son thème.

 

HTML5 is a new variant of the

HTML5 is a new variant of the syntax. But from the moment you said HTML5 doc type and that we continue to write XHTML, it's not a problem. In fact, it does not change anything. Thank you for this amazing article on the subject.

D'autres solutions existent

Bonjour et merci pour cet article, qui devrait je pense citer les modules "Elements" et "HTML5 Tools" qui permettent à eux deux d'intégrer le HTMl5 sous Drupal très facilement.

CSS standards pour Drupal8

Poster un nouveau commentaire

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plus d'informations sur les options de formatage

En soumettant ce formulaire, vous acceptez la politique de confidentialité de Mollom.