Quelques changements à venir dans Chrome 108

Deux modifications importantes de Chrome 108 arrivent: CSS Overflow Properties and Android Version Ajustement Behavior

CSS Modifications de l'attribut de débordement de l'élément de remplacement:

En commençant par Chrome 108, les éléments de remplacement suivants suivront les overflow Attributs: img, video et canvas. Dans les versions antérieures de Chrome, cette propriété a été ignorée.

Cela signifie que l'image qui avait été précédemment recadrée dans la boîte de contenu peut maintenant être dessinée en dehors de la frontière si elle est spécifiée dans la feuille de style.

Par conséquent, toute image, vidéo et canevas débordé précédemment par défaut peut être recadrée après la version Chrome 108. Les situations suivantes doivent être prêtées à se faire attention:

• Utilisez l'attribut object-fit pour zoomer et remplir la case. Si le rapport d'aspect ne correspond pas à la case, l'image sera dessinée à l'extérieur de la limite.
La propriété
• border-radius fait que l'image carrée ressemble à un cercle, mais puisque overflow est visible, le recadrage ne se produit plus.
• set inherit: all, entraînant l'héritage de tous les attributs, y compris overflow.

Il est recommandé de lire l'article complet pour les exemples de code, mais pour la culture indésirable, la solution consiste à remplacer la valeur par défaut de UA avec overflow: visible: overflow: clip

img {
  overflow: visible;
}

Vérifiez la modification du comportement d'ajustement de la fenêtre pour Android:

En novembre, avec la sortie de Chrome 108, Chrome apportera quelques modifications au comportement de la fenêtre de mise en page lorsque le clavier à l'écran (OSK) est affiché. Avec ce changement, Chrome pour Android ne redimensionnera plus la fenêtre de mise en page, mais ne redimensionnera que la fenêtre visuelle. Cela gardera Chrome sur le comportement Android cohérent avec Chrome pour iOS et Safari pour iOS.

Il s'agit d'un changement lié aux puzzles communs de l'utilisation des unités de la fenêtre et du positionnement fixe sur les appareils tactiles mobiles. Nous avons discuté (et essayé de résoudre) ce problème au fil des ans:

"Certaines choses à noter lors de l'utilisation des unités de la fenêtre" (Chris Coyier)
"Louis Hoebregts" (Louis Hoebregts)
"Verseports grandes, petites et dynamiques" (Chris Coyier)
"Chris Coyier" (Chris Coyier)

Ce changement signifie que lorsque le clavier à l'écran s'affiche, Chrome pour Android ne redimensionnera plus la fenêtre de mise en page. Par conséquent, lorsque le clavier de l'appareil s'affiche, la valeur calculée de l'unité de la fenêtre ne sera plus réduite. De même, les éléments conçus pour occuper l'ensemble de la fenêtre ne seront plus réduits pour s'adapter au clavier. Les éléments en positions fixes n'apparaîtront plus dans des endroits inconnus car le clavier apparaît.

Cela apporte un comportement de navigateur croisé plus cohérent, conforme à Chrome, Safari et Edge sur iOS et iPados. C'est bien, même si le comportement mis à jour n'est pas idéal, car l'interface utilisateur du clavier peut encore écraser et obstruer les éléments du chemin.

Si vous voulez que les éléments restent visibles lorsque cela se produit, il vaut la peine de considérer une solution partagée par Chris il y a longtemps en utilisant l'attribut préfixe webkit-fill-available:

img {
  overflow: visible;
}

Ceci utilise l'espace disponible dans la fenêtre, pas la partie couverte par l'interface utilisateur ... mais Chrome ignore actuellement cette propriété, et je suis sûr qu'il est peu probable qu'il commence à le soutenir dans la version 108. Cela peut être un problème non pertinent, cependant, car Chrome 108 introduit également le support pour les petites, grandes et dynamiques des unités de fenêtre qui sont déjà prises en charge dans Safari et Firefox.

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Version de bureau

mobile / tablette pc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!