11548 sujets

JavaScript, DOM et API Web HTML5

Une feuille de style au hasard?

Je voulais un script qui permettrait de charger une feuille de style au hasard à chaque chargement de la page. un peut de googlage a donné ceci (pour du XHTML1 strict):

<script type="text/javascript">
<![CDATA[
var rndNum = Math.floor(Math.random()*2);

var stylSh = "<link href='style" + rndNum + ".css' rel='stylesheet' type='text/css' />";
document.write(stylSh);
]]>
</script>


Seulement, pour une raison qui m'échappe totalement (car je suis un incompétent total en Jscript), ce code refuse de fonctionner. Quelqu'un a une correction ou une meilleure solution?
Essaie ça pour voir :
<script language="javascript1.2">
var skins= 5; //-----> nombre de skins au total (ici 5 fichiers : skin1.css, skin2.css, skin3.css, skin4.css, skin5.css) 
ChangeSkin= Math.round(Math.random()*(skins-1)+1);  //----> définit un nombre aléatoire entre 1 et 5
document.write('<link rel="stylesheet" type="text/css" href="skin' + ChangeSkin + '.css"></div>')  //----> écrit le skin à charger
</script>

...testé sous ie5 et ns7 Mac.... à tester aussi ailleurs Smiley smile

Si tu veux mettre tes skins dans un rep, remplace [href="skin'] en ligne 3 par [href="MonRep/skin' ]
Si tu veux nommer tes skins en clair (genre skin_bleu.css) faudra créer un array... est-ce vraiment utile ?
Arsene a écrit :
Essaie ça pour voir ..........

Ce script ne marchera pas en XHTML servit en application/xhtml+xml Smiley decu Déjà au niveau de l'attribut language, mais aussi à cause de document.write qu'il faut remplacer par des fonctions DOM.
Circeus a écrit :
Je voulais un script qui permettrait de charger une feuille de style au hasard à chaque chargement de la page. un peut de googlage a donné ceci (pour du XHTML1 strict):


Bonjour Arsene et sois le bienvenue Smiley smile

Je n'ai pas les compétences pour répondre à Circeus, ni pour juger de ta réponse, mais le lien que tu donnes ne passe pas la validation W3C, hors, Circeus précise (voir en gras ci-dessus) qu'il souhaite faire sa page en xhtml strict... Aurais-tu, éventuellement, une solution plus adaptée sous le coude ? Smiley cligne
...pas dans l'immédiat (j'ai bricolé ça vite fait) mais c'est à creuser.
En attendant ma page-test est bien ouverte par :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Tu peux vérifier le code-source.
Arsene a écrit :
...pas dans l'immédiat (j'ai bricolé ça vite fait) mais c'est à creuser.
En attendant ma page-test est bien ouverte par :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Tu peux vérifier le code-source.

Hum, tu as là une DTD HTML4, avec des attributs XHTML 1 Smiley eek
Bon, sinon j'ai essayé, et voici ma solution, j'ai un peu remixé ce qui s'est dit ici. En gros, y'a un <link> avec le style par défaut, et on modifie le href du link aléatoirement :
<?xml version="1.0" enconding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Style aléatoire</title>
		<link id="random" rel="stylesheet" type="text/css" href="style1.css" />
		<script type="text/javascript">
			var numStyle = 2;
			document.getElementById('random').href = 'style' + Math.round(Math.random() * numStyle + 1) + '.css';
		</script>
	</head>
	<body>
	
	  [...]
	
	</body>
</html>

Avec pour fichiers de style style1.css, style2.css, style3.css, etc...
Modifié le 08 Feb 2005 - 14:36
Allez, un bon geste s'il-vous-plaît : on ne dira pas à quel point ce truc de styles aléatoires est une très mauvaise idée pour l'utilisateur Smiley rolleyes , mais en échange, vous ajoutez le code nécessaire pour qu'il puisse au moins obliger la page à s'afficher avec celui des styles qui lui convient ! Smiley cligne (via les styles alternatifs)


<link id="random" rel="stylesheet" type="text/css" href="style1.css" title="random" />

<link rel="alternate stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />


(Attention à bien ajouter un title="ce_que_vous_voulez" au lien vers la feuille de style aléatoire, pour qu'elle ne soit pas permanente.)
Modifié le 08 Feb 2005 - 14:54
Le seul problème des styles alternatifs je dirait, c'est que 99% des gens : soit ne connaissent pas, soit utilisent un navigateur qui ne permet pas de les choisirs sans JavaScript par derrière Smiley cligne

Sinon je suis d'accord qu'il n'y a pas plus déroutant que d'afficher un style différent à chaque fois. Genre pour ma part, quand j'essaye de retrouver un site dont j'ai perdu l'adresse, j'essaye de le retrouver "visuellement", donc via l'apparence qu'il avait. Donc c'est sûr que si il change à chaque fois, ça ne va pas m'aider...

Enfin j'ai tout de même donné une proposition de script, qui, j'espère, fait dans les règles de l'art niveau syntaxe...
FlorentG a écrit :
Le seul problème des styles alternatifs je dirait, c'est que 99% des gens : soit ne connaissent pas, soit utilisent un navigateur qui ne permet pas de les choisirs sans JavaScript par derrière Smiley cligne


Avec ce type de raisonnement, on ne fera rien évoluer !

Le problème des navigateurs modernes est que, jusqu'à une date récente, 99% des gens ne s'en servaient pas et ignoraient même leur existence : si on avait dit à partir de là "ça ne vaut pas le coup de les utiliser"... ils seraient toujours confidentiel Smiley rolleyes

Ce n'est pas parce qu'IE n'implémente pas les styles alternatifs natifs qu'il ne faut pas encourager leur utilisation. Surtout quand ils permettent de corriger partiellement une vraiment très mauvaise idée Smiley cligne
Laurent Denis a écrit :

Avec ce type de raisonnement, on ne fera rien évoluer !
[...]

Je sais, je sais Smiley cligne C'est pour ça que j'ai mentionné que c'était le seul problème Smiley smile
En espérant que ce post ne soit pas totalement inutile ou hors-sujet.

Pour ceux qui ont (la chance d'avoir) Firefox 1.0, The navigateur, il existe une petite extension qui permet de choisir facilement parmis les feuilles de style alternatives par un icone dans la barre des tâches:

Stylesheet Chooser Plus

Voilà,
@+, HoPHP
Sujet clos
Aller à