L'impact de la transformation CSS3 sur le flux de documents HTML-tutoriel CSS-php.cn

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);
    }

Copier après la connexion

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 . 标准文档流

Lorsque vous utilisez des attributs tels que

et position pour le séparer du flux documentaire, un autre concept de page float sera généré. (Trop loin...) 层级

transform modifie l'attribut de positionnement par défaut

L'exemple de code est le suivant :

    <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>

Copier après la connexion

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;

Dans l'exemple, peu importe la façon dont p défile de haut en bas, l'en-tête et le pied de page seront toujours placés en haut et en bas de l'écran.

Mais comme mentionné initialement, ajoutez un

à 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;

En fait, l'objet de référence de

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

Vous pouvez utiliser

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;

A ce moment, afin d'apporter les modifications correspondantes à ce type de DOM, le navigateur générera une nouvelle fenêtre. Cette fenêtre existe comme un conteneur pour le positionnement des éléments et répondra à l'effet de transformation

de. le corps, permettant ainsi aux éléments intérieurs transform qui sortent du flux de documents d'être également transformés. positioned

Cette fenêtre affectera sérieusement le positionnement de

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

Situation étendue

Sur certains appareils mobiles (ou applications), la lecture de la balise

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>

Une situation similaire se produira également sur certains navigateurs mobiles de version inférieure. Vous pouvez essayer de la résoudre selon cette idée.

Résumé

En fait, la situation ci-dessus n'arrive pas seulement à

, 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 incroyable

De "Hardware Acceleration"

Une note du début de l'année, compilée pendant mon temps libre.

    html，body {
        transform: translate3d(0,0,0);
    }

Copier après la connexion

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.

. . . 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 . 标准文档流

Lorsque vous utilisez des attributs tels que

et position pour le séparer du flux documentaire, un autre concept de page float sera généré. (Trop loin...) 层级

transform modifie l'attribut de positionnement par défaut

L'exemple de code est le suivant :

    <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>

Copier après la connexion

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;

Dans l'exemple, peu importe la façon dont p défile de haut en bas, l'en-tête et le pied de page seront toujours placés en haut et en bas de l'écran.

Mais comme mentionné initialement, ajoutez un

En fait, l'objet de référence de

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

Vous pouvez utiliser

de. le corps, permettant ainsi aux éléments intérieurs transform qui sortent du flux de documents d'être également transformés. positioned

Cette fenêtre affectera sérieusement le positionnement de

semble se transformer en fixed, existant dans un conteneur "invisible" de la même taille que absolute. document.documentElement

Situation étendue

Sur certains appareils mobiles (ou applications), la lecture de la balise

Une situation similaire se produira également sur certains navigateurs mobiles de version inférieure. Vous pouvez essayer de la résoudre selon cette idée.

Résumé

En fait, la situation ci-dessus n'arrive pas seulement à

, n'importe quel dom produira un effet de type fenêtre d'affichage après avoir ajouté body. il. transform

Pour plus d'articles sur l'impact de la transformation CSS3 sur le flux de documents HTML, veuillez prêter attention au site Web PHP chinois !