[RESOLU] Ajustements selon les navigateurs.

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Ajustements selon les navigateurs.

Re: Ajustements selon les navigateurs.

par niconicochan » 07 août 2014, 09:54

Résolu :D :D :D
J'ai repris ce script sans le lien CSS au-dessus.

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

Re: Ajustements selon les navigateurs.

par niconicochan » 07 août 2014, 08:50

En fait, quand j'écris le nom de fichier fichier-standard.css j'ai une page blache avec dans la barre d'adresse le nom
du fichier de ma page principale.
Mais j'ai oublié de dire qu'une sorte de boîte de dialogue me demande si je veux ouvrir ou enregistrer
la page fichier fichier-standard.css dans localhost, et si je dis oui le code de ce fichier apparaît (donc comme dans l'éditeur).

Désolé pour mes nombreux messages.
J'essaye juste de donner des indices :wink:

Re: Ajustements selon les navigateurs.

par niconicochan » 07 août 2014, 08:36

Une remarque, j'ai essayé de mettre le nom d'une autre page dans href="..."
dans le script suivant. Sur IE et sur IE seulement je tombe alors sur la page en question.
Lorsque je met rien, c'est-à-dire href="", la page est toute blanche et dans la barre d'adresse
je n'ai pas le nom du fichier derrière le nom du site dans le chemin d'accès,
mais sur les autres navigateurs tout marche comme il faut.

[javascript]
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
</script>
[/javascript]

Cela prouve que le javascript censé renvoyer à une autre page marche bien,
mais lorsque j'écris le nom de fichier fichier-standard.css et que la page est toute
blanche, sur le chemin d'accès le nom de mon fichier apparaît à la fin.
Il ne s'agit pas de fichier-standard.css mais du nom du fichier de ma page principale (.php)
où j'écris le script ci-dessus.
Il semblerait donc que le script ne permette pas de faire sur redirection sur une page en .css

Re: Ajustements selon les navigateurs.

par niconicochan » 07 août 2014, 08:33

Une remarque, j'ai essayé de mettre le nom d'une autre page dans href="..."
dans le script suivant. Sur IE et sur IE seulement je tombe alors sur la page en question.
Lorsque je met rien, c'est-à-dire href="", la page est toute blanche et dans la barre d'adresse
je n'ai pas le nom du fichier derrière le nom du site dans le chemin d'accès,
mais sur les autres navigateurs tout marche comme il faut.

[javascript]
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
</script>
[/javascript]

Cela prouve que le javascript censé renvoyer à une autre page marche bien,
mais lorsque j'écris le nom de fichier fichier-standard.css et que la page est toute
blanche, sur le chemin d'accès le nom de mon fichier apparaît à la fin.
Il ne s'agit pas de fichier-standard.css mais du nom du fichier de ma page principale (.php)
où j'écris le script ci-dessus.
Il semblerait donc que le script ne permette pas de faire sur redirection sur une page en .css

Re: Ajustements selon les navigateurs.

par niconicochan » 06 août 2014, 18:47

En fait, s'y j'écris
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
[/javascript]
le script semble non lu.
Il n'est pas coloré par l'éditeur et le code apparaît sur le site.

Il est évident qu'il vaut le baliser ainsi:
[javascript]
<script type="text/javascript">
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css"
} else {
}
</script>
[/javascript]
mais alors une page blanche apparaît sur l'écran avec IE
(ça marche avec les autres navigateurs).
J'ai l'impression qu'avec mon code le navigateur entre dans la feuille externe et n'arrive
pas à en sortir.
Si vous pouvez m'aider pour cette portion de code ce serait sympa
car c'est manifestement là que ça pêche.

Re: Ajustements selon les navigateurs.

par niconicochan » 06 août 2014, 18:13

Tout d'abord un grand merci pour l'aide apportée.

Je continue de travailler à partir de ce que tu m'as donné.

Le code ci-dessous permet effectivement d'être renseigné quant
à savoir quel navigateur est détecté: IE ou un autre.
[javascript]
<script>
//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
alert("ie detecté");
}
</script>[/javascript]


Le code ci-dessous fonctionne aussi :
<link rel="stylesheet"  href="fichier-standard.css" />
Il permet d'aller chercher et de lire la feuille externe:
condition indispensable pour faire fonctionner IE correctement.
Cette feuille lue, IE marche alors correctement.
Le problème, c'est que cette feuille externe est en fait toujours lue, même
quand le navigateur n'est pas IE.
Du coup, ça ne marche alors plus sur chrome, opera et safari.
Même avec le javascript en dessous elle est lue.
Je crois que ça vient du fait que dans le code que tu m'as donné elle se trouve au-dessus
du code javascript, et est lue donc par tous les navigateurs sans condition.
J'essaye donc de restreindre la possibilité de lecture de cette ligne de code
au càs où le navigateur n'est pas IE, c'est-à-à dire de permettre sa lecture que si
le navigateur est IE.
J'essaye donc de l'imbriquer dans
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
...
}
[/javascript]
mais je n'arrive toujours pas à régler mon problème :(

J'essaye en vain quelque chose comme:
[javascript]
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
document.location.href="fichier-standard.css";
} else {
}
[/javascript]
Ca ne fonctionne toujours pas :(

Mais cette toute dernière partie je ne m'y prends sûrement pas très bien.

Pouvez-vous encore m'aider?
Je crois qu'il reste plus qu'à régler un soucis de proposition if
qui renvoit ou non à une page selon une condition.

Re: Ajustements selon les navigateurs.

par yann18 » 06 août 2014, 14:54

suis désolé les commentaires conditionnels ne sont plus supportés sur IE10 (cf. site ms ).
toutefois il est possible de charger dynamiquement en JS une feuille de style externe.
<head>
       <link rel="stylesheet"  href="fichier-standard.css" />

<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("fichier-ie.css") ; //inclusion dynamique du css compatible ie
}
</script>
</head>
si y a problème tu peux tester si IE est bien détecté en affichant une petite alerte:
[javascript]
<script>
//on vérifie si le navigateur est IE
if ( navigator.userAgent.indexOf("MSIE")>0 ) {
alert("ie detecté");
}
</script>
[/javascript]

Re: Ajustements selon les navigateurs.

par xTG » 06 août 2014, 13:54

Le principe est en fait d'avoir deux feuilles de style :
La première chargée tout le temps qui permet de faire fonctionner le tout sur Firefox, Chrome, ect.
La seconde qui contient uniquement les commandes nécessaires pour le navigateur IE. Et le chargement de ce fichier doit être conditionné par les commentaires précisés plus haut.

Ainsi si tu es sous Firefox, seul le premier css sera chargé.
Si tu es sous IE10 les deux fichiers seront chargés. (le second fichier écrasant certains paramètres du premier)

Re: Ajustements selon les navigateurs.

par niconicochan » 05 août 2014, 18:39

Ca ne marche pas malgré mes nombreuses tentatives :(

Pour info, mon travail sur les CSS je le fais déjà dans une feuille de style externe (extension.css)
et pour IE 10 je crée donc une feuille de style externe (encore une fois avec une extension .css) à partir de la feuille de style externe.
Les deux feuilles de styles externes étant rangées dans un même répertoire, je n'écris pas de chemin d'accès.
J'écris juste le nom de la feuille.

Tu dis:
les autres navigateurs vont interpréter tout ce qui se trouve entre <!--[if gte IE 10]> et <![endif] comme des commentaires alors qu'IE (version à renseigner) est capable d’interpréter ces commentaires conditionnels comme quelque chose de valide.
Pourtant, quand je laisse le code CSS attribué au navigateur IE 10 et que du coup le problème est résolu pour IE 10, les autres navigateurs ne font pas que lire des commentaires
puisque ça devient le foutoir avec eux.
Et si j'essaye de travailler sur une feuille de style externe c'est IE 10 qui n'arrive plus à lire cette fois.
Mais je ne comprends pas pourquoi le fait de mettre le code sur une feuille de style externe devrait à la fois permettre l'interpétation de IE et empêcher
celle des autres navigateurs.

J'ai essayé de donner de nouvelles précisions en haut de mon message au cas où ça pourrait aider.
Sinon, si c'est trop galère, est-ce que vous pourriez me mettre sur la piste de javascript?
Mais là encore je ne sais pas si on peut écrire du javascript dans une feuille externe css.

Re: Ajustements selon les navigateurs.

par yann18 » 05 août 2014, 17:03

Tu parles bien d'une feuille de style externe dont le chemin d'accès est css/... le nom du fichier est ie et l'extension css?
oui. Tu peux attribuer n'importe quel nom ou n'importe quel chemin à la feuille de style.
La balise du haut <link href="css/ie.css" rel="stylesheet"> est écrit avec la même couleur que pour <![endif]
Ca c'est louche.

Est-que tu veux dire que parce qu'on met du code spécifique pour Internet Explorer dans une feuille de style externe
ce code n'a du coup plus d'incidence sur les autres navigateurs?
les autres navigateurs vont interpréter tout ce qui se trouve entre <!--[if gte IE 10]> et <![endif] comme des commentaires alors qu'IE (version à renseigner) est capable d’interpréter ces commentaires conditionnels comme quelque chose de valide.
Les commentaires conditionnels ne seront jamais lus pas les autres navigateurs(autres que IE) qui vont les ignorer.

Encore une fois tu donnes le nom que veux à ta feuille de style compatible IE et qu'importe le chemin
 <!--[if gte IE 10]>
    <link href="nom-de-la-feuille-ie.css" rel="stylesheet">  
 <![endif]-->
pour plus d'infos sur les commentaires conditionnels:commentaires-conditionnels
Autre possibilité: faire recours à js qui va détecter le navigateur et faire appel à la feuille de votre choix

Re: Ajustements selon les navigateurs.

par niconicochan » 05 août 2014, 16:25

Décidément je ne comprends pas :(

Tu parles bien d'une feuille de style externe dont le chemin d'accès est css/... le nom du fichier est ie et l'extension css?

J'ai d'abord un problème à mon avis avec le bout de code <![endif]--> à la fin.
Mon éditeur écrit <! [endif] en couleur et --> en gris clair comme s'il s'agissait d'un commentaire.
La balise du haut <link href="css/ie.css" rel="stylesheet"> est écrit avec la même couleur que pour <![endif]
Ca c'est louche.

Est-que tu veux dire que parce qu'on met du code spécifique pour Internet Explorer dans une feuille de style externe
ce code n'a du coup plus d'incidence sur les autres navigateurs?
C'est le fait de créer une feuille de style externe pour séparer du reste qui change tout?

Enfin, mettre mon code spécifique à IE entouré de <!-- ... --> rend son contenu grisé tel un commentaire,
et le code fonctionne pour IE mais empêche toujours Google, Opéra et Safari de fonctionner.

Re: Ajustements selon les navigateurs.

par yann18 » 05 août 2014, 15:31

tu peux créer une feuille de style propre à IE. Et grâce aux commentaires conditionnels d'IE tu peux alors faire appel à cette feuille de style qui ne sera comprise que par IE.
Cette feuille de style doit être appelée après la feuille standard(compatible firefox, opera...) pour pouvoir écraser les styles(ff,opera...) précédemment définis:
    <link href="css/style-standard.css" rel="stylesheet"> <!-- feuille de style standard -->
<!--[if gte IE 10]> 
    <link href="css/ie.css" rel="stylesheet">  <!-- feuille de style ie 10 et plus -->
 <![endif]-->

Re: Ajustements selon les navigateurs.

par niconicochan » 05 août 2014, 14:29

Merci pour toutes vos précieuses recommandations.
Au bout du compte j'arrive à tout régler... sauf pour internet explorer.

Vous savez que je dois mettre des valeurs différentes dans mes CSS pour firefox et internet explorer.
J'ai réussi pour firefox.
Ca marche donc sur opera, safari, google et firefox.

Il ne reste plus qu'Internet Explorer (IE 10 en l'occurrence).
J'y arrive aussi mais, à la condition où ça ne marche alors plus ni sur opéra, ni sur safari et ni sur google.
On dirait que ça marche encore sur firefox car des valeurs spécifiques ont été ajoutées pour ce navigateur.

Je ne sais pas si vous pouvez m'aider.
Je peux toujours donner des valeurs spécifiques pour opéra, safari et google mais
je trouve que ça fait un peu fouillis.

Re: Ajustements selon les navigateurs.

par moogli » 04 août 2014, 23:22

salut,,

précision au pixel.

Généralement l'alignement ce fait avec des marges (droite et gauche) mais pour cela il faut être sur de que ce tu va avoir comme marge et que tu n'hérite pas de chose (plus ou moins pratique du parent).

Si tes 'li' sont en ligne alors les marges sont la bonne façon de faire (pour moi) sachant que tu ne sais pas forcément ce que cela va donnée suivant les tailles avec des espaces insécable.

de plus tu va pouvoir faciliter le passage à la ligne des listes sur les redimensionnents d'écrans. ;)


@+

Re: Ajustements selon les navigateurs.

par niconicochan » 04 août 2014, 22:37

Merci pour le lien :D
et pour le tuyau concernant les class!!
J'essaye ça demain.
Je pense pouvoir m'en sortir.

Après, j'ai un dernier petit soucis.
J'ai besoin de faire des espacements
entre mes étiquettes pour une question de propreté.
J'utilise soit &nbsp; en html, soit un nombre de pixels ...px avec les CSS.
J'essaye de faire une approximation au &nbsp; près ou au px près
pour m'approcher d'alignement parfaits mais je ne parviens jamais
à un visuel propre (j'ai 1/4 ou 3/4 de pixel en plus ou en moins).
Je n'arrive donc pas à acquérir la propreté souhaitée.
C'est normal? N'y a-t-il pas un moyen de travailler plus en précision?
:|