Quoi de mieux: les hacks CSS ou la détection de navigateur?

Question

Souvent quand je regarde autour de l'Internet, je trouve que les gens sont généralement en utilisant des hacks CSS pour rendre leur site web regarder la même dans tous les navigateurs. Personnellement, j'ai trouvé cela pas mal de temps à trouver tous ces hacks et les tester; chaque modification que vous apportez, vous devez les tester en 4+, navigateurs assurez-vous qu'il ne rompt pas autre chose.

Il ya environ un an, j'ai regardé autour de l'Internet ce que les autres sites majeurs sont à l'aide de (Yahoo, Google, BBC, etc) et constaté que la plupart d'entre eux sont en train de faire une certaine forme de la détection de navigateur (JS, HTML si les déclarations, en fonction de serveur). J'ai commencé à le faire ainsi. Sur presque tous les sites que j'ai travaillé récemment, j'utilise jQuery, j'ai donc utiliser le navigateur intégré de détection.

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

Answer 1

Il existe une troisième option:

Réduire ou éliminer la nécessité pour la détection du navigateur et des hacks 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). Ce n'est pas prendre soin de tout, mais ça fait beaucoup et a délégué l'effort de prendre en charge plusieurs navigateurs pour quelqu'un qui a passé et dépenser beaucoup plus d'efforts sur ce que vous pouvez vous permettre ou souhaitez.

Après que j'ai suivi ces princples:

• Utiliser ce que j'appelle minimale CSS, ce qui signifie uniquement utiliser les fonctionnalités qui sont largement pris en charge;
• Utiliser des tableaux pour des complexes de mise en page si nécessaire. Vous ne pouvez pas comme ça, mais franchement pour faire des choses comme côté-à-côte, les tables de travail sur les navigateurs remontant à une dizaine d'années et aura beaucoup moins d'effort que de se divs de travailler avec des combinaisons de positionnement absolu, flottant et similaires;
• Force IE6 dans le strict plutôt que le mode quirks par l'ajout d'un DOCTYPE. Je ne peux pas souligner combien plus facile ce sera de faire de votre vie mais curieusement, beaucoup de gens ne semblent pas le faire encore;
• Minimiser le 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, ajouter quelques fichiers CSS pour les navigateurs. J'ai tendance à le faire sur le serveur plutôt que sur le client avec les pages générées (qui, avouons-le, est la plupart d'entre eux). De nombreux projets sur lesquels j'ai travaillé ont eu IEfix.les fichiers css.

Après, j'ai diviser les navigateurs dans les niveaux:

Niveau 1:

• Firefox 3;
• IE7.

Mon site doit travailler sur ces.

Niveau 2:

• Firefox 2;
• Safari;
• L'opéra;
• Le Chrome.

Mon site doit travailler sur ces. Cela peut choquer certaines personnes, mais franchement, la part de marché de ces navigateurs est tellement faible qu'ils sont tout simplement pas aussi important que Firefox 3 ou IE7.

Niveau 3:

• IE6;
• Les autres.

Un minimum d'efforts seront faits pour travailler sur ces sauf s'il est, par exemple, une compagnie d'exigence. IE6 est le cauchemar d'un, mais c'est de la part de marché en décembre était de 20% et de la baisse rapide. Plus il y a de valable des problèmes de sécurité (sur les sites web par exemple) pour dissuader ou même interdisez l'utilisation de IE6, telles que des sites comme Paypal ont bloqué IE6 et Google indique aux utilisateurs de déposer IE6.

Answer 2

Le problème est que vous ne vraiment obtenir un coup de feu à la css (car il est assez bien contenu statique au niveau du client)... vous ne pouvez pas (facilement) à l'adapter à la volée au client, alors pour ceux délicat incompatible cas (et il y a trop d'entre eux), la détection est malheureusement le meilleur itinéraire. Je ne vois pas ce qui évolue très vite.

Avec javascript, vous pouvez souvent éviter une grande partie de cette douleur à travers les bibliothèques, comme (comme vous dites) de jQuery et de la vérification de la fonctionnalité de soutien plutôt que d'identifier le navigateur (la plupart du temps). Il y a certains cas, vous devez savoir exactement (le modèle de boîte, par exemple).

Answer 3

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

Oui. Côté Client, le navigateur de détection des pauses si JavaScript est désactivé et ne peut pas fonctionner correctement avec les futures versions de navigateur. La dernière raison est également vrai pour les hacks CSS. Côté serveur, le navigateur de détection des pauses si le consentement explicite de l'utilisateur essaie de le casser, mais cela pourrait quand même être une alternative viable.

Ce que je recommande:

Assurez-vous que vous êtes un code qui fonctionne dans le navigateur respectant les standards - savoir développer dans un ou deux de ceux-ci et de vérifier browsershots.org par la suite. Plus vraisemblablement, il sera possible de mettre en œuvre le résultat souhaité dans tous les d'eux avec une feuille de style.

Ensuite, il y a IE. Si il y a seulement quelques questions, vous pourriez aller avec une CSS hack. Sinon, utiliser les commentaires conditionnels.

Edit:

Si j'ai à l'appui de l'ancienne navigateur ainsi, en général, je aller dans le sens de la dégradation gracieuse: je vais juste vous montrez le html pur avec une base de la feuille de style (tailles de polices, couleurs, ...). Tous les trucs de fantaisie sera caché avec un @import règle.

Answer 4

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

Answer 5

Les hacks sont plus rapides pour le navigateur, mais la détection du navigateur offre une meilleure lisibilité dans votre CSS si vous le structurez correctement. Si vous pouvez effectuer une détection de navigateur tout en partageant le code CSS entre les navigateurs et ne conserver que les différents fichiers css dans des fichiers séparés, peu importe, vous pouvez utiliser la détection de navigateur - car il s'agit là de quelque chose qu'un débutant peut comprendre, où les piratages CSS est difficile à comprendre si vous ne les connaissez pas