28172 sujets

CSS et mise en forme, CSS3

[résolu] Hack ie !important

Pages :
Bonjour,
Voici un petit test sur IE6 (windows xp sp3),
pour lequel la règle !important est prise en charge !
Si quelqu'un a une explication... 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
<!--
#monDiv {
	width: 100px;
	height: 100px;
}
#monDiv {
	background: red !important;
}
#monDiv {
	background: green;
}
-->
</style>

</head>

<body>
<div id="monDiv">&nbsp;</div>
</body>
</html>

Modifié par <wared> (20 Dec 2008 - 08:04)
Bonjour,

J'ai pas compris le problème...
a écrit :
Ca remet clairement en question le mode d'utilisation de ce hack.
C'est un hack inutile de toutes façons, les commentaires conditionnels permettent de s'en passer sans aucun problème.
Bonjour wared,

Il ne s'agit pas d'un "hack" à proprement parler, mais plutôt d'une règle (tout à fait valide) de préséance entre les déclarations, une gestion des priorités (entre différentes déclarations mais aussi entre les styles auteurs/utilisateurs)
http://www.w3.org/TR/CSS2/cascade.html#important-rules

Ta règle devrait d'ailleurs s'écrire comme cela pour avoir l'effet rechercher (ie masquer/assigner à IE6, qui ne comprend pas cette règle, un style spécifique) :

#monDiv {
	width: 100px;
	height: 100px;
	background: red  !important;
	background: green;
}


Le fait de déclarer plusieurs fois ton identifiant n'est peut-être pas étranger au fait qu'IE6 "perde un peu la boule" sur ce coup là...

Cdt,
Sylvain
Je connais très bien la règle !important,
par contre je n'avais pas correctement assimilé le hack
qui consiste à utiliser plusieurs fois la propriété CSS au sein d'une seule paire d'accolades...
J'en conclus qu'IE6 comprend la règle !important, et c'est surtout ça qui m'intéresse.
Merci pour la précision 6l20 !
Modifié par <wared> (17 Dec 2008 - 13:05)
<wared> a écrit :

Je connais très bien la règle !important,
par contre je n'avais pas correctement assimilé le hack
qui consiste à utiliser plusieurs fois la propriété CSS au sein d'une seule paire d'accolades...
J'en conclus qu'IE6 comprend la règle !important, et c'est surtout ça qui m'intéresse.
Merci pour la précision 6l20 !

Non, non, non.

IE6 ignore tout simplement la règle (!important), qui est je le rappelle de renforcer le poids des instructions, il applique au final, l'expression...dans sa simple expression.
Dans ton exemple :

#monDiv {
	background: red !important;
}
[#black]sera lu par IE6 :[/#]

#monDiv {
	background: red;
}


Dans mon exemple :

#monDiv {
	width: 100px;
	height: 100px;
	background: red  !important;
	background: green;
}
[#black]Sera lu par IE6 comme :[/#]

#monDiv {
	width: 100px;
	height: 100px;
	background: red;
	background: green;
}

Mon exemple sera donc lu au final par IE6 :


#monDiv {
	width: 100px;
	height: 100px;
	background: green;
}

Pour résumer :
Les navigateurs récents comprendront que la première ligne est la plus importante, et le fond sera rouge. IE6, lui, accordera le même poids aux deux instructions, et la première sera écrasée par la seconde (selon les règles de la cascade CSS) : le fond sera rouge.

Encore une fois, le "hack" ici est de vouloir détourner la règle "!important" de sa fonction première en exploitant une faiblesse d'implémentation des recommandations du W3C d'un navigateur spécifique.
Pour donner des instructions particulières à IE6, utiliser les commentaires conditionnels, rien d'autre.

Mon exemple n'avait que valeur d'exemple, mais il n'est évidemment pas à suivre, désolé, si j'ai semé le trouble de ton esprit.

Cdt,
Sylvain
<wared> a écrit :
Donc selon toi, dans mon tout premier morceau de code, mon div devrait être vert ?


La déclaration "!important" n'est pas implémenté par les versions d'IE inférieures à la 7. Donc oui, 6l20 a bien expliqué la chose.

Et comme dit le détournement qui en est fait en fait un "hack". Privilégier donc les commentaires conditionnels pour assurer la pérennité de son projet web. Smiley smile
Modifié par yodaswii (17 Dec 2008 - 17:28)
En fait tu ne réponds pas à ma question yodaswii...
Mais merci quand même. Smiley biggrin
Modifié par <wared> (17 Dec 2008 - 18:36)
a écrit :
IE6 ignore tout simplement la règle (!important)

Donc selon toi 6l20, dans mon tout premier morceau de code, mon div devrait être vert ?
Modifié par <wared> (17 Dec 2008 - 18:32)
wared a écrit :
Donc selon toi 6l20, dans mon tout premier morceau de code, mon div devrait être vert ?


Si je répondais bien à ta question : la couleur appliquée sera bien le vert. Smiley smile

Cela du fait de la priorité des sélecteurs et de la non implémentation de la déclaration !important par Internet Explorer 6.
Et bien dans mon cas il est rouge.
Pourtant il ne s'agit pas d'une version d'IE6 émulée...
Une idée ?
Modifié par <wared> (17 Dec 2008 - 18:58)
Oops, c'est bien de se remettre en cause certaines fois. Smiley cligne

L'implémentation existe bien cependant il y a bien un bug dans le contexte suivant :


#monDiv
{
background: red !important;
background: green;
}


Qui là est un cas typique de "hack" ... Smiley fache

Cependant, je ne vois pas trop l'utilité de cette question à part chercher la petite bête. Et n'appartenant pas à un vrai cas pratique. Smiley cligne

<edit>Une adresse incontournable pour bien comprendre tous ces mécanismes : http://openwebgroup.eu.org/articles/cascade_css</edit>
Modifié par yodaswii (17 Dec 2008 - 19:23)
<wared> a écrit :
Justement j'ai fait le test pour une situation concrète.


Es-tu sûr que ce procédé est nécessaire comme dit au dessus les commentaires conditionnels sont l'arme ultime et d'une utilisation des plus simples. Smiley cligne
yodaswii a écrit :
La déclaration "!important" n'est pas implémenté par les versions d'IE inférieures à la 7. Donc oui, 6l20 a bien expliqué la chose.

En fait si, mais il y a un bug. Je documente ça en français (même pas pris le temps de vérifier si d'autres l'avaient fait...) et je vous passe le lien dans une demi-heure au plus tard.
Smiley jap
Je me coucherai moins bête ce soir, bravo mister Smiley cligne

Et mes excuses à <wared> pour l'avoir induit d'erreur (beurk) Smiley cligne
Salut Florent,

une petite remarque rapide, utiliser la couleur verte et rouge pour des tests je suis pas sur que cela soit très pertinent.

Et l'information ne doit pas passer uniquement par la couleur (pas évident pour certains tests je l'admet)

10% qu'ils ont dit Stéphane et Aurélien Smiley cligne .
Modifié par knarf (17 Dec 2008 - 22:58)
Pages :
Sujet clos
Aller à