Beberapa perubahan yang terdapat di Chrome 108

Dua perubahan penting kepada Chrome 108 akan datang: CSS Overflow Properties dan Android Viewport ADVIEDY ADVIEOM

Perubahan atribut limpahan elemen penggantian CSS:

Bermula dengan Chrome 108, elemen penggantian berikut akan mengikuti atribut

: overflow, img, dan video. Dalam versi Chrome terdahulu, harta ini tidak diendahkan. canvas

Ini bermakna imej yang sebelum ini dipotong ke kotak kandungan, kini boleh ditarik di luar sempadan jika ditentukan dalam lembaran gaya.

Oleh itu, mana -mana imej, video, dan elemen kanvas yang lalai sebelum ini boleh dipotong selepas pelepasan Chrome 108. Situasi berikut perlu diberi perhatian kepada:

Gunakan atribut

untuk zum masuk dan isi kotak. Jika nisbah aspek tidak sepadan dengan kotak, imej akan ditarik di luar sempadan.
• Hartanah object-fit
menjadikan imej persegi kelihatan seperti bulatan, tetapi sejak
• dapat dilihat, tanaman tidak lagi berlaku. border-radius overflow set
, mengakibatkan warisan semua atribut, termasuk
• . inherit: all overflow
Adalah disyorkan untuk membaca artikel penuh untuk contoh kod, tetapi untuk tanaman yang tidak diingini, penyelesaiannya adalah untuk mengatasi kegagalan UA dengan

:

overflow: visible overflow: clip

periksa perubahan tingkah laku pelarasan viewport untuk Android:

img {
  overflow: visible;
}

Pada bulan November, dengan pelepasan Chrome 108, Chrome akan membuat beberapa perubahan kepada tingkah laku susun atur viewport apabila papan kekunci pada skrin (OSK) dipaparkan. Dengan perubahan ini, Chrome untuk Android tidak lagi mengubah saiz pandangan susun atur, tetapi hanya akan mengubah saiz viewport visual. Ini akan menjadikan Chrome pada tingkah laku Android selaras dengan Chrome untuk iOS dan Safari untuk iOS.

Ini adalah perubahan yang berkaitan dengan teka -teki biasa menggunakan unit Viewport dan kedudukan tetap pada peranti sentuhan mudah alih. Kami telah membincangkan (dan cuba menyelesaikan) masalah ini selama bertahun -tahun:

"Beberapa perkara yang perlu diperhatikan semasa menggunakan unit viewport" (Chris Coyier)

"Louis Hoebregts" (Louis Hoebregts)
"viewports besar, kecil dan dinamik" (Chris Coyier)
"Chris Coyier" (Chris Coyier)
• Perubahan ini bermakna apabila papan kekunci pada skrin dipaparkan, Chrome untuk Android tidak lagi mengubah saiz susun atur. Oleh itu, apabila papan kekunci peranti memaparkan, nilai yang dikira unit Viewport tidak lagi akan dikurangkan. Begitu juga, unsur -unsur yang direka untuk menduduki keseluruhan pandangan tidak akan dikurangkan agar sesuai dengan papan kekunci. Unsur -unsur dalam kedudukan tetap tidak lagi muncul di lokasi yang tidak diketahui kerana papan kekunci muncul.

Ini membawa lebih banyak tingkah laku penyemak imbas yang konsisten, selaras dengan krom, safari, dan kelebihan pada iOS dan iPados. Ini adalah baik, walaupun tingkah laku yang dikemas kini tidak sesuai, kerana UI keyboard masih boleh menimpa dan menghalang unsur -unsur jalan.

Jika anda mahu unsur -unsur tetap kelihatan apabila ini berlaku, ia patut dipertimbangkan penyelesaian yang dikongsi oleh Chris lama dahulu menggunakan atribut Prefix webkit-fill-available:

img {
  overflow: visible;
}

Ini menggunakan ruang yang terdapat di Viewport, bukan bahagian yang diliputi oleh UI ... tetapi Chrome kini mengabaikan harta ini, dan saya pasti tidak mungkin ia akan mula menyokongnya dalam versi 108. Ini mungkin merupakan isu yang tidak relevan, walaupun, sebagai Chrome 108 juga memperkenalkan sokongan untuk unit Viewport kecil, besar dan dinamik yang telah disokong di Safari dan Firefox.

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

versi desktop

PC Mobile/Tablet

Atas ialah kandungan terperinci Beberapa perubahan yang terdapat di Chrome 108. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!