Utiliser les marges négatives CSS - une bonne ou une mauvaise pratique ?

Question

L'utilisation de marges négatives en CSS est-elle une bonne/mauvaise pratique ?

J'ai lu quelque part que les marges négatives doivent être utilisées pour la séparation, et non pour le positionnement. Leur utilisation entraînera-t-elle une confusion ou des problèmes de développement ? Qu'en est-il du support/de la rétrocompatibilité/des correctifs pour les anciens navigateurs comme IE7 et IE8 ?

Answer 1

Ils constituent un outil puissant, mais vous ne devez les utiliser que lorsque c'est nécessaire. Si vous pensez qu'elles peuvent prêter à confusion, vous devez ajouter des commentaires (documentation) à l'intérieur du CSS pour expliquer le problème que cette marge négative résout. Vous pouvez supprimer automatiquement ces commentaires au cours du processus de déploiement.

Jetez également un coup d'œil à http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

Cela dépend de l'usage que vous en faites. Parfois, vous ne pouvez pas réaliser certaines choses sans eux. Par exemple, pour aligner verticalement un élément, l'utilisation d'une marge de valeur négative est acceptable. Pour décaler légèrement une icône, c'est acceptable.

Answer 3

Il n'y a rien de nouveau à ajouter ici, mais je ne vais pas approuver l'utilisation de marges négatives. Les marges négatives peuvent prêter à confusion et sont susceptibles de provoquer des bogues (bogues de défilement de l'ancre nommée en haut, ou hauteurs non prises en compte des éléments à marge supérieure négative dans safari mobile, par exemple). Le W3C autorise les marges négatives, mais il semble que les navigateurs ne s'entendent pas sur la manière de les rendre dans certaines situations. Jusqu'à ce que tous les navigateurs traitent cette question de la même manière dans toutes les situations, les marges négatives créent un cas limite où des modifications du moteur de rendu jugées "sûres" par le fabricant peuvent casser vos pages en production. Ce n'est pas le seul endroit où cela peut se produire, alors pourquoi prendre sciemment le risque des marges négatives ?

Si vous vous retrouvez à utiliser des marges négatives, vous faites probablement quelque chose de mal. Le positionnement relatif et absolu existe pour cette raison et je n'ai jamais rencontré de code qui ne pouvait pas être corrigé en utilisant l'une de ces deux solutions ou en retravaillant le balisage ou les styles de mise en page qui causent le besoin de marges négatives.

Answer 4

La marge négative peut vous sauver la vie, notamment lorsque vous souhaitez positionner précisément une division sans avoir à utiliser le positionnement absolu ou relatif. Il n'y a rien de mal à l'utiliser, et elle est compatible avec tous les navigateurs. Cependant, ne l'utilisez que si nécessaire. N'en abusez pas, car les choses pourraient devenir confuses dans le cas d'une mise en page chargée.

Answer 5

Ils sont acceptables, tant que vous ne les utilisez pas pour régler le symptôme d'un problème, plutôt que d'en trouver la cause. Pensez à la lisibilité de votre code, quelqu'un d'autre regardant votre travail comprendra-t-il ce qui se passe ?

Si vous les utilisez, expliquez pourquoi dans un commentaire. S'il s'agit d'une correction de navigateur, pensez à les placer dans un fichier fixes.css spécifique.