Les Hacks CSS... Proprement

Le CSS (Cascading Style Sheets : feuilles de style en cascade) est le langage utilisé pour mettre en forme les données présentes dans les fichiers HTML et XML. Ce langage a été normé par le W3C, sa version 3.0 est en préparation.

Malgré tout les différents navigateurs web développés par divers organismes ne respectent pas tous ces normes. De ce fait chaque navigateur interprète à sa manière le CSS. Il existe alors deux possibilités pour parer ces différences:

• La première est de ne pas utiliser les propriétés trop litigieuses (tel que padding). C'est celle qu'il faudrait utiliser pour la propreté et l'accessibilité de votre site.

• La seconde est l'utilisation de hacks CSS. Le principe de base est assez simple: les navigateurs ne parsant pas de la même manière les fichiers, nous pouvons leurs tendre des pièges, certain tomberont dedans, d'autre non. Permettant ainsi une séparation et donc l'application de propriétés différentes.

Le problème de la première méthode est la restriction importante des possibilités offertes par le CSS et donc elle est très peu utilisé. Le problème de la deuxième est la création d'une feuille de style éronnée pouvant poser des problèmes complexes et détruire la présentation sur les versions futures des navigateurs.

Je vais donc vous proposer quelques solutions pour résoudre le problème en évitant ces dérangements.

Lire la suite »

XSLT via javascript

Voici un code très efficace pour appliquer une feuille de style XSL à un fichier XML grâce au javascript. L'un des avantages d'utiliser le javascript pour cette opération et de récuperer votre fichier stylé dans une variable et ainsi de l'insérer directement dans un div.

Voici le code magique, il est testé et fonctionnel sur Firefox 2, opéra 9, IE7. Malheureusement Webkit (Safari et Chrome) n'ont pas d'objets équivalent pour permettre l'impémentation.

xsltLoad ('arbre.xml', 'menu.xsl', 'menu');

function xsltLoad(xml, xsl, id){
    xsltDo(loadXML(xml), loadXML(xsl), id);
  }

function loadXML(url){
  var xmlDoc;

 	//Gecko
   if (document.implementation && document.implementation.createDocument){
     xmlDoc = document.implementation.createDocument('', '', null);
     xmlDoc.async=false;
     xmlDoc.load(url);
   }

 	//Internet Explorer
   else if (window.ActiveXObject){
     try {
       xmlDoc = new ActiveXObject('Msxml2.XMLDOM');
     } catch (e) {
       xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
     }
     xmlDoc.async = false;
     xmlDoc.load(url);
   }

  return xmlDoc;
}

function xsltDo(_xml, _xsl, _id) {
	//Gecko
	if (window.XSLTProcessor){
	  var xsltProcessor = new XSLTProcessor();
	  xsltProcessor.importStylesheet(_xsl);
	  var fragment = xsltProcessor.transformToFragment(_xml, document);
	  var target = document.getElementById(_id);

	  target.innerHTML = '';
	  target.appendChild(fragment);
	}
	//Internet Explorer
	else if (window.ActiveXObject){
	  var target = document.getElementById(_id);
	  target.innerHTML = _xml.transformNode(_xsl);
	}
}