28111 sujets

CSS et mise en forme, CSS3

Hack css ou commentaire <!--[if IE]> ?

J'ai lu pas mal d'articles à ce sujet, mais j'avoue avoir du mal à trouver la meilleure solution.
J'uilise régulierment les hacks CSS pour gérer la transparence des PNG sous ie 6. Forcement j'obtiens systematiquement un CSS non valide.
Le commentaire <!--[if IE]> me permettait d'obtenir un CSS valide pour tous les navigateurs autre qu'internet Explorer 6.

Si je resume la situation :

- Hack CSS :
Inconvenients : CSS jamais valide, fichier CSS plus lourd
Avantage : un seul CSS à gérer, donc développement et maintenance plus rapide.

- commentaire <!--[if IE]> :
Inconvenient : Deux feuilles de style à gérer. Si j'ai une modif à faire je dois la dupliquer à chaque fois.
Avantage : fichiers plus légers (chargement plus rapide)
Avantage / Inconvenient ? : mon CSS est valide pour les navigateurs autre qu'IE 6 (moindre)

Quelle méthode utilisez-vous ?
Les 2 à la fois : un commentaire pour placer un hack Smiley confused

J'me suis fait gronder par ghost ce matin à cause de ça Smiley bawling
Modérateur
Bonjour ,

j'utilise de preference les commentaires conditionnels , mais je garde le !important dans la css commune pour les min-width et min-height , c'est valide et IE7 comprends cette regle.

certains "autres" problemes se gere avec une simple surcharge css , comme par exemple un :display:inline; sur un element flottant afin d'eleminer le bug de double marge dans IE. Pas besoin de hack veritablement la Smiley smile (même si on joue un peu avec le layout).

...

GC
Modifié par gcyrillus (16 Apr 2007 - 18:04)
Utilise les commentaires conditionnels. Un immense avantage, c'est qu'une fois que les versions d'IE les moins respectueuses des standards seront marginalisées pour de bon, tu pourras te débarrasser des fichiers CSS conçus pour elles sans avoir à toucher au fichier CSS de base (celui contenant les déclarations qui seront correctement interprétées par les navigateurs conformes et les versions d'IE récentes quand elles montrent de la conformance).
Je ne comprend pas le défaut que tu trouves aux commentaires conditionnels ?
Pourquoi dois tu dupliquer caqhue modification ?

Normalement, tu n'ajoutes entre les commentraies conditionnels que les lignes de codes qui sont nécessaires uniquement à IE (ou IE 6) et elles viennent s'ajouter à la feuille de style principale...

Par exemple tu vas avoir


page-container {
     min-height: 100%;
     background: #ccc;
     width: 760px;
    margin: auto;
}


et seulement pour ie <=6


page-container {
    height: 100%;
}
floatLeft a écrit :


- commentaire <!--[if IE]> :
Inconvenient : Deux feuilles de style à gérer. Si j'ai une modif à faire je dois la dupliquer à chaque fois.

Oui et non,
Tu ne dupliques en fait que les partie qui ont besoins d'être modifiées pour Internet explorer 6
Dans ta feuille principale tu as toutes les infos (hn, p, a...) tandis que dans la feuille IE tu n'as que celles qui posent problème avec IE (cf fond alternatif pour gérer la transparence)
Je choisi donc cette méthode Smiley langue
Administrateur
- Hack CSS :
Inconvenients (suite) :
* n'est pas pérenne : repose sur un bug d'une version de navigateur. Donc forcément, lorsqu'une nouvelle version corrige ce bug (IE7 par ex), le hack ne fonctionne plus et, souvent, l'ensemble du site doit être repris.
* on est dans le flou : ça fonctionne aujourd'hui, qu'en sera-t-il demain ?
* est officiellement déconseillé par Microsoft lui-même Smiley smile

http://forum.alsacreations.com/faq/faq-40-Qu039est-ce-qu039un-hack--A-quoi-servent-ils-.html
Salut,
20cent a écrit :
Une technique qui combine les avantages des deux solutions :
http://www.positioniseverything.net/articles/cc-plus.html
Inconvénient de cette technique selon moi : modification de la structure du document selon le navigateur. En théorie, ça ne devrait pas être problématique, mais ça pourrait avoir des effets de bord (sur des règles CSS, des scripts, ...). Ceci dit, l'idée est intelligente et amusante.
Sujet clos
Aller à