Essayez
Le fonctionnement est simple : la feuille de style affiche une mire au centre de l'écran et des contours (internes / aucun décalage) aux éléments structurels de votre page, un outil pratique pour retrouver quelle marge échappe à votre contrôle et explose toute votre mise en page.
Attention
Assurez-vous de ne pas avoir le niveau de zoom de votre navigateur en-dessous de 100%, sinon quoi vous risquez de ne pas voir les contours d'1 pixel.
Adoptez
Appelez-la dans votre projet, comme feuille de style externe :
<link rel="stylesheet" media="screen" href="css/debug.css" type="text/css" /> <!-- adapt the path to your needs -->Ajoutez la class debugCSS (sensible à la casse) à la balise <body> et le tour est joué !
<body class="debugCSS">Astuce
Comme dans cette démo, vous pouvez créer un interrupteur ON/OFF qui ajoute et supprime la class debugCSS à loisir :
<a class="demo" onclick="document.body.classList.toggle('debugCSS');">Switch debug CSS</a>Combiné avec la formidable extension de navigateur Web Developer, vous pourriez sauver du temps de sommeil durant vos activités d'intégration Web.