Taille des H1
Découvrons pourquoi la taille des H1 dépend du degré d’imbrication.
Commençons par trouver les feuilles de styles par défaut
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
On peut lire que :
De plus on lit que le style de H1 est différent suivant les imbrications :
En action
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
On peut lire que :
| /* children of the <head> element all have display:none */ | |
| head { | |
| display: none | |
| } | |
| meta { | |
| display: none | |
| } | |
| title { | |
| display: none | |
| } |
De plus on lit que le style de H1 est différent suivant les imbrications :
En action
Centrer : easy now !
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
text-align: center;
font-size: 8em;
}
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
text-align: center;
font-size: 8em;
}
Affichage dynamique la taille de la pagepage
window.innerWidth
permet de déterminer la largeur de la page !
L'affichage est dynamique grâce à l'utilisation de requestAnimation.
function tick() {
var width = window.innerWidth;
container.textContent = width + " px";
window.requestAnimationFrame(tick);
}
window.requestAnimationFrame(tick); // lancer en permanence
jsfiddle
Lorsque vous écrivez un script dans jsfiddle, il faut ouvrir la console pour voir son affichage.
si, vous incluez ce code dans le fichier HTML, la console apparaît dans le résultat !
<script>
var _consoleLog = console.log;
console.log = function(){
var name = _consoleLog.apply(console,arguments);
var str = "";
for(var index in arguments){
if(Array.isArray(arguments[index])){
arguments[index] = arguments[index].map(function(item){
if(typeof item == "object"){
item = JSON.stringify(item,null,4)+"<br>";
}
return item;
});
str += arguments[index]+" ";
} else if(typeof arguments[index] == "object"){
str = JSON.stringify(arguments[index],null,4);
} else {
str += arguments[index]+" ";
}
}
$('body').append("<div>"+str+"</div>");
}
</script>
si, vous incluez ce code dans le fichier HTML, la console apparaît dans le résultat !
<script>
var _consoleLog = console.log;
console.log = function(){
var name = _consoleLog.apply(console,arguments);
var str = "";
for(var index in arguments){
if(Array.isArray(arguments[index])){
arguments[index] = arguments[index].map(function(item){
if(typeof item == "object"){
item = JSON.stringify(item,null,4)+"<br>";
}
return item;
});
str += arguments[index]+" ";
} else if(typeof arguments[index] == "object"){
str = JSON.stringify(arguments[index],null,4);
} else {
str += arguments[index]+" ";
}
}
$('body').append("<div>"+str+"</div>");
}
</script>
Inscription à :
Articles (Atom)