Hcks / corrections CSS acceptables
https://stackoverflow.com/questions/504261
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Existe-t-il une liste de "bons" hacks CSS propres, qui seront certainement à l'épreuve du temps?
Par exemple, zoom:1 est sûr, tant qu'il est uniquement servi à IE et que vous vous en souvenez. Le piratage très fréquent lié à l'utilisation de sélecteurs enfants n'est pas , car IE7 les prend en charge. Utiliser height:1% semble tout simplement sale (mais c’est peut-être juste moi).
Je connais ie7-js , les bogues dans IE6 ne vous inquiétez donc pas moi beaucoup. De plus, je ne cherche pas un débat religieux, mais des sources.
Merci pour les réponses - J'ai choisi celle qui contiendrait les meilleures sources.
Merci également pour les suggestions concernant l’utilisation de fichiers CSS distincts, ou pour ne pas s’inquiéter à ce sujet. Je suis entièrement d'accord avec vous et pour moi, ce sont des données. Toutefois, face à un problème de mise en page, je souhaite une solution sûre qui minimisera le risque que je revienne sur le problème dans $ IE ou $ FF + 1. Désolé, je n’ai pas précisé cela plus clairement.
La solution
C’est un bon endroit pour les bogues de navigateur bien documentés et bien testés, et les hacks vous permettent de les contourner:
Autres conseils
Pour la majorité des bogues d'IE, je pense que vous feriez mieux d'utiliser des commentaires conditionnels autour de un lien vers une feuille de style spécifique au navigateur. Cela a tendance à garder les choses bien en ordre et c'est assez auto-documenté.
J'ai utilisé la " QuirksMode " de Peter-Paul Koch. beaucoup de sites Web pour les problèmes de compatibilité CSS et entre navigateurs. Il a tendance à froncer les sourcils avec des méthodes spécifiques à un navigateur, mais il a une page sur CSS Hacks .
Nicole Sullivan (AKA Stubbornella ) qui travaille pour Yahoo Équipe de performance suggérée dans Les 7 habitudes pour une performance exceptionnelle que vous devriez utiliser le CSS souligner hack pour corriger les bugs IE6 parce que:
- Les hack devraient être peu nombreux et espacés.
- Si vous n’avez que 5 à 6 hacks (ce qui est déjà suffisant), il n’a pas de sens de les placer dans un fichier externe et de le séparer de son contexte.
- Un fichier supplémentaire risquerait de nuire aux performances ( Meilleures pratiques Yahoo, règle 1 ).
Il convient toutefois de noter qu'il ne s'agit pas d'un code CSS valide.
Il n’existe pas de bidouillage correct / acceptable [css] - codez toujours en fonction de Standards, puis utilisez des feuilles de style spécifiques à un navigateur + pour chaque piratage nécessaire au bon fonctionnement de votre ordinateur.
Par exemple:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc.
Ensuite, lorsque la nouvelle version d'un navigateur est publiée, copiez les hacks de la version précédente et supprimez les bits qui ne s'appliquent plus (et ajoutez-en de nouveaux, si nécessaire).
(Chargez des feuilles de style individuelles à l'aide de Commentaires conditionnels pour IE et du suivi par l'agent utilisateur pour les autres navigateurs.)
Underscore-hack pour IE6-stuff fonctionne assez bien, par exemple.
min-height:50px;
_height:50px;
Cela n'exige pas de déplacer les éléments hors contexte dans de nouveaux fichiers css, seul IE6 les récupère et ils sont faciles à filtrer si vous décidiez de ne plus prendre en charge IE6. Ils sont également très minimes et n'encombreront pas trop votre CSS.
La modification de votre CSS pour une prise en charge spécifique au navigateur n’est jamais une erreur, tant que vous pouvez la contenir facilement. Comme vous le constaterez, les navigateurs conformes aux normes, * tousser * tout sauf MSIE, ne rompront jamais avec les versions futures. De plus, les nouvelles normes du W3C n’enfreignent pas les normes précédentes, elles déprécient ou étendent au maximum les normes antérieures.
Les gens ont mentionné les commentaires conditionnels qui sont parfaits pour gérer IE. Mais vous aurez besoin d'un peu plus pour gérer tous les navigateurs (mobile, gecko, webkit, opéra, etc.). En règle générale, vous analysez les en-têtes des demandes entrantes pour extraire le type et la version du navigateur à partir du paramètre User-Agent. Sur cette base, vous pouvez commencer à charger vos fichiers CSS.
Je crois que la plupart d’entre nous le faisons comme suit:
- Premier développement pour un navigateur conforme aux normes (prenons FF par exemple)
- Une fois que le CSS est terminé, vous contactez le support de IE (cela peut être facilement fait avec les commentaires conditionnels, comme mentionné précédemment).
- Commencez par créer un fichier CSS qui va tout ajuster pour IE6 et toute autre version ci-dessous
- Créez ensuite un fichier CSS qui gèrera tout pour IE7
- Enfin, créez un fichier CSS qui gérera tout le contenu des versions IE à partir de IE8.
- Une fois que IE9 est sorti, assurez-vous de définir IE8 + comme étant spécifique à IE8 et créez un fichier IE9 + CSS avec les correctifs requis
- Enfin, créez un fichier CSS supplémentaire pour les correctifs de Webkit.
- Si nécessaire, vous pouvez également créer des fichiers supplémentaires pour cibler spécifiquement Chrome ou Safari, si nécessaire
En ce qui concerne les implémentations CSS spécifiques à un navigateur, je regroupe généralement toutes celles-ci dans mon fichier css principal (vous pouvez facilement les rechercher et les remplacer dans un seul document si nécessaire). Donc, si quelque chose doit être transparent, je mettrais l'opacité et les filtres (MSIE) dans le même bloc. Les navigateurs ignorent simplement les implémentations qu'ils ne prennent pas en charge, donc votre coffre-fort. Les implémentations spécifiques que j’ai tendance à éviter sont les implémentations personnalisées (hé, j’aime bien la boîte -moz au-dessus de celle du W3C, mais je ne veux tout simplement pas compter sur elle.)
Comme cela va avec l'héritage et le redéploiement CSS, vous n'avez pas à redéfinir toutes les déclarations et définitions CSS dans chaque fichier CSS. Chaque fichier CSS chargé de manière consécutive doit uniquement contenir le sélecteur et les définitions spécifiques requises pour le correctif, et rien d'autre.
À la fin, vous vous retrouvez avec votre (énorme) fichier css principal et d’autres, contenant chacun quelques lignes, pour des correctifs spécifiques du navigateur - ce qui résume quelque chose qui n’est pas si difficile à maintenir et à garder trace. C’est une préférence personnelle sur le navigateur de votre fichier css de base, mais en général, vous ciblez un navigateur qui créera le moins de problèmes possible pour les autres navigateurs (donc, oui, le développement pour IE6 serait une très mauvaise décision à prendre. point).
Comme toujours, le fait de suivre les bonnes pratiques et d’être pragmatique et méticuleux avec les sélecteurs et les spécificités de chaque classe et d’utiliser des cadres vous mènera sur la voie de la bonté avec des corrections rarement nécessaires. Structurer vos fichiers CSS est un énorme avantage, sauf si vous souhaitez vous retrouver avec un désordre sans signification non ordonné.
Centricle possède une bonne liste de hacks CSS et de leurs compatibilités.
Je ne pense pas que vous trouverez une liste de piratages qui sera une preuve pour le futur, sachant que l'on peut dire quelle bêtise sera implémentée dans IE ensuite.
Cet article est un bon résumé des hacks CSS: http://www.webdevout.net/css -hacks
Voici une liste exhaustive de filtres très stables:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
@media,
{
.dude { color: silver;}
}
/* IE8 \0 */
@media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
@media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
@-moz-document url-prefix()
{
.dude { color: green; }
}
Lors de la définition des règles, il est judicieux d'autoriser la dégradation naturelle. Par exemple, dans CSS3, les modèles de couleurs RGBA sont pris en charge, mais pas dans CSS2. Je me trouve donc en train de faire:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
Ainsi, lorsque la dernière règle échouera sur les anciens navigateurs qui ne la prennent pas en charge, elle se dégradera au style défini précédemment.
Je préfère la méthode de commentaire conditionnel global décrite par Hiroki Chalfant;
Je trouve utile de garder mes règles ciblées IE parallèlement à mes règles ciblées par les normes dans une seule feuille de style valide.
