Discussion :

[boutmos]

Je travail sur un squelette HTML qui utilise 2 feuilles de styles, une pour un style graphique au design fouillé et une autre plus accessible pour les mal voyants.

Dans mon code HTML, j'utilise un commentaire conditionnel pour IE6, mais voila quand je bascule mon affichage avec la 2eme feuille de style, ce commentaire conditionnel m'ennuis bcp. Dans mon cas, il serait plus pratique de le faire au sein de ma feuille CSS.

Est ce possible ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!--[if lte IE 6]><style type="text/css">	
div#zonetext{
	overflow: hidden;
	width: 652px;
	margin: 0px;
	padding: 4px;
}
</style><![endif]-->

Pourquoi je suis ennuié ? car ci dessus je travail en PX et dans la feuille accessible, je travail en %

[Erwan31]

Bonsoir,
tuas plusieurs solutions possible mais la plus simple est de déclarer ton link CSS de ta CSS dédiée à l'accessibilité SOUS le commmentaire conditionnel d'IE pour que la règle div#zonetext {...} de cette dernière prenne le dessus sur celle de la CSS d'IE selon les règles de la cascade.

Ceci dit pourrais tu donner un peu plus de précision sur cette méthode d'amélioration de l'accessibilité.
Tu utilises un style switcher en PHP via une liste déroulante pour passer d'un CSS à l'autre?

[boutmos]

tu as plusieurs solutions possible mais la plus simple est de déclarer ton link CSS de ta CSS dédiée à l'accessibilité SOUS le commmentaire conditionnel d'IE pour que la règle div#zonetext {...} de cette dernière prenne le dessus sur celle de la CSS d'IE selon les règles de la cascade.

Je ne peux pas imposer un style par rapport a un autre, afin de ne pas etre "emmerdé", il faut je me débarrasse de tout code CSS dans mes squelettes HTML, ce qui est de plus la méthode la plus correcte pour dissocier le contenu de la mise en forme.
J'ai donc dû virer le hack CSS dans ma page et revoir ma CSS pour le style graphique. J'ai passé la taille de mes colonnes et autres DIV en %. J'arrive a un resultat correcte sous IE mais j'ai néanmoins encore quelques bug ...
(J'en ai marre si IE6 n'existait pas j'aurais pas perdu une demi journée de travail....)

Pour l'accessibilité , c'est delicat : j'ai codé çà en javascript ... ce qui est discutable en terme d'accessibilité si l'utilisateur l'a désactivé. Je sais pas si mon code est propre ou pas mais en tout cas le switcher de CSS fonction correctement et correspond a mes besoins. J'avais trouvé des switcher mais d'une page a une autre , je perdais cette "Option", j'ai donc du passer par les cookie pour mémoriser mon style de navigation.

Donc dans le head, j'ai ce code la pour charger le style mémorisé et l'appliquer a la construction de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<script type="text/javascript">
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"squelettes/"+setStyle()+".css\" id=\"link_style\"/>");
</script>

dans le HTML pour appeller le switcher j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
if (currentCssStyle == '1'){
   document.write("<li class\"txtBrute\"><a href=\"#\" onClick=\"changeCSS();\">Texte et Images</a></li>");
} else {
   document.write("<li class\"txtBrute\"><a href=\"#\" onClick=\"changeCSS();\">Texte uniquement</a></li>");
}
</script>

et ci dessous, une partie de mon fichier .JS qui gere le cookie et applique le style selectionné.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Fonction de creation et de recuperation des cookies
function setCookie(name, value, expires, path, domain, secure) {
	document.cookie=name+"="+escape(value)+
		((expires==undefined) ? "" : ("; expires="+expires.toGMTString()))+
		((path==undefined) ? "" : ("; path="+path))+
		((domain==undefined) ? "" : ("; domain="+domain))+
		((secure==true) ? "; secure" : "");
}
 
function getCookie(name) {
	if (document.cookie.length==0) { return null; }
	var regCookies=new RegExp("(; )","g");
	var cookies=document.cookie.split(regCookies);
	for (var i=0; i<cookies.length ; i++) {
		var regInfo=new RegExp("=","g");
		var infos=cookies[i].split(regInfo);
		if (infos[0]==name) {
			return unescape(infos[1]);
		}
	}
	return null;
}
 
// definition de la date d'expiration d'un cookie , ici 2 semaines
var dateExpiration = new Date();
dateExpiration.setTime(dateExpiration.getTime()+1000*3600*24*14);
 
// Gestion du style graphique/Texte Brute
// Style CSS par defaut =	0 ---> Feuille ia_style.css
// 					1 ---> Feuille texte_brut.css
 
if (getCookie("cssStyle") == null) {
	setCookie("cssStyle", "0", dateExpiration, "/");
}
 
// #########################################################################################
 
var currentCssStyle = getCookie("cssStyle");	//Variable globale pour recuperer le style CSS defini dans le cookie "cssStyle"
 
// Gerer le changement de feuille de style
function changeCSS() {
	if (currentCssStyle == '0') {
		currentCssStyle == '1';
		setCookie("cssStyle", "1", dateExpiration, "/"); // On ecrit dans le cookie pour lui indiquer sa nouvelle valeure		
		} else {
			currentCssStyle == '0';
			setCookie("cssStyle", "0", dateExpiration, "/");
		}
	location.reload();	// On rafraichi la page pour lui appliquer le style
}
 
function setStyle() {
	//Cette fonction fixe le style CSS dans le head en fonction du parametre sauvegardé dans le cookie 'cssStyle'
	// On recupere la valeur contenu dans le cookie CssStyle
 
	if (getCookie("cssStyle") == null)	//Si le cookie n'existe pas, on fixe le style par defaut a 0 (ia_style)
	{
		return 'ia_style';		
	} else { // Sinon on fixe le style en fonction de la valeur contenue dans la variable 'currentCssStyle'
		if (currentCssStyle == '0') return 'ia_style';
		if (currentCssStyle == '1') return 'texte_brut';
	}
}