Ce n'est pas bien de mêler code HTML, CSS et JavaScript !

Victor Brito — Mon, 24 Nov 2008 13:17:00 +0100

Bruno Bichet a publié hier sur son blog un billet expliquant pourquoi ce n'est pas une bonne pratique que de mélanger le code HTML, les CSS (à coup d'attributs style) et le JavaScript (à coups d'attributs d'événements de type onnom de l'événement). Il s'agit d'une traduction (Bruno Bichet parle de craduction ) d'un billet de Robert Nyman, en anglais, à ce sujet.

Dans l'ensemble, il n'y a rien à ajouter aux explications de Bruno Bichet, explications qui se doublent d'une démonstration de ce qu'il faut faire si l'on se soucie de bonnes pratiques de codage en CSS et en JavaScript : autrement dit, il faut séparer le contenu (et la structure, de préférence conforme au balisage sémantique, de ce contenu) de sa présentation et des comportements dynamiques qui s'y appliquent. N'oublions pas que c'est pour tendre à cet objectif de séparation que les feuilles de styles sont apparues (pour rappel, il y a bientôt douze ans !) et qu'on a mis au point le concept d'unobstrusive JavaScript (en bon français, le JavaScript non intrusif).

D'ailleurs, à propos de JavaScript, j'ai une remarque à faire concernant la gestion des événements et la résolution des conflits éventuels entre plusieurs gestionnaires d'événement. Il n'est pas nécessaire de recourir à une bibliothèque JavaScript pour faire cohabiter pacifiquement plusieurs gestionnaires d'événements : en effet, la spécification DOM niveau 2 événements du W3C a de quoi suffire, ainsi que la gestion des événements propre à Internet Explorer.

function fnAjaxNews ()
{
  // Get news through Ajax
}

function fnGetNews ()
{
  var oGetNews = document.getElementById ('get-news');
  // For standards-compliant browsers
  if (oGetNews.addEventListener) oGetNews.addEventListener ('click', fnAjaxNews, false);
  // For Internet Explorer
  else if (oGetNews.attachEvent) oGetNews.attachEvent ('onclick', fnAjaxNews);
  // For browsers who do not understand DOM level 2, there is no event
  else return;
}

// Let us load the function above
function fnLoad ()
{
  // For standards-compliant browsers
  if (window.addEventListener) window.addEventListener ('load', fnGetNews, false);
  // For Internet Explorer
  else if (window.attachEvent) window.attachEvent ('onload', fnGetNews);
  // For browsers who do not understand DOM level 2, there is no event
  // (which means these browsers will behave as though JavaScript were deactivated or not supported)
  else return;
}
// Execute
fnLoad ();

Sans doute y a-t-il plus de code à pondre que si l'on utilisait une bibliothèque JavaScript ; mais, ce bout de code a l'avantage d'éviter les conflits (d'autres fichiers JavaScript pourront être appelés qui gèrent les événements de la sorte) et de ne pas servir de JavaScript (c'est un choix) aux navigateurs incapables d'implémenter l'une des deux méthodes d'ajout d'événement (que ce soit la méthode standard ou la méthode propriétaire d'IE) : pour ces derniers, il y aura donc une dégradation élégante, qui ne sera pas gênante, pourvu que le contenu soit parfaitement accessible sans JavaScript.

Blog - Britoweb - Tag - bonnes pratiques codage

Ce n'est pas bien de mêler code HTML, CSS et JavaScript !