28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis entrain de regarder pour équilibrer mon design sous ie pouqu'il ressemble d'avantage à celui de Firefox.
Je peux utiliser ces hack suivant, tous fonctionnent, lequel faut il mieux adopter ?

1) html > body .maclass {}
2) * html .maclass {}
3) _maproprietedemaclasse                     <-- actuellement j'utilise celui-ci
4) maproprietedemaclasse !important
    maproprietedemaclasse !important


merci de vos réponse

++
Modifié par P75 (15 Sep 2005 - 21:43)
Es-tu certain d'avoir besoin d'un hack ?
Il n'y a aucun « workaround » possible ?

Le hack du sélecteur d'enfant permet de servir des règles à tous (IE/Mac compris) sauf IE/Win. Généralement on l'emploie sans espaces html>body sinon certains navigateurs pourraient également l'ignorer.

Le hack avec le sélecteur universel appliqué à l'élément html fonctionne dans l'autre sens, c'est-à-dire que seulement IE (Mac et Win) reconnaitront les règles visées par celui-ci.

L'un est basé sur un manque de support de CSS et l'autre est basé sur une syntaxe abberante (étant l'élément racine, l'élément html ne peut être contenu dans aucun autre).

Tout dépend du contexte, mais dans l'état actuel des choses, on ne saurait trop recommander l'usage des commentaires conditionnels pour servir des règles seulement à IE.

Un hack est un hack, et donc une source potentielle de problème dans le futur.

Mal utilisés, ils sont source de conflits dans d'autres navigateurs donc il faut parfois masquer le hack à ceux-ci à l'aide d'un autre hack. Par exemple, IE/Mac n'ayant pas les mêmes « bugs » qu'IE/Win, il faut parfois masquer le premier hack à l'intérieure du hack du backslash dans un commentaire.

/* \*/
* html {}
/* */

On peut voir dans quel contexte tu souhaites l'utiliser ? Smiley murf
Comme ça on pourra peut-être te dire ce qui est le moins risqué Smiley smile
Modifié par Stephan (15 Sep 2005 - 23:14)
Le contexte est simple en fait de simple margin-left ou min-height ... etc ...

Un hack est un hack, et donc une source potentielle de problème dans le futur.


source potentielle de probleme ... quel genre de problème ?
Bonjour,

Les hacks CSS reposent sur des bugs ou des manques d'implémentation. Ils consistent à exploiter un bug (* html) ou une implémentation absente (html>body) pour corriger un comportement lié à un second bug du navigateur.

Mais les bugs sont destinés à être corrigés, et les implémentations à être complétées (Voir IE7 qui, en mode strict, implémentera html>body et ne lire plus * html). Ce qui expose à voir le hack neutralisé dans une nouvelle version du navigateur qui ne corrigerait pas forcément pour autant le second bug. Ou inversement. Dans les deux cas, toute la stratégie du hack sera à revoir, en allant trifouiller dans un code CSS dispersé et peu lisible.

D'autre part, les défauts d'implémentation et les bugs ne sont pas normalisés. Ce qui expose à voir le résultat du hack donner un beau jour un effet imprévu dans une autre version d'un autre navigateur. Et à retourner trifouiller.

Un hack consiste finalement à fonder une CSS sur un comportement accidentel, non normalisé et temporaire d'une version donnée d'un navigateur donné. Avec toute la fragilité que cela suppose.

Les commentaires conditionnels offrent différents avantages :
- pérennité : un commentaire conditionnel réservant une CSS à IE6 ne sera pas remis en cause par IE7, quelque-soit le comportement de celui-ci.
- fiabilité: pas d'effets de bords possibles sur d'autres navigateurs.
- validité
- précision et souplesse d'utilisation : il est possible de tenir compte de n'importe quelle version d'IE Win. A l'arrivée d'IE7, il suffira, selon les cas, de lui adresser sa propre CSS en commentaires conditionnels, d'étendre la CSS en commentaires conditionnels d'IE6 à IE7, ou de ne rien faire.
- rationalité : ils permettent de centraliser les correctifs CSS dans une CSS unique, au lieu de les disperser dans toutes les CSS du site. Ils permettent aussi bien de modulariser les correctifs CSS.
- lisibilité : on écrit des blocs de règles CSS normaux, sans syntaxe exotique. La reprise du code sera nettement plus économique, que ce soit par une autre personne, ou par vous-mêmes dans deux ou trois ans.

Proscrire les hacks pour IE Windows, définitivement. Et limiter au minimum l'usage des hacks pour les autres navigateurs.
Modifié par Laurent Denis (16 Sep 2005 - 04:13)
Merci pour cette mise au point. Alors une question pratique maintenant :
Comment utiliser ces commentaires conditionnels pour appeller une css externe ? Il suffit d'entourer le meta comme ci-dessous ?

<!--[if IE]>
<link media="screen" href="defaut_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Et aussi, faut-il que la css dédié à IE soit une copie retouchée, ou les attributs spécifiques suffisent-ils ?
d2taf a écrit :
Merci pour cette mise au point. Alors une question pratique maintenant :
Comment utiliser ces commentaires conditionnels pour appeller une css externe ? Il suffit d'entourer le meta comme ci-dessous ?

<!--[if IE]>
<link media="screen" href="defaut_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->



Oui

Propriétés et valeurs concernées seulement. En mettant le commentaire conditionnel après la feuille de style principale.
d2taf a écrit :
Merci pour cette mise au point. Alors une question pratique maintenant :
Comment utiliser ces commentaires conditionnels pour appeller une css externe ? Il suffit d'entourer le meta comme ci-dessous ?

<!--[if IE]>
<link media="screen" href="defaut_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Et aussi, faut-il que la css dédié à IE soit une copie retouchée, ou les attributs spécifiques suffisent-ils ?



En fait, et j'aurais pu le faire avant, je viens de tester tout ça : Un meta entouré, et une css montrant juste les attributs spécifiques. Ce qui est parfait puisqu'il n'est nul besoin de modifier toute la css principale à chaque changement. Et ça a l'air de fonctionner nickel.
Merci tout de même de me signaler une éventuelle lacune dans cette façon de faire.
Merci clb56. Réponse trop rapide, je poste en retard...
J'ai donc tout ce qu'il faut pour virer définitivement (j'espère) les hacks.
Merci à tous.