Comment utiliser correctement JavaScript et CSS dans la documentation XHTML

Dans de plus en plus de sites Web, l'utilisation de XHTML remplace HTML4 à une vitesse très rapide. Cependant, certains navigateurs grand public ne prennent actuellement pas en charge XHTML, et certains fabricants de pages Web ne comprennent pas suffisamment les différences entre XHTML et HTML4, ce qui rend XHTML lent dans le développement du Web.

Actuellement, l'un des principaux malentendus sur XHTML est qu'il s'agit d'une autre version de HTML. Un fait qui provoque ce malentendu est que Microsoft Internet Explorer ne prend en charge que XHTML avec MIME Format Text / HTML et non le format d'application / XHTML + XML recommandé.

Lorsqu'une page XHTML est analysée dans le format MIME du texte / HTML, il n'a aucune différence par rapport à la page HTML, et lorsqu'il est analysé dans le format MIME de Text / XML ou application / xhtml + XML, il se conformera à des règles de rédaction et d'affichage XML strictes.

Les contenus à l'intérieur du style et des balises de script provoqueront des différences différentes lorsque XHTML est analysé au format XML (plutôt que le format HTML).

<script type = text / javascript>

var i = 0;

while (++ i <10) {

// ...

}

</cript>

Remarque: l'exemple de code ci-dessus n'est pas un bon format xhtml car il n'utilise pas de balises autorisées dans xhtml ou xml <

Les auteurs familiers avec HTML comprennent généralement que la place de contenu de style et de balise de script dans les balises de commentaire masquera ces contenus dans le navigateur, mais certains navigateurs ne peuvent pas les comprendre.

<style type = text / css>

<! -

Corps {couleur fond: bleu; couleur: jaune;}

->

</ style>

<script type = text / javascript>

<! -

var i = 0;

var sum = 0;

pour (i = 0; i <10; ++ i)

{

sum + = i;

}

alert ('sum =' + sum);

// ->

</cript>

L'exemple ci-dessus montre comment ignorer le contenu dans la balise de commentaire dans le navigateur. Dans le même temps, cet exemple montre également la différence entre le contenu du navigateur dans le format texte / xml et le format d'application / xhtml + xml.

Mozilla 1.1+ / opéra 7

Aucun CSS n'est appliqué, aucun javascript n'est exécuté

Netscape 7.0x / mozilla 1.0.x

N'appliquant pas CSS, mais exécutant JavaScript

Internet Explorer 5.5+

Le document n'est pas affiché. (Voir: https://developer.mozilla.org/ta ... _in_xhtml_documents)

Un autre problème se pose lors de l'utilisation de balises de commentaire pour le traitement en JavaScript sur la page XHTML est qu'il y aura deux barres horizontales consécutives (-) en JavaScript:

<script type = text / javascript>

<! -

var i;

var sum = 0;

pour (i = 10; i> 0; --i)

{

sum + = i;

}

// ->

</cript>

Mettre le contenu à l'intérieur de la balise de script dans le bloc CDATA peut gérer le problème de deux barres consécutives dans les commentaires, mais cela ne le fera pas soutenir par certaines versions inférieures des navigateurs car ils ne peuvent pas comprendre XML. Heureusement, nous pouvons commenter les blocs CDATA en utilisant des commentateurs en JavaScript pour atteindre la compatibilité.

<script type = text / javascript>

// <! [Cdata [

var i = 0;

tandis que (++ i <10)

{

// ...

}

//]]>

</cript>

N'écrivez pas le style et le script directement dans les pages xhtml. Une bonne alternative consiste à utiliser des fichiers externes pour écrire CSS et JavaScript avant de l'introduire dans XHTML.

Cette solution de recommandation semble très bonne. Dans tous les cas, il fait passer la page du texte / HTML vers l'application / xhtml + xml, au moins dans les prochaines années.