[RESOLU] hack pour Safari 5.1.7

11 mars 2015, 17:25

Bonjour,

Le titre du message explique déjà mon problème et ma question.

J'ai effectivement des problèmes de hacks entre les différents navigateurs.

Pour IE, j'ai du js qui renvoit sur une feuille de style externe spécifique pour IE:

Code : Tout sélectionner

<script> <!--script pour IE--> /*
function loadCss( fichierCss){ 
  var link=document.createElement("link"); 
  link.setAttribute("rel", "stylesheet"); 
  link.setAttribute("href", fichierCss ); 
 
   document.getElementsByTagName("head").item(0).appendChild(link); 
} 
//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) { 
loadCss("mafeuilleexterne.css") ; //inclusion dynamique du css compatible ie 
}
</script>

C'est bon pour IE.

Pour les autres navigateurs je ne peux pas faire comme ça, donc tous mes autres
hacks doivent être ensemble dans la même feuille css.

Pour Firefox j'utilise:

Code : Tout sélectionner

@-moz-document url-prefix(){...}

Ca fonctionne très bien aussi.

Pour Google et Opéra j'utilise:

Code : Tout sélectionner

@media screen and (-webkit-min-device-pixel-ratio:0)

Ca marche sur les deux mais du coup c'est Safari qui plante

Pour info la version que j'utilise est Safari 5.1.7
Ca fait un bout de temps que je cherche.
Je ne sais pas si quelqu'un peut m'aider?

12 mars 2015, 10:26

En fait, il existe un hack qui marche pour Safari version 5.1.7 :

var isSafari = /a/.__proto__=='//';
à la suite de quoi j'écris mon CSS spécifique à Safari sans les accolades { ... }

Mais en utilisant ce hack cette fois c'est Google, Opera et Firefox qui plantent.

Si je pouvais faire en sorte que seul Safari ait la possibilté de lire ce hack...

12 mars 2015, 13:43

Bon là je bloque très sérieusement

!!
Je vais vraiment avoir besoin de quelqu'un qui m'aide

J'essaye une autre piste: les broches.
J'utilise un script js pour permettre de faire une sélection de navigateur
(le script, ce n'est bien sûr pas moi qui l'ai écrit

).

Le css a entièrement été mis dans une page php et non css pour pouvoir écrire aussi mon js.
J'ai adapté la synchronisation du css et du js comme je pensais, je ne sais pas si quelqu'un pourra
me dire ce qu'il en pense

Code : Tout sélectionner

<style type="text/css">
/* css pour une présentation générale sans tenir compte des quelques différences 
qu'il peut y avoir entre les différents navigateurs */
</style>
<script type="text/javascript">
_browser = {};

function detectBrowser() {
  var uagent = navigator.userAgent.toLowerCase(),
      match = '';

  _browser.chrome  = /webkit/.test(uagent)  && /chrome/.test(uagent);
  _browser.firefox = /mozilla/.test(uagent) && /firefox/.test(uagent);
  _browser.msie    = /msie/.test(uagent)    || /trident/.test(uagent);
  _browser.safari  = /safari/.test(uagent)  && /applewebkit/.test(uagent) && !/chrome/.test(uagent);
  _browser.opr     = /mozilla/.test(uagent) && /applewebkit/.test(uagent) &&  /chrome/.test(uagent) && /safari/.test(uagent) && /opr/.test(uagent);
  _browser.version = '';

  for (x in _browser) {
    if (_browser[x]) {
      match = uagent.match(new RegExp("(" + x + ")( |/)([0-9]+)"));
      if (match) {
        _browser.version = match[3];
      } else {
        match = uagent.match(new RegExp("rv:([0-9]+)"));
        if (match) {
          _browser.version = match[1];
        }
      }
      break;
    }
  }
  _browser.opera = _browser.opr;
  delete _browser.opr;
}
/* à partir de maintenant j'essaye de synchroniser mon css et mon js */
if (_browser.safari) {
</script>
<style type="text/css">
/* ici mon css spécifique pour Safari */
</style>
<script type="text/javascript">
}

if (_browser.firefox) {
</script>
<style type="text/css">
/* ici mon css spécifique pour Firefox */
</style>
<script type="text/javascript">
}
</script>
/* etc,... je m'arrête là pour l'instant car de toute façon ça ne fonctionne pas */

Non seulement ça ne marche pas, mais je ne sais pas par quel bout il convient mieux d'aborder
le problème

Ca commence à faire un peu long en messages, mais au moins vous avez toutes les données du problèmes et de mon état d'avancement si quelqu'un peut me donner un coup de main.

12 mars 2015, 15:49

Modération :
Afin d'obtenir plus de réponses, le sujet a été déplacé dans un forum plus approprié.

14 mars 2015, 13:00

Bonjour,
Suite au déplacement de mon message par Ryle dont je remercie,
je confirme que ce dernier est maintenant dans le bon forum,
pour tous ceux qui pourraient m'aider ^ ^

Si le contenu de mon message est un peu confus, en deux mots
je souhaiterais pouvoir être guidé quant à savoir comment gérer
les yacks qui s'annulent entre eux.
Que vous puissiez me venir en aide ou non je vous souhaite à tous
un excellent week-end !!

16 mars 2015, 11:56

PROBLEME RESOLU

Si quelqu'un rencontre ce genre de problème, je propose de commencer
par créer un fichier testhacks.html en y mettant le code suivant avec un
couper/coller:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test couleur css</title>

<script language="JavaScript">

  if((navigator.appName.indexOf("Explorer") >= 0)
&& (navigator.appVersion.indexOf('7')>=0 ))
  {
    document.writeln('<style type="text/css">');
    document.writeln("body p { color:orange }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Safari") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body p { color:brown }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Firefox") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body p { color:green }");
    document.writeln('</style>');
  }
  if(navigator.userAgent.indexOf("Chrome") >= 0)
  {
    document.writeln('<style type="text/css">');
    document.writeln("body p { color:violet }");
    document.writeln('</style>');
  }
</script>

</head>

<body>
<p>Je teste la couleur avec les CSS dans la classe.</p>
</body>
</html>

et de voir le rendu sur les différents navigateurs.
A partir de cette base qui fonctionne, vous pourrez faire les adaptements que vous voulez
avec facilité.

Je pense que les développeurs n'aiment pas trop l'utilisation de hacks assez hors normes,
ce qui explique peut-être pourquoi je n'ai pas eu de réponse à mon message.
Mais ça peut sauver quand on ne peut pas faire autrement pour éviter d'avoir un rendu
utilisateur avec des lignes qui débordent de tous les côtés

Si certains ne sont pas d'accord avec moi ils peuvent s'exprimer!!
Je suis un novice

16 mars 2015, 12:01

Petite erreur de syntaxe: il me manque un p derrière tous mes body.

ex:

Code : Tout sélectionner

 document.writeln("body p { color:orange }");

16 mars 2015, 12:27

Petite erreur de syntaxe: il me manque un p derrière tous mes body.
ex:
Code : Tout sélectionner
document.writeln("body p { color:orange }");

J'ai mis à jour ton post initial

16 mars 2015, 13:49

Effectivement, maintenant il y a des p après chaque body
Merci

[RESOLU] hack pour Safari 5.1.7

Qui est en ligne