feuilles de style en CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

inusite
Arias
Messages : 13
Enregistré le : 23 avr. 2004, 14:57

feuilles de style en CSS

Message par inusite » 24 avr. 2004, 11:34

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 :'(
Mozilla Powa

chBok
Iguane
Messages : 991
Enregistré le : 17 oct. 2003, 19:17

Message par chBok » 24 avr. 2004, 11:42

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
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 24 avr. 2004, 12:07

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

Bobe
Iguane
Messages : 741
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 24 avr. 2004, 13:26

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;
}
« La vie d’un geek est un combat perpétuel contre l’imperfection »

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

Message par Benoit » 24 avr. 2004, 14:58

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
Iguane
Messages : 741
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 24 avr. 2004, 15:34

Benoit a écrit :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 ;-)
« La vie d’un geek est un combat perpétuel contre l’imperfection »

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 24 avr. 2004, 16:05

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

Bobe
Iguane
Messages : 741
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 24 avr. 2004, 16:55

calimo a écrit :La solution d'A List Apart demande que la feuille soit appelée par un <link>, donc elle est toujours là sans javascript :wink:
euh, et ?
tu peux développer ? Je ne comprend pas ta réponse.
« La vie d’un geek est un combat perpétuel contre l’imperfection »

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

Message par Benoit » 24 avr. 2004, 16:58

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
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 24 avr. 2004, 17:07

Bobe a écrit :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 :wink: J'ai cru que tu parlais des feuilles de style qui ne s'affichaient pas sans js :oops: :lol:

D'où l'avantage du php :lol:

Bobe
Iguane
Messages : 741
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 24 avr. 2004, 17:11

Benoit a écrit : 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.
« La vie d’un geek est un combat perpétuel contre l’imperfection »

inusite
Arias
Messages : 13
Enregistré le : 23 avr. 2004, 14:57

Message par inusite » 24 avr. 2004, 17:39

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
Mozilla Powa

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

Message par Benoit » 24 avr. 2004, 23:19

Bobe a écrit :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
Salamandre
Messages : 48
Enregistré le : 02 sept. 2003, 01:13

Message par SX1 » 25 avr. 2004, 00:00

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 !
Nicolas.

Xanthor
Lézard à collerette
Messages : 280
Enregistré le : 29 juil. 2003, 18:36

Message par Xanthor » 25 avr. 2004, 00:19

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...

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 17 invités