Conception pour le Web est déjà assez difficile sans avoir à vous soucier de la compatibilité cross-browser. Cependant, puisque chaque moteur de rendu a évolué à interpréter (W3C) les lignes directrices de la World Wide Web Consortium pour Cascading Style Sheets (CSS) et HyperText Markup Language (HTML) différemment, pages web montrent souvent des écarts surprenants d'un navigateur à l'autre. Pour créer un site Web fiable uniforme dans tous les principaux navigateurs, vous avez besoin d'une approche systématique, efficace et pratique pour le dépannage des erreurs. Vous aurez également besoin d'une connaissance pratique des normes CSS conforme et HTML.
Construisez votre conception pour Firefox. Firefox a toujours tenu au courant des derniers changements en CSS et tend à être stable, ce qui rend le démarrage candidat de point de départ pour tous vos projets web. Complétez votre première conception dans Firefox, puis passer à d'autres navigateurs pour vérifier les incohérences.
Travailler avec Firefox extensions de conception. Extensions vous aidera à repérer les erreurs dans le modèle objet de document (DOM), trouver des sélecteurs CSS appropriées et des conseils de code de balayage pour les propriétés CSS.
Testez votre conception dans les navigateurs WebKit (Chrome / Safari). Intégré de l'outil de débogage de droit d'accès Chrome; cliquant sur la page et en sélectionnant "Inspecter l'élément." Depuis deux Chrome et Safari utilisent le même moteur WebKit, vous aurez normalement besoin de tester dans l'un de ces deux navigateurs, même si elle est toujours de bonne pratique de vérifier à la fois.
Notez toutes les incohérences que vous observez dans Chrome vs Firefox. Ouvrez le côté deux navigateurs à côte. Si vous ne voyez pas les incohérences, passez directement à l'essai dans Internet Explorer à l'étape 8. Si des incohérences apparaissent dans Chrome, puis consultez les étapes 5, 6 et 7.
techniques de CSS d'étude. Éviter ou contourner les problèmes et les incohérences du navigateur en appliquant une variété de techniques à ce problème. Apprendre ces en étudiant le travail des autres, par exemple dans les nombreux blogs en ligne consacrées à la discussion et l'enseignement des techniques de CSS. Lisez-les régulièrement, ou rechercher à travers eux lorsque vous rencontrez un problème spécifique.
Donnez votre balisage structurel et de présentation CSS. Utiliser des balises HTML pour organiser la structure du document de votre page Web, mais exclusivement utiliser les CSS pour définir les propriétés de style de la page. Par exemple, ne pas utiliser des balises HTML gras, italique ou fortes pour le style de votre texte. Utilisez les propriétés de police de CSS à la place.
Ajouter une feuille de style spécifique à Chrome. Faire cela seulement si vous pouvez incohérences pas correctes entre Chrome et Firefox en améliorant sur le codage de style partagé entre eux. Snippets et javascript pour les feuilles de style spécifiques à Chrome sont disponibles en ligne.
Test dans les dernières versions d'Internet Explorer (IE). Ne soyez pas rebutés par problèmes-souvent, un tweak simple style ou l'ajustement structurel à l'HTML est tout ce que vous devez faire. programmes de test, tels que IE Tester, faciliter le processus de test dans différentes versions d'IE, ainsi que pour inspecter le code lui-même.
Créer une feuille IE spécifique. Ne pas passer trop de temps à essayer de manipuler les CSS pour créer une apparence cohérente dans IE. Il suffit de créer une nouvelle feuille de style spécifique à IE, et de modifier les sélecteurs CSS et les propriétés dont vous avez besoin. Snippets pour ajouter des feuilles de style IE à vos modèles HTML sont disponibles en ligne.
Gardez un manuel de référence de CSS à proximité. Acheter un manuel de poche ou d'accéder à la documentation en ligne du W3C dans une fenêtre de navigateur distincte.