[RESOLU] Hack "qui se bouffent".

par **niconicochan** » 16 mars 2015, 12:13

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

par **niconicochan** » 17 sept. 2014, 12:04

Le code ne fonctionne pas

A vrai dire, j'ai deux fichiers js qui renvoient chacun à des hacks, respectivement
pour IE et Chrome:

[javascript]
<script> 
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("hacksPourIE10etplus.css") ; //inclusion dynamique du css compatible ie
}
</script>

<script> 
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 Chrome
if ( navigator.userAgent.indexOf("Chrome")>0 ) {
loadCss("hacksPourChrome.css") ; //inclusion dynamique du css compatible Chrome
}
</script>
[/javascript]

Mon fichier CSS "général" est le suivant:

/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
.yuimenu{top:-999em;left:-999em;}.yuimenubar{position:absolute;}.yuimenu .yuimenu,.yuimenubar .yuimenu{position:absolute;}.yuimenubar li,.yuimenu li{list-style-type:none;}.yuimenubar ul,.yuimenu ul,.yuimenubar li,.yuimenu li,.yuimenu h6,.yuimenubar h6{margin:0;padding:0;}.yuimenuitemlabel,.yuimenubaritemlabel{text-align:left;white-space:nowrap;}.yuimenubar ul{*zoom:1;}.yuimenubar .yuimenu ul{*zoom:normal;}.yuimenubar>.bd>ul:after{content:".";display:block;clear:both;visibility:hidden;height:0;line-height:0;}.yuimenubaritem{float:left;}.yuimenubaritemlabel,.yuimenuitemlabel{display:block;}.yuimenuitemlabel .helptext{font-style:normal;display:block;margin:-1em 0 0 10em;}.yui-menu-shadow{position:absolute;visibility:hidden;z-index:-1;}.yui-menu-shadow-visible{top:2px;right:-3px;left:-3px;bottom:-3px;visibility:visible;}.hide-scrollbars *{overflow:hidden;}.hide-scrollbars select{display:none;}.yuimenu.show-scrollbars,.yuimenubar.show-scrollbars{overflow:visible;}.yuimenu.hide-scrollbars .yui-menu-shadow,.yuimenubar.hide-scrollbars .yui-menu-shadow{overflow:hidden;}.yuimenu.show-scrollbars .yui-menu-shadow,.yuimenubar.show-scrollbars .yui-menu-shadow{overflow:auto;}.yui-overlay.yui-force-redraw{margin-bottom:1px;}.yui-skin-sam .yuimenubar{font-size:90%;line-height:2;*line-height:1.9;border:solid 1px #808080;}.yui-skin-sam .yuimenubarnav .yuimenubaritem{border-right:solid 1px #ccc;}.yui-skin-sam .yuimenubaritemlabel{padding:0 10px;color:#000;text-decoration:none;cursor:default;border-style:solid;border-color:#808080;border-width:1px 0;*position:relative;margin:-1px 0;}.yui-skin-sam .yuimenubaritemlabel:visited{color:#000;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel1{padding-right:56px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel2{padding-right:38px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel3{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel4{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel5{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel6{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel7{padding-right:37px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel-hassubmenu{background:url(menubaritem_submenuindicator.png) right center no-repeat;}.yui-skin-sam .yuimenubaritem-selected{background:#FFFFFF) repeat-x 0 -1700px;}.yui-skin-sam .yuimenubaritemlabel-selected{border-color:#7D98B8;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel-selected{border-left-width:1px;margin-left:-1px;*left:-1px;}.yui-skin-sam .yuimenubaritemlabel-disabled,.yui-skin-sam .yuimenubaritemlabel-disabled:visited{cursor:default;color:#A6A6A6}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel-hassubmenu-disabled{background-image:url(menubaritem_submenuindicator_disabled.png);}.yui-skin-sam .yuimenu{font-size:93%;line-height:1.5;*line-height:1.45;}.yui-skin-sam .yuimenubar .yuimenu,.yui-skin-sam .yuimenu .yuimenu{font-size:100%;}.yui-skin-sam .yuimenu .bd{*zoom:1;_zoom:normal;border:solid 1px #808080;background-color:#FFF;}.yui-skin-sam .yuimenu .yuimenu .bd{*zoom:normal;}.yui-skin-sam .yuimenu ul{padding:3px 0;border-width:1px 0 0 0;border-color:#ccc;border-style:solid;}.yui-skin-sam .yuimenu ul.first-of-type{border-width:0;}.yui-skin-sam .yuimenu h6{font-weight:bold;border-style:solid;border-color:#ccc;border-width:1px 0 0 0;color:#a4a4a4;padding:3px 10px 0 10px;}.yui-skin-sam .yuimenu ul.hastitle,.yui-skin-sam .yuimenu h6.first-of-type{border-width:0;}.yui-skin-sam .yuimenu .yui-menu-body-scrolled{border-color:#ccc #808080;overflow:hidden;}.yui-skin-sam .yuimenu .topscrollbar,.yui-skin-sam .yuimenu .bottomscrollbar{height:16px;border:solid 1px #808080;background:#FFFFFF) no-repeat 0 0;}.yui-skin-sam .yuimenu .topscrollbar{border-bottom-width:0;background-position:center -950px;}.yui-skin-sam .yuimenu .topscrollbar_disabled{background-position:center -975px;}.yui-skin-sam .yuimenu .bottomscrollbar{border-top-width:0;background-position:center -850px;}.yui-skin-sam .yuimenu .bottomscrollbar_disabled{background-position:center -875px;}.yui-skin-sam .yuimenuitem{_border-bottom:solid 1px #fff;}.yui-skin-sam .yuimenuitemlabel{padding:0 20px;color:#000;text-decoration:none;cursor:default;}.yui-skin-sam .yuimenuitemlabel:visited{color:#000;}.yui-skin-sam .yuimenuitemlabel .helptext{margin-top:-1.5em;*margin-top:-1.45em;}.yui-skin-sam .yuimenuitem-hassubmenu{background-image:url(menuitem_submenuindicator.png);background-position:right center;background-repeat:no-repeat;}.yui-skin-sam .yuimenuitem-checked{background-image:url(menuitem_checkbox.png);background-position:left center;background-repeat:no-repeat;}.yui-skin-sam .yui-menu-shadow-visible{background-color:#000;opacity:.12;filter:alpha(opacity=12);}.yui-skin-sam .yuimenuitem-selected{color:#62350D;background-color:#E09965;}.yui-skin-sam .yuimenuitemlabel-disabled,.yui-skin-sam .yuimenuitemlabel-disabled:visited{cursor:default;color:#A6A6A6;}.yui-skin-sam .yuimenuitem-hassubmenu-disabled{background-image:url(menuitem_submenuindicator_disabled.png);}.yui-skin-sam .yuimenuitem-checked-disabled{background-image:url(menuitem_checkbox_disabled.png);}

/*ajustements pour Firefox*/
@-moz-document url-prefix(){
.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel1{padding-right:58px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel1{padding-right:58px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel2{padding-right:40px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel3{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel4{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel5{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel6{padding-right:20px;*display:inline-block;}.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel7{padding-right:39px;*display:inline-block;}
}

On voit qu'il y a des hacks spécifiques pour Firefox que j'ai rajouté en bas de page.

En fait, au début j'ai voulu mettre tous mes hacks pour chaque navigateur dans mon fichier css principal les uns derrière les autres comme pour Firefox.
Mais IE créait des problèmes entre hacks, et avec l'aide de toytoy j'ai mis un lien js pour séparer IE du reste.
Comme ensuite Google Chrome a commencé à faire des siennes, j'ai voulu le séparer aussi de la même façon mais
Opéra, - alors que je ne lui ai rien demandé - lis aussi le lien consacré à Chrome et ça met le bazarre sur Opéra (sinon ça marche).
Chose curieuse, m'étant dis que pour uniformiser mon code ce serait bien que je mette un lien js pour chaque navigateur,
j'ai essayé de faire de même pour Firefox mais ça ne fonctionne pas.
Je laisse donc Firefox dans le fichier "général" CSS puisque je n'ai pas le choix et que ça ne me dérange pas,
mais tout ça pour dire que je ne comprends pas du tout la logique

par **Nestecha** » 17 sept. 2014, 00:29

[javascript]function get_browser() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem =/\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE';
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/)
if (tem != null) {
return 'Opera'
}
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) !=null) {
M.splice(1,1,tem[1]);
}
return M[0];
}

var browser = get_browser();[/javascript]

browser sera égale à "Chrome" par exemple, ou "Opéra", etc.

Donc t'as juste à mettre une condition et lancer ton hack seulement s'il trouve "Chrome".

par **niconicochan** » 16 sept. 2014, 18:00

Bonjour,

Aujourd'hui mon site apparaît avec une partie de présentation (css) décalée sur Google Chrome (sur Google Chrome seulement).
Comme dans mon fichier css principal mes hacks "se bouffent entre eux", j'ai décidé d'utiliser javascript pour renvoyer
mes hacks spécifiques à GoogleChrome sur une page externe css dédiée pour GoogleChrome.
Problème: ce lien est lu par Opera ce qui met la pagaille sur Opéra.
Le js:
[javascript]
<script> 
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("Chrome")>0 ) {
loadCss("hackspourChrome.css") ; //inclusion dynamique du css compatible Chrome
}
</script>
[/javascript]
J'enlève ce script et ça remarche sur Opéra (mais plus sur Google, bien sûr).
Auriez-vous une solution à me proposer?

[RESOLU] Hack "qui se bouffent".

Répondre

Étendre la vue Revue du sujet : [RESOLU] Hack "qui se bouffent".

Re: Hack "qui se bouffent".

Re: Hack "qui se bouffent".

Re: Hack "qui se bouffent".

Hack "qui se bouffent".