Le navigateur Web actuel est très éloigné de l'époque folle où toute sorte de cohérence entre navigateurs était un voeu pieux. Les navigateurs Web actuels sont tous très conformes aux normes. Ils jouent bien ensemble et offrent un affichage de page relativement cohérent sur les différents navigateurs. Cela inclut les dernières versions de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari et les divers navigateurs présents sur la myriade de périphériques mobiles utilisés pour accéder au site Web aujourd'hui.
Bien que des progrès aient certes été réalisés en ce qui concerne les navigateurs Web et la manière dont ils affichent les feuilles de style CSS, il subsiste des incohérences entre ces différentes options logicielles. L'une des incohérences courantes est la manière dont ces navigateurs calculent les marges, le remplissage et les bordures par défaut.
En raison de ces aspects du modèle de boîte, affectant tous les éléments HTML et essentiels à la création de présentations de page, un affichage incohérent signifie qu'une page peut sembler belle dans un navigateur, mais légèrement différente dans un autre. Pour lutter contre ce problème, de nombreux concepteurs Web normalisent ces aspects du modèle de boîte. Cette pratique est également appelée "mise à zéro" des valeurs pour les marges, le remplissage et les bordures.
Note sur les valeurs par défaut du navigateur
Les navigateurs Web ont tous des paramètres par défaut pour certains aspects de l'affichage d'une page. Par exemple, les hyperliens sont bleus et soulignés par défaut. Ceci est cohérent pour tous les navigateurs. Bien que la plupart des concepteurs modifient leur configuration en fonction des besoins de conception de leur projet spécifique, le fait qu'ils commencent tous par les mêmes paramètres par défaut facilite ces modifications. Malheureusement, la valeur par défaut des marges, du remplissage et des bordures n’a pas le même niveau de cohérence entre les navigateurs.
Normaliser les valeurs pour les marges et les rembourrages
Le meilleur moyen de résoudre le problème du modèle de boîte incohérente consiste à définir toutes les marges et les valeurs de remplissage des éléments HTML sur zéro. Pour y arriver, vous pouvez ajouter cette règle CSS à votre feuille de style:
Cette règle CSS utilise le caractère * ou générique. Ce caractère signifie "tous les éléments" et il sélectionnerait fondamentalement chaque élément HTML et définirait les marges et le remplissage à 0. Même si cette règle est très peu spécifique, car elle se trouve dans votre feuille de style externe, elle aura une spécificité supérieure à celle du navigateur par défaut les valeurs font. Puisque ces valeurs par défaut correspondent à ce que vous écrasez, ce style accomplira ce que vous vous proposez de faire.
Une autre option consiste à appliquer ces valeurs aux éléments HTML et body. Étant donné que tous les autres éléments de votre page seront des enfants de ces deux éléments, la cascade CSS doit appliquer ces valeurs à tous ces autres éléments.
Cela lancera votre conception au même endroit sur tous les navigateurs, mais il convient de se rappeler qu’une fois toutes les marges et les marges désactivées, vous devrez les réactiver de manière sélective pour des parties spécifiques de votre page Web pour obtenir l’aspect recherché. et sentez que votre conception appelle.
Les frontières
Vous pensez peut-être "mais aucun navigateur n'a de bordure par défaut autour de l'élément body". Ce n'est pas strictement vrai. Les anciennes versions d'Internet Explorer ont une bordure transparente ou invisible autour des éléments. Si vous ne définissez pas la bordure sur 0, cette bordure peut gâcher la mise en page. Si vous avez décidé de continuer à prendre en charge ces versions obsolètes d'IE, vous devrez résoudre ce problème en ajoutant les éléments suivants à votre corps et à vos styles HTML:
HTML, corps {marge: 0px;remplissage: 0px; bordure: 0px;} Semblable à la façon dont vous avez désactivé les marges et le remplissage, ce nouveau style désactive également les bordures par défaut. Vous pouvez également faire la même chose en utilisant le sélecteur de caractère générique présenté plus haut dans l'article. Article original de Jennifer Krynin. Edité par Jeremy Girard le 27/09/16.
