Skip to content

Instantly share code, notes, and snippets.

@384400

384400/-sizes.md

Created August 6, 2017 22:17
Show Gist options
  • Save 384400/82481cc409575f11e91cfd3163d40bae to your computer and use it in GitHub Desktop.
Save 384400/82481cc409575f11e91cfd3163d40bae to your computer and use it in GitHub Desktop.
Download ZIP
[Html] [JavaScript] [Css] Afficher les tailles, interlignes et marges dans un navigateur
Raw
-sizes.md

Comment afficher les tailles, interlignes et marges dans un navigateur ?

En cours de développement d'une feuille de style, il est commode de voir directement, sans recourir à la console, les tailles, interlignes et marges des blocs de texte ou de tout autre élément.

Dans le même esprit, il est instructif de voir la feuille de style par défaut d'un navigateur.

Avec notre outil, il suffit d'insérer ses propres styles : lors de l'affichage dans un navigateur, la page indique sous forme de texte les valeurs calculées : le redimensionnement de la taille du navigateur recalcule à la volée les éléments.

Ce travail peut être étendu à l'infini en ajoutant de nouvelles détections.

Raw
sizes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Affichage des tailles, interlignes et marges dans un navigateur</title>
<style>
body {
color: #222;
font-family: sans-serif;
}
ul.displays {
border-left: thick solid red;
list-style-type: none;
margin-left: 0;
padding-left: 5em;
}
</style>
</head>
<body>
<h1>Texte de premier niveau</h1>
<h2>Texte de deuxième niveau</h2>
<h3>Texte de troisième niveau</h3>
<h4>Texte de quatrième niveau</h4>
<h5>Texte de cinquième niveau</h5>
<h6>Texte de sixième niveau</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Else</li>
</ul>
<ul class="displays">
<li>Largeur du Viewport, <span id="viewport-display"></span>.</li>
<li>Taille de la police de titre de premier niveau, <span id="h1-font-display"></span>.</li>
<li>Taille de la marge supérieure d'un titre de premier niveau, <span id="h1-margin-bottom-display"></span>.</li>
<li>Taille de la marge inférieure d'un titre de premier niveau, <span id="h1-margin-top-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de premier niveau, <span id="h1-line-display"></span>.</li>
<li>Taille de la police de titre de deuxième niveau, <span id="h2-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de deuxième niveau, <span id="h2-line-display"></span>.</li>
<li>Taille de la police de titre de troisième niveau, <span id="h3-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de troisième niveau, <span id="h3-line-display"></span>.</li>
<li>Taille de la police de titre de quatrième niveau, <span id="h4-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de quatrième niveau, <span id="h4-line-display"></span>.</li>
<li>Taille de la police de titre de cinquième niveau, <span id="h5-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de cinquième niveau, <span id="h5-line-display"></span>.</li>
<li>Taille de la police de titre de sixième niveau, <span id="h6-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un titre de sixième niveau, <span id="h6-line-display"></span>.</li>
<li>Taille de la police de paragraphe, <span id="text-font-display"></span>.</li>
<li>Hauteur de l'interligne d'un paragraphe, <span id="text-line-display"></span>.</li>
<li>Taille de la marge supérieure d'un paragraphe, <span id="text-margin-bottom-display"></span>.</li>
<li>Taille de la marge inférieure d'un paragraphe, <span id="text-margin-top-display"></span>.</li>
<li>Hauteur d'un item de liste, <span id="li-line-display"></span>.</li>
</ul>
<script>
document.querySelector('#viewport-display').innerHTML = window.innerWidth + 'px';
document.querySelector('#h1-font-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).fontSize;
document.querySelector('#h1-line-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).lineHeight;
document.querySelector('#h1-margin-bottom-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).marginBottom;
document.querySelector('#h1-margin-top-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).marginTop;
document.querySelector('#h2-font-display').innerHTML = window.getComputedStyle(document.querySelector('h2')).fontSize;
document.querySelector('#h2-line-display').innerHTML = window.getComputedStyle(document.querySelector('h2')).lineHeight;
document.querySelector('#h3-font-display').innerHTML = window.getComputedStyle(document.querySelector('h3')).fontSize;
document.querySelector('#h3-line-display').innerHTML = window.getComputedStyle(document.querySelector('h3')).lineHeight;
document.querySelector('#h4-font-display').innerHTML = window.getComputedStyle(document.querySelector('h4')).fontSize;
document.querySelector('#h4-line-display').innerHTML = window.getComputedStyle(document.querySelector('h4')).lineHeight;
document.querySelector('#h5-font-display').innerHTML = window.getComputedStyle(document.querySelector('h5')).fontSize;
document.querySelector('#h5-line-display').innerHTML = window.getComputedStyle(document.querySelector('h5')).lineHeight;
document.querySelector('#h6-font-display').innerHTML = window.getComputedStyle(document.querySelector('h6')).fontSize;
document.querySelector('#h6-line-display').innerHTML = window.getComputedStyle(document.querySelector('h6')).lineHeight;
document.querySelector('#text-font-display').innerHTML = window.getComputedStyle(document.querySelector('p')).fontSize;
document.querySelector('#text-line-display').innerHTML = window.getComputedStyle(document.querySelector('p')).lineHeight;
document.querySelector('#text-margin-bottom-display').innerHTML = window.getComputedStyle(document.querySelector('p')).marginBottom;
document.querySelector('#text-margin-top-display').innerHTML = window.getComputedStyle(document.querySelector('p')).marginTop;
document.querySelector('#li-line-display').innerHTML = window.getComputedStyle(document.querySelector('li')).lineHeight;
window.addEventListener('resize', refreshViewport);
function refreshViewport() {
document.querySelector('#viewport-display').innerHTML = window.innerWidth + 'px';
document.querySelector('#h1-font-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).fontSize;
document.querySelector('#h1-line-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).lineHeight;
document.querySelector('#h1-margin-bottom-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).marginBottom;
document.querySelector('#h1-margin-top-display').innerHTML = window.getComputedStyle(document.querySelector('h1')).marginTop;
document.querySelector('#h2-font-display').innerHTML = window.getComputedStyle(document.querySelector('h2')).fontSize;
document.querySelector('#h2-line-display').innerHTML = window.getComputedStyle(document.querySelector('h2')).lineHeight;
document.querySelector('#h3-font-display').innerHTML = window.getComputedStyle(document.querySelector('h3')).fontSize;
document.querySelector('#h3-line-display').innerHTML = window.getComputedStyle(document.querySelector('h3')).lineHeight;
document.querySelector('#h4-font-display').innerHTML = window.getComputedStyle(document.querySelector('h4')).fontSize;
document.querySelector('#h4-line-display').innerHTML = window.getComputedStyle(document.querySelector('h4')).lineHeight;
document.querySelector('#h5-font-display').innerHTML = window.getComputedStyle(document.querySelector('h5')).fontSize;
document.querySelector('#h5-line-display').innerHTML = window.getComputedStyle(document.querySelector('h5')).lineHeight;
document.querySelector('#h6-font-display').innerHTML = window.getComputedStyle(document.querySelector('h6')).fontSize;
document.querySelector('#h6-line-display').innerHTML = window.getComputedStyle(document.querySelector('h6')).lineHeight;
document.querySelector('#text-font-display').innerHTML = window.getComputedStyle(document.querySelector('p')).fontSize;
document.querySelector('#text-line-display').innerHTML = window.getComputedStyle(document.querySelector('p')).lineHeight;
document.querySelector('#text-margin-bottom-display').innerHTML = window.getComputedStyle(document.querySelector('p')).marginBottom;
document.querySelector('#text-margin-top-display').innerHTML = window.getComputedStyle(document.querySelector('p')).marginTop;
document.querySelector('#li-line-display').innerHTML = window.getComputedStyle(document.querySelector('li')).lineHeight;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment