Qu'est-ce qui est mieux: les hacks CSS ou la détection de navigateur?

il y a une troisième option:

réduire au minimum ou éliminer le besoin de détection par navigateur et de piratage CSS.

j'essaie d'utiliser des choses comme les plugins jQuery qui prennent soin de n'importe quel navigateur différences pour vous (pour les widgets et autres). Cela ne prend pas soin de tout, mais il fait beaucoup et a délégué l'effort de soutenir plusieurs navigateurs à quelqu'un qui a dépensé et dépensera beaucoup plus d'effort que vous pouvez se permettre d'ou vous voulez.

après cela je suis ces princples:

• utilisez ce que j'appelle minimal CSS , ce qui signifie n'utilisez que les fonctionnalités qui sont largement soutenues;
• utiliser des tables pour la mise en page complexe si nécessaire. Vous pouvez ne pas aimer cela, mais franchement pour faire des choses comme la mise en page côte à côte, les tables fonctionneront sur les navigateurs remontant à une décennie et sera beaucoup moins d'effort que d'obtenir divs à travailler avec combinaisons de positionnement absolu, flottant et similaire;
• "forcez IE6 dans le mode strict plutôt que des bizarreries en ajoutant un DOCTYPE . Je ne peux pas insister sur le fait que cela rendra votre vie plus facile, mais étrangement, beaucoup de gens ne semblent pas le faire encore;
• Minimiser modèle de boîte questions en utilisant le bon DOCTYPE ou utilisant des éléments de bloc plutôt que l'autre modèle de boîte hacks ; et
• si nécessaire, inclure des fichiers CSS supplémentaires pour les navigateurs pertinents. J'ai tendance à le faire sur le serveur plutôt que sur le client avec les pages générées (qui, avouons-le, la plupart d'entre eux). De nombreux projets sur lesquels j'ai travaillé ont eu des difficultés.les fichiers css.

après cela, je divise les navigateurs en niveaux:

• Firefox 3;
• IE7.

mon site web doit travailler sur ceux-ci.

• Firefox 2;
• Safari;
• Opéra;
• Chrome.

mon site web devrait travailler sur ceux-ci. Cela peut choquer certaines personnes, mais franchement, la part de marché de ces navigateurs est si faible Qu'ils ne sont pas aussi importants que Firefox 3 ou IE7.

• IE6;
• autres.

un effort minime sera fait pour travailler sur ces derniers à moins que ce ne soit, par exemple, une exigence de l'entreprise. IE6 est le cauchemar d'un, mais c'est part de marché en décembre était de 20% et de la baisse rapide. De plus, il existe des préoccupations valables en matière de sécurité (sur les sites web financiers exemple) pour dissuader ou même refuser l'utilisation de IE6 tels que des sites comme Paypal ont bloqué IE6 et Google dit aux utilisateurs de laisser tomber IE6 .

Est-il une raison de l'utiliser ou ne pas utiliser un de ces?

Oui. La détection par navigateur du côté Client est interrompue si JavaScript est désactivé et pourrait ne pas fonctionner correctement avec les versions futures du navigateur. La dernière raison est également vraie pour les hacks CSS. La détection du navigateur côté serveur est interrompue si l'utilisateur essaie explicitement de la casser, mais cela peut quand même être une alternative viable.

ce que je recommande:

assurez-vous que votre code fonctionne dans les navigateurs conformes à la norme standars - c'est-à-dire développez un ou deux de ces navigateurs et cochez browsershots.org après. Très probablement, il sera possible de mettre en œuvre le résultat souhaité dans chacun d'eux avec une feuille de style.

alors, il y a IE. S'il n'y a que quelques problèmes, vous pouvez aller avec un piratage CSS. Sinon, utilisez des commentaires conditionnels.

Edit:

si je dois prendre en charge les navigateurs anciens aussi, je vais généralement la voie de la dégradation gracieuse: je vais juste les laisser montrer le html pur avec une feuille de style de base (tailles de police, couleurs, ...). Tous les objets de fantaisie seront cachés avec une règle @import .

j'aime généralement avoir une feuille de style pour les navigateurs conformes aux normes comme Firefox et Safari, puis utiliser commentaires conditionnels pour détecter Internet Explorer et lui servir un fichier CSS supplémentaire contenant des correctifs et des dérogations spécifiques à L'IE.

en 6 ans d'écriture HTML et CSS pour vivre, la grande majorité de mes questions CSS sont venus D'Internet Explorer.

comme indiqué dans d'autres réponses, vous pouvez utiliser commentaires conditionnels pour servir des feuilles de style supplémentaires à IE (ou pour ajouter une classe à la <body> ou <html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the chaîne utilisateur-agent", ils sont garantis de fonctionner.

en ce qui concerne les questions CSS non-IE, je n'ai jamais trouvé un qui valait la peine de navigateur détection.

les hacks de puits sont plus rapides pour le navigateur, mais la détection du navigateur donne une meilleure lisibilité dans votre CSS si vous le structurez correctement. Si vous pouvez faire la détection de navigateur et en même temps peut partager la CSS entre les navigateurs, et n'ont que les css différents dans les fichiers séparés ou quoi que ce soit, alors j'utiliserais la détection de navigateur - comme c'est quelque chose qu'un internaute novice peut comprendre, où les hacks CSS est difficile à comprendre si vous ne les connaissez pas

je préfère utiliser la détection du navigateur et mettre le CSS indépendant du navigateur dans son propre fichier.

la meilleure solution, cependant, est de trouver CSS qui est cross-compatible par défaut et juste utiliser cela.

j'essaie de ne pas utiliser. Dans un grand nombre de cas, les problèmes qui IE ont peuvent être évités en simplifiant la structure de votre marge un peu.

il est également utile si vous utilisez un CSS reset décent comme Eric Meyer .

je suis également lentement mais sûrement la suppression de soutien pour IE6 comme une question de principe, surtout compte tenu des derniers problèmes de sécurité avec IE6 et IE7 - nous n'allons pas changer les habitudes de navigation des gens et le navigateur Préférences si nous continuons à supporter des navigateurs merdiques.

examinez attentivement tout ce qui précède, en particulier les pointeurs sur doctype. Si vous devez appliquer un hack CSS, pour un navigateur spécifique, sachez que les hacks sont presque toujours évitables. Surtout pour une page statique sèche.

parler à partir d'une expérience limitée développer ces choses... Je suppose que vous voulez faire une page Web qui clignote sans l'adoobi boughtware messy:

• coder une page qui semble raisonnable sur ces navigateurs, toutes peuvent être testées sur une seule machine:

Op3ra 9.6, S@fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 & 8, Firefux 1.5

• utilisez la règle @import css pour se débarrasser de la css dans les navigateurs antiques et les laisser manger du gâteau.

• utilisez une combinaison de détection d'objet et d'reniflement de navigateur pour trouver et éliminer les navigateurs à problème (toutes les versions ci-dessous visée ci-dessus). Aussi attraper les navigateurs antiques que vous savez ne sont pas à la vitesse (propriété css que vous pouvez tester et comparer à la valeur connue) juste au cas où ils font passé le sniffer, également utiliser des commentaires conditionnels pour kick out 1E5 en l'alimentant certains anti-css pour le calmer sur son chemin, similaire pour ie6 sauf le garder dans le jQu3ry si à tous possible.

• utilisez un élément dynamique pour charger le jqu3ry libray dans les navigateurs autorisés (ceux qui n'ont pas échoué votre des tests minutieux). C'est-à-dire: nous n'importons même pas la bibliothèque quand nous savons qu'elle ne va pas fonctionner / nous laissons tout le monde entrer.

• utilisez jQu3ry pour résoudre les problèmes de vos navigateurs pris en charge, dont la plupart ne seront révélés que lorsque vos pages deviendront dynamiques. Utilisez jQu3ry pour améliorer la mise en page et ajouter dans votre interface, etc...

• développez ceci avec les déclarations des médias et vous pourriez tester pour une valeur css unique à ces dispositifs, maintenant vous aurez plus de connaissances à utiliser pour ajuster la mise en page (c.-à-d. détruire ces colonnes et rétrécir ces images). Désactiver les animations et ainsi de suite.

• gardez-le accessible en utilisant toujours des étiquettes de texte et quelques trucs de positionnement pour les faire disparaître si vous devez M. flashy menu guy... il suffit de ne pas compter sur les images ou Javascript seul pour parcourir vos sites.

• Son assez facile de bloquez tout ce qui se trouve en dessous de Netsc@pe 4. Leur donner juste le Web de base, la façon dont il était censé être à l'origine. C'est-à-dire: ne spécifiez même pas un fond ou une couleur, ou une police ou quoi que ce soit pour eux. Les valeurs par défaut du navigateur devraient fonctionner correctement. Les informations seront accessibles.

en fait, je propose que tous les navigateurs "accessibles" S'identifient comme N$4 afin que nous puissions facilement les nuke hors de la présentation dynamique et nous empêcher de visser sur les handicapés.

hélas, c'était un bon navire, mais même un bon navire pour effrayer le toujours étendu de m$ doit mourir. Ne craignez pas, car nous en avons un encore meilleur MAINTENANT ;)

Juste mes 2 cents, appliquer avec prudence.

Quoi de mal à détecter le navigateur côté serveur? Semble très efficace et infaillible (sauf pour l'utilisateur modifiant leur chaîne user-agent). Vous pouvez utiliser PHP pour choisir la feuille de style pour une page ou pour la générer dynamiquement pour chaque requête - Pas sûr si d'autres langues vous permettent de sortir directement vers le fichier et vous permettent de définir les en-têtes manuellement, mais je ne peux pas les imaginer ne pas vous permettre d'identifier l'agent-utilisateur, donc une de ces options est probablement viable pour tout côté serveur environnement.

hacks seront toujours ajouter à vos efforts de travail et d'efforts de travail doit être optimisé

vous ajoutez d'abord les hacks et vous commencez à vous inquiéter de leur comportement sur différents navigateurs et différentes machines.

au lieu de cela, vous pouvez compter sur des extensions CSS spécifiques au vendeur http://reference.sitepoint.com/css/vendorspecific

[mon approche] [1] Utilisation d'une classe PHP pour détecter les versions os, browser et browser.

[1]: Mon approche en utilisant une classe PHP pour détecter os, navigateur et version de navigateur http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach /

personnellement, J'ai trouvé que cela prend beaucoup de temps pour trouver tous ces hacks et les tester; chaque changement que vous faites vous devez tester dans 4+ les navigateurs pour s'assurer qu'il ne casse rien d'autre.

vous ne devriez pas avoir à tester les hacks CSS 'corrects' sur chaque navigateur.

l'idée est que vous écrivez le code conforme aux normes, puis ajouter des hacks spécifiques pour cibler un et un seul navigateur (ou moteur de rendu) que fait une erreur. Par exemple, écrire "* html #myelement" pour cibler une exception pour IE6 seulement: aucun autre navigateur ne sera jamais affecté par ce piratage il n'y a donc pas besoin de le tester exhaustivement. Il pourrait seulement aller mal si un nouveau navigateur obscur est venu le long et a fait exactement la même erreur que IE6, ce qui est extrêmement peu probable, pas votre faute, et quelque chose que vous pourriez vous attendre à obtenir corrigé rapidement.

il y a des choses qui s'appellent des hacks CSS mais qui utilisent les constructions invalides, comme le hack "_propertyname". Cela peut casser entre les navigateurs parce que lorsque vous utilisez le code invalide chaque navigateur pourrait l'interpréter différemment. Ne les utilisez pas.

pour être honnête, ce n'est en aucun cas la question qu'il était, principalement parce que IE5 est mort. Si vous utilisez un doctype en Mode standard et que vous écrivez aux standards, cela fonctionnera principalement dans la série actuelle de navigateurs. Le seul vrai cas de problème restant est IE6, que vous pouvez cibler avec " * html"; il est peu probable que vous aurez besoin de beaucoup plus dans la voie des hacks CSS que cela. Les jours du piratage de Box Model sont, heureusement, finis.

écoutez votre code! Kent Beck le dit. Et dans Wing-Tsun on dit: "Sois comme l'eau qui se plie!" Ou quelque chose.

regardez, voici un Hack CSS pour faire comprendre à IE5 html5: http://blog.whatwg.org/styling-ie-noscript .

et voici la même chose en utilisant JS: http://blog.whatwg.org/supporting-new-elements-in-ie .

comparez 5 pages d'explication de piratage avec 5 lignes de code bien compréhensible. Ainsi, l'utilisation de JS.

les Choses ont leurs avantages et leurs inconvénients. Et votre compréhension de la matière et l'élégance du code actuel ouvrent la voie.

hacks CSS ne sont pas la voie à suivre parce que les navigateurs sont mis à jour tout le temps, et de nouvelles mises à jour peuvent briser vos hacks, tandis que la détection de navigateur Javascript, vous pouvez confirmer avec précision les capacités du navigateur. Cependant, une autre option consiste à utiliser des CSS minimaux pour s'assurer que tout fonctionne dans toutes les situations. JQuery et d'autres bibliothèques javascript qui sont pour L'UI ont intégré la détection quant aux capacités des navigateurs, donc vous devriez vérifier ceux-ci.