Chrome 108'de Birkaç Değişiklik Geliyor

“CSS'de değiştirilen öğelerde taşma değişikliği”:

Chrome 108'den itibaren aşağıdaki değiştirilen öğeler taşma özelliğine uygundur: img, video ve canvas. Chrome'un önceki sürümlerinde bu özellik, bu öğelerde göz ardı ediliyordu.

Bu, daha önce içerik kutusuna kırpılan bir görüntünün, stil sayfasında belirtilmesi durumunda artık bu sınırların dışına çıkabileceği anlamına gelir.

Bu nedenle, daha önce kırpılmış olan resim, video ve tuval öğeleri, Chrome 108 gönderildiğinde taşmayı görüntüleyebilir. Bunun mevcut çalışmanızı etkileyebileceği belirtilen durumlar:

• The object-fit özelliği görüntüyü ölçeklemek ve kutuyu doldurmak için kullanılır. En boy oranı kutuyla eşleşmiyorsa görüntü sınırların dışına çıkacaktır.
• The border-radius özelliği kare bir görüntünün daire gibi görünmesini sağlar, ancak overflow artık kırpmanın meydana gelmediği görülüyor.
• ayar inherit: all ve dahil olmak üzere tüm mülklerin miras alınmasına neden olmak overflow.

Kod örnekleri için makalenin tamamını okumaya değer, ancak istenmeyen görünür taşmaların çözümü UA'nın varsayılanını geçersiz kılmaktır overflow: visible ile overflow: clip:

img {
  overflow: clip;
}

"Android'de Chrome'a ​​gelecek görünüm yeniden boyutlandırma davranışı değişikliklerine hazırlanın":

Kasım ayında Chrome 108'in piyasaya sürülmesiyle birlikte Chrome, ekran klavyesi (OSK) gösterildiğinde Düzen Görünümü'nün davranışında bazı değişiklikler yapacak. Bu değişiklikle birlikte, Android'deki Chrome artık Düzen Görünümü'nü yeniden boyutlandırmayacak, bunun yerine yalnızca Görsel Görünümü yeniden boyutlandıracak. Bu, Android'deki Chrome'un davranışını iOS'taki Chrome ve iOS'taki Safari ile aynı seviyeye getirecek.

Bu, görünüm birimleriyle çalışmanın ve mobil dokunmatik cihazlarda sabit konumlandırmanın sık karşılaşılan sorunlarıyla ilgili bir değişikliktir. Yıllar boyunca bu konuyu ele aldık (ve çözmeye çalıştık):

Değişiklik, Android'deki Chrome'un artık ekran klavyesi gösterildiğinde Düzen Görünümü'nü yeniden boyutlandırmayacağı anlamına geliyor. Dolayısıyla, görünüm birimlerinin hesaplanan değerleri artık bir cihazın klavyesi görüntülendiğinde küçültülmeyecektir. Aynı şey, klavyeye uyum sağlamak için artık küçülmeyen, tam görünüm alanını kaplayacak şekilde tasarlanan öğeler için de geçerlidir. Ve artık klavyenin ne zaman açılacağı belli olmayan sabit konumlu bir öğe ortaya çıkmayacak.

Bu, iOS ve iPadOS'te Chrome, Safari ve Edge ile uyumlu daha tutarlı tarayıcılar arası davranış sağlar. Güncellenen davranış idealden daha az olsa bile bu harika çünkü klavye kullanıcı arayüzü hala yoluna çıkan öğeleri kapatabiliyor ve gizleyebiliyor.

Bu durumda öğelerin görünür kalmasını tercih ediyorsanız, bir göz atmaya değer. Chris'in uzun zaman önce paylaştığı çözüm ön eki kullanan webkit-fill-available özelliği:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Bu, kullanıcı arayüzünün kapsadığı alan yerine görünüm alanındaki kullanılabilir alanı kullanıyor… ancak Chrome şu anda bu özelliği görmezden geliyor ve cebimdeki kuruşa bahse girerim ki, 108 sürümünde buna saygı duymaya başlamanın pek mümkün olmadığı. Ancak bu tartışmalı bir konu olabilir, çünkü Chrome 108 ayrıca şunları da sunuyor: Safari ve Firefox'ta zaten desteklenen küçük, büyük ve dinamik görünüm birimleri desteği.