Jump to content

[CSS/javascript] + Browser détector


Recommended Posts

Bonjour à tous,

je vous expose mon soucis, je construit un site, conforme au norme xhtml transitionnel (pas encore au strict) .

J'ai mis à disposition un systeme sur le site permettant le changement de skins (affichages pour ceux qui savent pas)

le code est celui çi :

 <form action="/switch.php" method="post">
<!-- vous pouvez choisir d'utiliser la méthode GET, le fonctionnement en sera le même -->

  <select name="style">
<option value="<?php echo $css1; ?>"<?php if ($_COOKIE['feuilleStyle'] == '<?php echo $css1; ?>') { echo ' selected="selected"'; } ?>>Style simple</option>
<option value="<?php echo $css2; ?>"<?php if ($_COOKIE['feuilleStyle'] == '<?php echo $css2; ?>') { echo ' selected="selected"'; } ?>>Style black-teck</option>
<option value="<?php echo $css3; ?>"<?php if ($_COOKIE['feuilleStyle'] == '<?php echo $css2; ?>') { echo ' selected="selected"'; } ?>>Style White-teck</option>
  </select>
  <input type="hidden" name="redirection" value="http://<?=htmlspecialchars($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
  <input type="submit" value="Changer" />

</form>

Bon il fonctionne parfaitement, mais j'ai découvert que mes css ne sont pas du tout correct sous ie , les décalages de M***** du fait qu'il ne comprenne pas les normes .... etc ...

Aussi j'ai décider de mettre un browserdetector en javascript (.js), j'ai découvert ce code :

<script type="text/javascript">
var nomnav = navigator.appName;
if (nomnav == 'Microsoft Internet Explorer') {
 document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles_ie.css'>");
}
else {
 document.write("<link rel='stylesheet' media='screen' type='text/css' href='styles.css'>");
}
</script>

Bon le soucis est qu'il me faut afficher dans mon form le choix des skins en fonction aussi de ie .

je m'explique ce que je souhaite faire :

Quand un utilisateur sous firefox ou opera ou autre .... viens sur le site le browser détector affiche le templates par défault, et si il choisi dans le menu déroulant je souhaite que le menu ne lui affiche que les skins générique.....(pas pour ie).

Et quand un utilisateur IE viens sur le site .... le browserdetector lui affiche la skin par défault spécial IE , et quand il ouvre le menu des skins , que seul les skins créer spécialement pour IE lui soit proposer.

dossier des templates au final :

-basic.css
-black.css
-white.css
-basic_ie.css
-black_ie.css
-white_ie.css

comment doit-je faire ?

svp aidez moi ....

Link to comment
Share on other sites

nan, le truc c'est que je veux savoir le code que je peux utilisé , mais un code valid w3c aussi ;s

edit : en fait par exemple pour le menu de choix je pense que ca doit pas etre dur un petit if et else mais if quoi et else koi lol ^^ :)

car aprés pour le browser detector ben je modifier pour que sous ie le style meme si il as déja été choisi au cours d'une autre visite ai le _ie.css en fait , je pense pas que ce sera dur , mais bon c'est pour le menu moi que ca me dérange ^ :)

Link to comment
Share on other sites

Si j'ai bien compris, tu veux ne proposer que les styles gérables par le navigateur de l'internaute?

Si c'est ca, tu dois pouvoir ajouter/retirer des <option> d'un <select> via JavaScript et/ou css (faut faire mumuse avec le DOM en fait).

Une solution envisageable serait de mettre un style css pour les <option> proposant un skin IE et un autre style CSS pour les autres <option>, et le CSS (via un appel JavaScript qui l'applique à la volée, pourquoi pas) rend 'hidden' les styles qu'il ne faut pas... A tester, car je ne suis pas sûr du tout de ce que je te propose :mdr2:

Link to comment
Share on other sites

Et pourtant Theocrite à raison. Nul besoin de passer par du javascript pour faire ca.

Utilises les Commentaires Conditionnels

Typiquement (exemple simplifié):

<!--[if lte IE 6]>
<select name="style">
 <option value="<?php echo "css_ie1.css";?>">Css1</option>
</select>
<![endif]-->

<!--[if !IE]> <-->
<select name="style">
 <option value="<?php echo "css_1.css";?>">Css1</option>
</select>
<!--> <![endif]-->

Meme chose au niveau du <head> pour les stylesheets.

Link to comment
Share on other sites

oué j'ai trouver pendant la nuit en fait :

<?php 
if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
{
// IE
echo $stylesheets_ie;
}
else
{
// Autre
echo $stylesheetsothers;
}
?>

et les stylesheets :

$stylesheets_ie = '<link rel="stylesheet" type="text/css" media="screen" title="Style de l\'utilisateur" href="'  . (isset($_COOKIE['feuilleStyle']) ? htmlspecialchars($_COOKIE['feuilleStyle']) : 'basic_ie') . '.css" />';
$stylesheetsothers = '<link rel="stylesheet" type="text/css" media="screen" title="Style de l\'utilisateur" href="'  . (isset($_COOKIE['feuilleStyle']) ? htmlspecialchars($_COOKIE['feuilleStyle']) : 'basic') . '.css" />';

enfin voilà merci en tout cas de l'aide ^^

Link to comment
Share on other sites

oui par xxs mais pas comme j'ai fait , le xxs ca passe pas ....

aprés oui je sais certain navigateur peuvent se faire passer pour d'autre mais bon , pour l'instant çà me suffira , mais je vais étudier le lien que vous m'avez donner

kézako xxs?

Sinon oui, certains navigateurs se font passer pour IE (c'est, ou c'était, le cas d'Opéra)! Et donc ca risque de poser un pb...

LA solution: que tous les navigateurs respectent les recommandations du W3C!

Ouais, en fait, fais un hack, ca marchera bien avant que IE soit respectueux ;)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...