feuilles de style en CSS

[inusite]

bonjour,

j'essaye de mettre de proposer pplusieurs feuilles de style pour mon site, je mets les bonnes balises, ex :
Dans le head de la page :
<link href="./style/screen.css" rel="stylesheet" type="text/css" media="screen,projection,tv" title="Default" />
<link href="./style/bleue.css" rel="alternate stylesheet" type="text/css" media="screen,projection,tv" title="Teinte bleue" />

J'arrive à changer le style avec l'icone en bas à gauche de firefox mais quand je clique sur une autre page ça me remets le style par default.
Faut-il ajouter un script pour qui le mémorise, ou c'est moi qui m'plante quelque part ?

En tout cas votre site est super sympa et est un bon complément aux sites comme openweb ou selfhtml, BRAVO [/i]

PS/: le site est sur mamadoo donc ... pas de php :'(

[chBok]

Sans PHP, il faudrait certainement utiliser des cookies. J'avoue qu'à part PHP, je n'ai jamais essayé de les gérer en javascipt.
A essayer, donc.

[calimo]

Tu trouvera ton bonheur sur A List Apart pour conserver ces préférences en utilisant Javascript.

[Bobe]

Solution intégralement en javascript et DOM, il suffit juste de mettre l'id du bloc dans lequel sera inséré la liste de sélection de style dans la variable parent_bloc et bien sùr d'appeller le script dans une balise <script>:

(un peu long, sorry)

Code : Tout sélectionner

/*
 * Le code html est généré comme suit (sans l'indentation et les sauts de ligne):
 * 
 * <div id="styleForm">
 *   <label for="styleSwitcher">blabla :&nbsp;</label>
 *   <select id="styleSwitcher">...</select>&nbsp;
 *   <button type="button">Go</button>
 * </div>
 * 
 * Attention de ne pas créer de conflit dans votre page avec 
 * les deux id utilisés (styleForm et styleSwitcher)
 */


//
// Indiquez ici l'identifiant du bloc auquel sera rattaché le switcher
//
var parent_bloc = '';

//
// texte et bulle d'aide
//
var label_texte = 'Changer de thème\u2009:';
var label_title = 'La persistance du style choisi nécessitera l\'envoi d\'un cookie';

//
// Nom du cookie pour la persistence du style
//
var cookie_name = 'switcher';

function createSwitcher()
{
	var current_style = '';
	
	if( document.cookie )
	{
		var arg = cookie_name + '=';
		var i   = 0;
		
		while( i < document.cookie.length )
		{
			var j = i + arg.length;
			if( document.cookie.substring(i, j) == arg )
			{
				var endstr = document.cookie.indexOf(';', j);
				if( endstr == -1 ) {
					endstr = document.cookie.length;
				}
				
				current_style = unescape(document.cookie.substring(j, endstr));
				break;
			}
			
			i = document.cookie.indexOf(' ', i) + 1;
			if( i == 0 ) break;
		}
	}
	
	//
	// Bloc du switcher
	//
	var switcher = document.createElement('div');
	switcher.setAttribute('id', 'styleForm');
	
	//
	// Label associé à la liste déroulante
	//
	var label = document.createElement('label');
	var texte = document.createTextNode(label_texte);
	label.setAttribute('for', 'styleSwitcher');
	label.setAttribute('title', label_title);
	label.appendChild(texte);
	label.appendChild(document.createTextNode('\u00A0'));
	switcher.appendChild(label);
	
	//
	// Listé déroulante
	//
	var box = document.createElement('select');
	box.setAttribute('id', 'styleSwitcher');
	var option = document.createElement('option');
	var texte  = document.createTextNode('Basique');
	
	if( current_style.length && current_style.toLowerCase() == 'basique' )
	{
		option.setAttribute('selected', 'selected');
	}
	
	option.appendChild(texte);
	box.appendChild(option);
	
	for( var i = 0, m = document.styleSheets.length; i < m; i++ )
	{
		var CSSStyle = document.styleSheets[i];
		
		if( CSSStyle.title.length )
		{
			var option = document.createElement('option');
			var texte  = document.createTextNode(CSSStyle.title);
			
			if( current_style.length && CSSStyle.title.toLowerCase() == current_style.toLowerCase() )
			{
				option.setAttribute('selected', 'selected');
			}
			
			if( !CSSStyle.disabled && !default_style )
			{
				var default_style = CSSStyle.title;
				
				if( !current_style.length )
				{
					option.setAttribute('selected', 'selected');
				}
			}
			
			option.appendChild(texte);
			box.appendChild(option);
		}
	}
	
	switcher.appendChild(box);
	switcher.appendChild(document.createTextNode('\u00A0')); // Espace entre la liste de sélection et le bouton
	
	//
	// Bouton
	//
	var button = document.createElement('button');
	var texte  = document.createTextNode('Go');
	button.setAttribute('type', 'button');
	button.appendChild(texte);
	switcher.appendChild(button);
	
	button.onclick = activeStyle;
	
	//
	// Insertion du switcher dans le document
	//
	document.getElementById(parent_bloc).appendChild(switcher);
	
	if( current_style.length && current_style.toLowerCase() != default_style.toLowerCase() )
	{
		activeStyle(current_style);
	}
}

function activeStyle(selected_style)
{
	if( typeof(selected_style) != 'string' )
	{
		var switcher_box   = document.getElementById('styleSwitcher');
		var selected_style = switcher_box.options[switcher_box.selectedIndex].text;
	}
	
	for( var i = 0, m = document.styleSheets.length; i < m; i++ )
	{
		var CSSStyle = document.styleSheets[i];
		
		if( CSSStyle.title.length )
		{
			CSSStyle.disabled = !( CSSStyle.title.toLowerCase() == selected_style.toLowerCase() );
		}
	}
	
	var date = new Date();
	date.setTime(date.getTime() + (365 * 86400));
	
 	document.cookie = cookie_name + "=" + escape(selected_style) + "; expires=" + date.toGMTString() + "; path=/";
}

if( document.getElementById && document.styleSheets && document.styleSheets.length > 1 )
{
	window.onload = createSwitcher;
}

[Benoit]

Je préfère la solution d'A List Apart, qui est nettement plus courte et facile à comprendre, même si elle implique de faire un lien vers chaque style.

[Bobe]

Je préfère la solution d'A List Apart, qui est nettement plus courte et facile à comprendre, même si elle implique de faire un lien vers chaque style.

Le principe est sensiblement le même sauf que la solution de a list apart impose la présence de liens dans le document, si le javascript est désactivé, ces liens ne servent à rien, ce n'est pas une solution propre.

Et pour la compréhension, je ne vois pas ce qu'il y a d'incompréhensible dans ma solution :/

<script type="text/javascript" src="/path/to/switcher.js"></script> dans le <head>

et mettre le bon id dans la variable parent_bloc.

Ah, un dernier truc, la solution donnée par a list apart impose de placer manuellement les liens dans la page en fonction des feuilles css disponibles. La solution que je donne récupère d'elle même les feuilles css associées au document pour construire la liste déroulante de sélection de style

[calimo]

La solution d'A List Apart demande que la feuille soit appelée par un <link>, donc elle est toujours là sans javascript

[Bobe]

La solution d'A List Apart demande que la feuille soit appelée par un <link>, donc elle est toujours là sans javascript

euh, et ?
tu peux développer ? Je ne comprend pas ta réponse.

[Benoit]

Il veut dire qu'elle est toujours accessible via le sélecteur de style de Firefox ou Opera, c'est juste le cookie pour s'en souvenir qui ne fonctionne pas (logique). C'est aussi le cas de la tienne.

Je comprends ce que tu veux dire par "plus propre", c'est-à-dire que l'utilisateur ne pouvant pas changer de style ne verra même pas le switcher, mais je continue à trouver que ça fait beaucoup de code pour ça.

[calimo]

Le principe est sensiblement le même sauf que la solution de a list apart impose la présence de liens dans le document, si le javascript est désactivé, ces liens ne servent à rien, ce n'est pas une solution propre.

OK j'ai compris, le formulaire pour changer le style ne s'affiche pas sans javascript J'ai cru que tu parlais des feuilles de style qui ne s'affichaient pas sans js

D'où l'avantage du php

[Bobe]

Il veut dire qu'elle est toujours accessible via le sélecteur de style de Firefox ou Opera, c'est juste le cookie pour s'en souvenir qui ne fonctionne pas (logique). C'est aussi le cas de la tienne.

Ah ok. Il croyait que je parlais de <link> quand je parlais de 'liens'. Je comprend mieux.

je continue à trouver que ça fait beaucoup de code pour ça.

Il y a plus de code du fait de la génération du bloc contenant la liste déroulante et le bouton, mais ton argument n'en est pas un car le fichier javascript est normalement mis en cache.

Bon, maintenant, chacun utilise ce qu'il veut
J'aurai juste profité de ce sujet pour proposer la solution la plus adéquate et la plus correcte vis à vis de la philosophie des normes du W3C (du moins à mon sens).

calimo> Là, on veut rendre le document dynamique, ce qui est le rôle du javascript et du DOM. Le php n'est pas une solution pour ça.

[inusite]

hé bien .... un super gros MERCI à tous.
Va falloir que je me mette au JS parceque je me rend compte que je vais pas péter loin avec xhtml, html et css.
encore de longues journées qui m'attendent.
je vais essayer tt ça sans plus tarder.
je repasserai donner des nouvelles
Merci @+ tlm[/b]

ps: pour piger le JS selfhtml.com est bien ?? c'est principalement de ce site que je me sers

[Benoit]

calimo> Là, on veut rendre le document dynamique, ce qui est le rôle du javascript et du DOM. Le php n'est pas une solution pour ça.

Je me demande bien à quoi le PHP est une solution alors

[SX1]

Je lit dans le code proposé (beau boulot à priori ) qu'un cookie est généré. C'est vu par le navigateur comme un cookie de session ou pas ?

Parce ce que si c'est pas, c'est couik avec ma gestion des cookie, et je ne dois pas être le seul !

[Xanthor]

C'est là qu'intervient ma solution sans cookies 8)
Il faut un div d'id style quelque part dans la page, là où on veut afficher le switcher, et on y lie apres ce fichier javascript :

Code : Tout sélectionner

var d=document.getElementById('style');
var l=document.createElement('label');
l.setAttribute('accesskey','T');
l.setAttribute('for','styleswitcher');
var c=document.createTextNode('Changer de thème : ');
d.appendChild(c);
d.appendChild(l);
var styles=document.styleSheets;
<?php
if(isset($_SESSION['theme']))
	{
?>
for(i=0;i<styles.length;i++){if(styles[i].title.length){styles[i].disabled=(i!=<?php echo $_SESSION['theme']; ?>);}}	
<?php	
	}
?>
var s=document.createElement('select');
s.setAttribute('id','styleswitcher');
s.setAttribute('title','Changer de thème');
for(i=0;i<styles.length;i++)
	{
	if(styles[i].title.length)
		{
		var o=document.createElement('option');
		var t=document.createTextNode(styles[i].title);
		if(!styles[i].disabled)
			{
			o.setAttribute('selected','selected');
			}
		o.setAttribute('value',i);
		o.appendChild(t);
		s.appendChild(o);
		}
	}

function ch(){var ss=this.value;for(i=0;i<styles.length;i++){if(styles[i].title.length){styles[i].disabled=(i!=ss);}}var al=document.getElementsByTagName('a');for(i=0;i<al.length;i++){var href=al[i].getAttribute('href');if(!(href.match(/^http:\\\\/))){if(href.match(/\?/)){var sep='&';}else{var sep='?';}al[i].setAttribute('href',href+sep+'theme='+this.value);}}}
s.addEventListener('change',ch,false);
d.appendChild(s);

Forcement, sans cookies, faut passer par les sessions PHP...