11544 sujets

JavaScript, DOM et API Web HTML5

Css javascript écrasé par le css courant sous Ie ?

Bonjour / Bonsoir à toutes et tous,

voilà bien la première fois où je me trouve confronté à une bizarrerie que je ne m'explique pas !

Soit un css chargé en "<head>" via un fichier externe appelé par un "<link" conventionnel, puis en "<body>" un script spécifique pour différentes Versions d'Internet Explorer, qui sert à réduire largeur et hauteur de "<div>" SI elles sont entourées d'une bordure, afin d'avoir des dimensions identiques sous tous les Navigateurs...

Aucune erreur nulle part à tous points de vue, conformité classique au W3C, bref, tout est "poil top" à UN détail près :

Internet Explorer toutes Versions recalcule bien les nouvelles valeurs, mais elles sont immédiatement écrasées par le css courant ! ! !

QUI pourrait m'expliquer cela ?


D'avance merci à toutes et tous qui se pencheront sur ce curieux problème, cordialement, Yvanoph---
salut,
et comment on est censé deviner le soucis sans le moindre code ni lien vers ta page ?
Perso je suppose que ce genres de démarches sont inutiles et que cela peut se faire en CSS. Ça s'apparente clairement à une bidouille. Peut être qu'il suffirait que tu modifies la valeur "box-sizing" à "border-box". Faudrait voir ton code d'abord.
Désolé, mais pas besoin de Code pour comprendre ce qui est élémentaire ?

Soit un css quelconque :
#div{height=100px;}

et un J.S

document.write('<style type="text/css">#div{;height:90px;}</style>')

Ie charge les 90 puis écrase par le css en prenant 100 !

Donc pourquoi un javascript en "<body>" est écrasé par un css en "<head>" ? Telle est la simple question.

Merci pour avoir pris le temps de tenter de répondre, Yvanoph---
J'allais oublier...

SEUL les "bidouilleurs" se permettent de modifier des css avec des additions, soustractions et autres opérations mathématiques, vu chez plusieurs "WebMaster" PROFESSIONNELs et même chez un Editeur de Logiciel pour créer des Sites...

Quant à créer plusieurs classes, cela ne me pose aucun problème, il suffirait de supprimer deux fois les épaisseurs aux dimensions des blocs ? Alors qu'une simple routine en JavaScript le fait normalement automatiquement pour X blocs dans une même Page, donc BEAUCOUP PLUS léger que du css conditionnel, ce qui est évident ! ! !

Par ailleurs, et au cas ou vous ne le sauriez pas, box-sizing n'est implémenté qu'à partir d'Ie 8...


Bonne soirée, Yvanoph, qui, entre nous, ne "bidouille" pas, comme vous vous permettez de l'écrire sans réfléchir ?
Non, il n'y a rien d'élémentaire dans ce que tu dis. Tu n'es pas clair dans ton premier message et tu sembles encore plus brouillons dans le second.
J'ai donc l'impression que tu ajoutes une balise <style> dans le <body> est-ce bien ça ? Si tel est le cas, elle n'a pas sa place là car elle ne peut être contenue que dans le <head>.
Si c'est un fichier CSS qui est ajouté en JS et qui tente d'écraser des styles contenus dans le <head>, ça ne pourra pas se faire en utilisant la même règle de sélecteur. Les styles contenus dans la balise <style> (devant être dans le <head>) sont prioritaires sur celles utilisées dans le fichier CSS. Exemple:

<head>
	<meta charset="utf-8" />
	<title>Titre de la page</title>
	<style type="text/css">
		#div{height=100px;}
	</style>
</head>

prendra le dessus sur la même propriété dans un fichier CSS externe

#div{height=80px;}

L'élément dont l'ID est "div" aura une taille de 100px et non de 80px.
Les styles appliqués directement dans les balises via l'attribut "style" auront le dessus sur les deux.

Maintenant comme dit précédemment, ça s'apparente à de la bidouille. Pourquoi changer de dimensions en fonction du navigateur ?
Yvanoph a écrit :
J'allais oublier...

SEUL les &quot;bidouilleurs&quot; se permettent de modifier des css avec des additions, soustractions et autres opérations mathématiques, vu chez plusieurs &quot;WebMaster&quot; PROFESSIONNELs et même chez un Editeur de Logiciel pour créer des Sites...

Quant à créer plusieurs classes, cela ne me pose aucun problème, il suffirait de supprimer deux fois les épaisseurs aux dimensions des blocs ? Alors qu'une simple routine en JavaScript le fait normalement automatiquement pour X blocs dans une même Page, donc BEAUCOUP PLUS léger que du css conditionnel, ce qui est évident ! ! !

Par ailleurs, et au cas ou vous ne le sauriez pas, box-sizing n'est implémenté qu'à partir d'Ie 8...


Bonne soirée, Yvanoph, qui, entre nous, ne &quot;bidouille&quot; pas, comme vous vous permettez de l'écrire sans réfléchir ?


Mon gars tu devrais te détendre Smiley biggrin .
Ça ne pose aucun problème que "box-sizing" soit prit en compte par ie8 et plus vu que ie7 est mort. Vu que tu n'as rien indiqué quant aux navigateurs pris en charge donc ça va de soi que ie7 ne sert à rien.
Par contre coder pour chaque navigateur et corriger par ce genre de pratiques, c'est bien de la bidouille Smiley cligne N'essaye pas de te convaincre par les textes drôles que tu me sors concernant le JS, c'est du bricolage ce que tu fais Smiley cligne
Bon, comme clairement expliqué dans ma question, les css sont chargés en ressource externe via un "<link gnagnagna" ! JAMAIS il ne viendrait à l'esprit de coller un "style" quelconque dans une Balise en plein "<body>" ? ? ? Ca NE SE FAIT PAS, hors les bricoleurs !

Il n'y a PAS d'erreur de sélecteur puisque Ie CALCULE les valeurs issues du "<body>" via JavaScript, comme BIEN mentionné dans ma question tout là haut, PUIS écrase le css...

J'en arrive à penser que le css est chargé après le JavaScript, voilà tout ? Bien sûr un délai pourrait être mis quant à retarder ce Code coté chargement, mais ça ne me plairait pas...

Ou ce sont les scripts PIE qui interfèrent en retardant le chargement des css ? ? ?

Bref, je n'arrive pas à comprendre pourquoi le css arrive après... Pour exemple l'image ci dessous, c'est flagrant ?

upload/44962-LitigeCSSJ.jpg
Et pour information, connaissez vous le nombre de personnes qui tournent encore sous Ie 6 ou 7 ? Car tout le monde n'a pas les moyens de tourner sur des machines capables de supporter les Navigateurs récents...

Par ailleurs, SEUL Internet Explorer inclue les bordures DANS la boite, les autres le faisant en extérieur. Aussi pour des bordures larges et rester centré, seul un JavaScript permettra de diminuer la boite pour que le Schtroumph puant affiche l'ensemble exactement comme les autres ?

Ce qui fait que tous les WebMasters réellement consciencieux sont donc obligés de "bidouiller" comme VOUS dites puisque apparemment vous ne connaissez pas non plus les bases de la politesse et du respect ? Et ce genre de comportement irrespectueux a tendance à me filer de gros boutons, ça c'est sûr...
Comme répondre à toute vitesse sans même avoir pris le temps de digérer les données bien exposées d'un problème ?


Allez, bonne soirée gamin, Yvanoph---
salut, faut se calmer un peu Yvanoph !
Yvanoph a écrit :
Désolé, mais pas besoin de Code pour comprendre ce qui est élémentaire ?

Si tu ne prends pas le temps de nous montrer ton problème avec un petit bout de code, je ne vois pas pourquoi on perdrait le notre...
Ce qui est clair dans ta tête ne l'est pas forcément pour tous le monde.

As tu essayer de lancer ton script après window.onload
Bonsoir, comme écrit dans la question, elle est parfaitement claire et compréhensible :

a écrit :
Soit un css chargé en "<head>" via un fichier externe appelé par un "<link" conventionnel, puis en "<body>" un script spécifique pour différentes Versions d'Internet Explorer, qui sert à réduire largeur et hauteur de "<div>" SI elles sont entourées d'une bordure, afin d'avoir des dimensions identiques sous tous les Navigateurs...


Me répondre que "supposer" mettre du style dans une Balise dans le "<body>" démontre de suite que ladite question n'a pas ou été BIEN lue, ou comprise, ou correctement analysée ? Donc pas davantage de commentaire à ce sujet !

Répondre avec des "tu", des "mon gars" démontre aussi un MANQUE de savoir vivre comme d'éducation ? Donc pas davantage de commentaire à ce sujet...

Quant à "un bout de Code", si ça peut vous aider, voilà le "script" de base, mais je ne le pense pas :

function IeGte7Cdr(slv,W,H,bW,bR){var W=W+(2*bW),H=H+(2*bW);$w('<style type="text/css">'+slv+'{width:'+W+'px;height:'+H+'px;border-radius:'+bR+';behavior:url(./PIE.htc);}</style>');}

MA question concerne l'ordre de téléchargement qui, je pense, doit être modifié par PIE Version 2. Mais si personne n'est tombé sur ce cas...

Car si je passe avec du PIE V1, c'est LOURD, ça ne passe pas les "shadow"s NI les dégradés de couleur, mais ça fonctionne "farpaitement".

Quant à se permettre d'écrire d'emblée que je "bidouille", pffff... GAMIN quoi ?


Cordialement, et mes remerciements pour avoir pris le temps de répondre, Yvanoph---
Flûte, oublié de préciser... Mea culpa !

Votre question posait sur un "window.onload" ? C'est exactement ce à quoi je faisais allusion auparavant, décaler le chargement dans le temps ? Chose qu'il est possible même de faire plusieurs fois pour plusieurs fichiers en leurs affectant un numéro d'ordre, mais là nous rentrons directement dans la BIDOUILLE et ne restons plus dans l'ordre "naturel" des choses si je puis dire ? Ce que je refuse de faire.

Il est clair par ailleurs que le JavaScript est écrasé par le css dans l'image ci dessus ? Mais POURQUOI ? That' THE question... (Huge smile)

Thank's, Yvanoph---
Smiley lol Smiley biggrin Mon gars je te dis bonne chance pour ton problème et pour ceux qui essayeront de t'aider. Je n'ai même pas fini de te lire et ça ne donne même envie de continuer.
Faudrait franchement te détendre Smiley biggrin
Ne vous en déplaise, je ne suis pas "votre gars", et manifestement votre mère a largement oublié de vous éduquer ? Je la plains d'avoir un rejeton pareil...
Je crois qu'il y a des limites à ne pas dépasser et là tu vas loin dans tes propos. Je te demande donc de rester correct. Tu es derrière ton clavier, tu avoueras donc que ce n'est par fairplay. Tu t'enfonces dans ton délire et ta paranoïa.
Bonsoir, les limites à ne pas dépasser, il y a déjà longtemps que vous les avez plus que dépassées ?

Mais comme je répète à mes étudiants, quand vous ne savez pas répondre à un problème, commencez par vérifier si vous en avez bien pris et compris toutes les données, ce qui manifestement n'est pas votre cas. Ensuite, si effectivement vous ne savez répondre, passez au suivant, le chronomètre tourne et personne ne pourra l'arrêter pour vous...
Dans votre cas, disons que vous pourriez éviter à autrui de perdre du temps en répondant manifestement à coté de la plaque ? Car ça aussi c'est une façon de respecter les autres, pour votre gouverne ?
Quant à l'éducation, vous continuez à prouver son absence en n'ayant même pas la correction de vous excuser à tutoyer d'emblée une personne que vous ne connaissez pas, voire insinuer de la "bidouille" sans même avoir pris le temps de réfléchir ne serait-ce qu'un minimum ? Mais, et là je peux m'être effectivement trompé, veuillez me pardonner, elle vous a été bel et bien donnée mais vous n'avez pas su ni pu ni voulu peut-être même la retenir ?

Ceci posé et plus qu'assez de perdre du temps dans vos bêtises, je reste dubitatif quant au sujet posé...
La "timeline" indique que le css est appelé 3 ms avant le JS, que tout deux mettent autant de temps à être chargé, soit 12 ms, mais que le css est chargé 365 APRES le JS ?

Mon dilemme reste donc entier, perdre la présentation donnée par ce génial "AdOn" qu'est PIE V2, avec ombres et dégradés, ou perdre les alignements verticaux...


Bonne soirée à toutes et tous, Yvanoph---

P.S. N'employez pas non plus des mots dont vous ne connaissez pas exactement le sens, lire la définition de paranoïa ?
Modifié par Yvanoph (18 Oct 2013 - 21:58)
Administrateur
Bonjour,

Modération : merci de tous vous calmer avant que ça dérape pour de bon et d'arrêter d'utiliser des expressions susceptibles de ne pas plaire aux autres lecteurs (je cherche une traduction de borderline mais je suis aussi aware que JCVD ce matin...). Le plus simple est de ne plus répondre...

Pour revenir à la question, Yvanoph si tu as dans un de tes messages une page en ligne, un fiddle ou un code qui reproduit le problème, merci de mettre à jour ton 1er message avec ce lien, ce sera utile aux autres Smiley smile
Modifié par Felipe (19 Oct 2013 - 09:35)
Bonjour / Bonsoir, @ Felipe, je ne peux actuellement pas publier de Lien de Page en ligne, sauf à perdre du temps à en construire une spécifique qui ne vous apprendra rien du tout !
La question est d'ordre générale, les données en sont clairement et explicitement données, à savoir un css chargé en "<head>" par un <link... classique, un <script... javascript appelé en ressource en "<body>", qui donc normalement écrase les css visés !
Et curieusement, ce n'est pas le cas, voilà tout...
Sachant que ce phénomène ne s'applique sous Ie toutes Versions dès lors qu'il y a une transparence appliquée alors que PIE V 2 est exploité pour les "shadows" et rayons dans le schtroumph, via des conditionnelles classiques.

AUCUNE erreur de Code ni rien, et je viens enfin d'avoir la réponse du créateur des scripts employés par PIE. Ce dernier charge donc le css puis fait charger la Page au Navigateur et enfin applique le css modifié à sa façon ! Voilà pourquoi les valeurs bien modifiées par le javascript sont écrasées après par le css, comme le montre l'image jointe ci dessus !

J'avais donné le Code du script modifiant le css plus haut, qui accomplit d'ailleurs bien sa tache :

function IeGte7Cdr(slv,W,H,bW,bR){var W=W+(2*bW),H=H+(2*bW);$w('<style type="text/css">'+slv+'{width:'+W+'px;height:'+H+'px;border-radius:'+bR+';behavior:url(./PIE.htc);}</style>');}

N'importe lequel de mes étudiants aurait déduit de suite que :
slv= slave, donc lID ou la classe qui sera affectée par la fonction,
W = width
H= height
bW= borderWidth
bR=borderRadius...

La seule et unique inconnue pour vous lecteur dans une telle fonction reste $w, qui, en regardant la tête du script, ne peut être que document.write...


Bref, avant de répondre des inepties inutiles, comme déjà mentionné ci dessus, je suggère à mes étudiants de ne répondre QUE et UNIQUEMENT s'ils sont certains d'avoir bien compris toutes les données du problème posé, ce que SEUL benj a pris en partie et CORRECTEMENT en charge, et SANS traiter l'intervenant de "bidouilleur" pour autant ?
En conséquence vous voudrez donc bien adresser vos principes de modération à l'initiateur des troubles, les réponses qui ont suivi n'en étant que le résultat !


De mon coté j'ai donc modifié en conséquence les scripts fournis par PIE afin de ne plus avoir à supporter ces désagréments en remplaçant les valeurs relevées dans les css par un simple "transparent" général, donc sans besoin d'opacité, ce qui permet d'exploiter le classique "filter" spécifique à Ie, le temps qu'ils fassent de leurs coté une MàJ plus complète et exacte ?


Bonne soirée à toutes et tous, cordialement, Yvanoph---
@ benj, merci pour avoir pris le temps de répondre et de donner une solution éventuelle, même si personnellement je suis opposé à ce genre de ce que je nomme bidouillage...

Bref, démantibulé les deux JS de PIE (25 et 38 Ko "minified") et trouvé deux choses.
La première que ce script récupère l'intégralité des valeurs css concernant les éléments sur lesquels PIE est appliqué.
Ensuite il laisse le Navigateur charger tout ce qui concerne ces éléments, applique son propre javascript et en dernier injecte le css modifié à sa façon, en oubliant l'opacité, qui d'ailleurs ne peut avoir la même valeur puisque seul Ie travaille en centièmes et non avec des valeurs entre 0.0 et 1.0...

Donc un onLoad aurait été chargé en fin de chaîne, certes, mais pour être écrasé tout autant ensuite ?


En vous remerciant, cordialement, Yvanoph---
Sujet clos
Aller à