Maison >interface Web >tutoriel CSS >L'impact de la transformation CSS3 sur le flux de documents HTML
L'impact de la transformation CSS3 sur le flux de documents HTML
- 高洛峰original
- 2017-02-09 11:27:331757parcourir
Le HTML est toujours aussi incroyable
De "Hardware Acceleration"
Une note de début d'année, compilée pendant mon temps libre.
De nombreux articles en ligne suggèrent d'activer l'accélération matérielle du navigateur, ce qui améliorera la vitesse de rendu des pages et la fluidité de l'animation. C'est presque devenu la configuration standard pour la production de pages de nombreuses personnes, qu'elle soit réellement utile ou non :
html，body {
transform: translate3d(0,0,0);
}
Mais dans de nombreux cas, cela provoquera des "anomalies" dans le flux de documents au niveau HTML.
La spécification W3C a la description suivante :
Dans l'espace de noms HTML, toute valeur autre que none pour la transformation entraîne la création à la fois d'un contexte d'empilement et d'un bloc conteneur
Le. l'objet agit comme un bloc conteneur pour les descendants à position fixe.
signifie :
En HTML, il n'y a pas plus de transformation que transform transformer un DOM qui est à la fois un objet empilé et un bloc conteneur . Cela n’a plus de sens.
Ce type d'objet joue également le rôle de conteneur d'éléments descendants positioned (principalement absolus/fixes).
. . . Ma capacité de traduction est limitée, et ceux qui ne la comprennent pas peuvent être encore plus confus après avoir lu cette phrase Détails ci-dessous.
Flux de documents standard
Les éléments DOM de la page sont disposés de haut en bas et de gauche à droite selon l'ordre de leurs positions de balises en HTML
Je pense que tout le monde connaît déjà cette définition de base. Mais comment cela se traduit-il en pratique ?
Si vous placez beaucoup d'éléments display: inline-block sur la page, ils seront soigneusement disposés haut-> bas gauche-> C'est l'incarnation de base de . 标准文档流
et position pour le séparer du flux documentaire, un autre concept de page float sera généré. (Trop loin...) 层级
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>Cliquez pour voir l'exemple
élément dom L'attribut de positionnement par défaut est
qui est également la méthode de positionnement standard pour les flux de documents standard. position: static;
à body ou html, et si vous réessayez, vous constaterez que les deux éléments de l'original transform: translate3d(0,0,0); ne sont plus obéissants. Pendant que l'écran défile. position: fixed;
n'est pas ce que tout le monde appelle l'écran, mais un objet html de position: fixed; Généralement, une page (viewport) générera une fenêtre d'affichage. document.documentElement
pour voir la hauteur réelle de la fenêtre, dans laquelle les éléments de document.documentElement.clientHeight sont positionnés en l'utilisant comme conteneur. Après avoir ajouté l'attribut fixed au
body (ou html), l'ensemble du transform DOM subira les transformations correspondantes, mais le "tout" pour le moment ne fait référence qu'aux éléments de flux de documents standard sous le corps .Pour ceux L'élément body / position: absolute; a été séparé du flux de documents auquel appartient le corps, il ne peut donc pas naturellement obtenir l'effet de transformation correspondant en s'appuyant sur la transformation du corps. position: fixed;
de. le corps, permettant ainsi aux éléments intérieurs transform qui sortent du flux de documents d'être également transformés. positioned
Lorsqu'elle défilera de manière synchrone avec le dom "original", elle roulera avec l'élément position: fixed;, ce qui produira quelque chose comme fixed L'effet étrange. : L'élément absolute
semble se transformer en fixed, existant dans un conteneur "invisible" de la même taille que absolute. document.documentElement
est activée par défaut avec un décodage dur. À ce moment, le phénomène ci-dessus se produira également, et la vidéo "flottera". "Sur la page, elle ne défilera pas normalement avec les éléments de la page. <video>
, n'importe quel dom produira un effet de type fenêtre d'affichage après avoir ajouté body. il. transform
Citation :http://www.php.cn/
html Toujours aussi incroyableDe "Hardware Acceleration" Une note du début de l'année, compilée pendant mon temps libre.
De nombreux articles en ligne suggèrent d'activer l'accélération matérielle du navigateur, ce qui améliorera la vitesse de rendu des pages et la fluidité de l'animation. C'est presque devenu la configuration standard pour la production de pages de nombreuses personnes, qu'elle soit réellement utile ou non :
html，body {
transform: translate3d(0,0,0);
}
Mais dans de nombreux cas, cela provoquera des "anomalies" dans le flux de documents au niveau HTML.
La spécification W3C a la description suivante :
Dans l'espace de noms HTML, toute valeur autre que none pour la transformation entraîne la création à la fois d'un contexte d'empilement et d'un bloc conteneur
Le. l'objet agit comme un bloc conteneur pour les descendants à position fixe.
signifie :
En HTML, il n'y a pas plus de transformation que transform transformer un DOM qui est à la fois un objet empilé et un bloc conteneur . Cela n’a plus de sens.
Ce type d'objet joue également le rôle de conteneur d'éléments descendants positioned (principalement absolus/fixes).
. . . Ma capacité de traduction est limitée, et ceux qui ne la comprennent pas peuvent être encore plus confus après avoir lu cette phrase Détails ci-dessous.
Flux de documents standard
Les éléments DOM de la page sont disposés de haut en bas et de gauche à droite selon l'ordre de leurs positions de balises en HTML
Je pense que tout le monde connaît déjà cette définition de base. Mais comment cela se traduit-il en pratique ?
Si vous placez beaucoup d'éléments display: inline-block sur la page, ils seront soigneusement disposés haut-> bas gauche-> C'est l'incarnation de base de . 标准文档流
et position pour le séparer du flux documentaire, un autre concept de page float sera généré. (Trop loin...) 层级
<body> <header style="position: fixed; top: 0; width: 100%; background: red;">header</header> <p style="height: 2000px;"></p> <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer> </body>Cliquez pour voir l'exemple
élément dom L'attribut de positionnement par défaut est
qui est également la méthode de positionnement standard pour les flux de documents standard. position: static;
à body ou html, et si vous réessayez, vous constaterez que les deux éléments de l'original transform: translate3d(0,0,0); ne sont plus obéissants. Pendant que l'écran défile. position: fixed;
n'est pas ce que tout le monde appelle l'écran, mais un objet html de position: fixed; Généralement, une page (viewport) générera une fenêtre d'affichage. document.documentElement
pour voir la hauteur réelle de la fenêtre, dans laquelle les éléments de document.documentElement.clientHeight sont positionnés en l'utilisant comme conteneur. Après avoir ajouté l'attribut fixed au
body (ou html), l'ensemble du transform DOM subira les transformations correspondantes, mais le "tout" pour le moment ne fait référence qu'aux éléments de flux de documents standard sous le corps .Pour ceux L'élément body / position: absolute; a été séparé du flux de documents auquel appartient le corps, il ne peut donc pas naturellement obtenir l'effet de transformation correspondant en s'appuyant sur la transformation du corps. position: fixed;
de. le corps, permettant ainsi aux éléments intérieurs transform qui sortent du flux de documents d'être également transformés. positioned
Lorsqu'elle défilera de manière synchrone avec le dom "original", elle roulera avec l'élément position: fixed;, ce qui produira quelque chose comme fixed L'effet étrange. : L'élément absolute
semble se transformer en fixed, existant dans un conteneur "invisible" de la même taille que absolute. document.documentElement
est activée par défaut avec un décodage dur. À ce moment, le phénomène ci-dessus se produira également, et la vidéo "flottera". "Sur la page, elle ne défilera pas normalement avec les éléments de la page. <video>
, n'importe quel dom produira un effet de type fenêtre d'affichage après avoir ajouté body. il. transform