زوجان من التغييرات القادمة في Chrome 108

"تغيير في تجاوز العناصر المستبدلة في CSS":

من Chrome 108 ، تحترم العناصر المستبدلة التالية خاصية overflow: img, video و  canvas. في الإصدارات السابقة من Chrome ، تم تجاهل هذه الخاصية على هذه العناصر.

هذا يعني أن الصورة التي تم قصها مسبقًا في مربع المحتوى الخاص بها يمكنها الآن الرسم خارج تلك الحدود إذا تم تحديدها للقيام بذلك في ورقة أنماط.

لذلك ، قد تعرض عناصر الصورة والفيديو واللوحة القماشية التي تم قصها مرة واحدة الفائض عند شحن Chrome 108. المواقف المذكورة حيث قد يؤثر ذلك على عملك الحالي:

• • object-fit يتم استخدام الخاصية لقياس الصورة وملء المربع. إذا كانت نسبة العرض إلى الارتفاع لا تتطابق مع المربع ، فسيتم رسم الصورة خارج الحدود.
• • border-radius تجعل الخاصية الصورة المربعة تبدو كدائرة ، ولكن لأن overflow غير مرئي لم يعد يحدث القطع.
• الضبط inherit: all والتسبب في وراثة جميع الخصائص ، بما في ذلك overflow.

يستحق قراءة المقالة الكاملة لأمثلة التعليمات البرمجية ، ولكن الحل للتجاوز المرئي غير المرغوب فيه يتجاوز القيمة الافتراضية لـ UA overflow: visible مع overflow: clip:

img {
  overflow: clip;
}

"الاستعداد لتغييرات سلوك تغيير حجم منفذ العرض القادمة إلى Chrome على Android":

في نوفمبر ، مع إصدار Chrome 108 ، سيجري Chrome بعض التغييرات على كيفية تصرف Layout Viewport عند عرض لوحة المفاتيح على الشاشة (OSK). مع هذا التغيير ، لن يقوم Chrome على Android بعد الآن بتغيير حجم Layout Viewport ، وبدلاً من ذلك يقوم بتغيير حجم Visual Viewport فقط. سيؤدي ذلك إلى جعل سلوك Chrome على Android مساويًا لسلوك Chrome على iOS و Safari على iOS.

هذا تغيير متعلق بالصداع الشائع للعمل مع وحدات منفذ العرض وتحديد المواقع الثابتة على أجهزة اللمس المحمولة. لقد قمنا بتغطيتها (وحاولنا حلها) على مر السنين:

يعني التغيير أن Chrome على Android لن يقوم بعد الآن بتغيير حجم Layout Viewport عند عرض لوحة المفاتيح على الشاشة. لذلك ، لن تتقلص القيم المحسوبة لوحدات منفذ العرض عند عرض لوحة مفاتيح الجهاز. ينطبق الأمر نفسه على العناصر التي تم تصميمها لاستيعاب إطار العرض الكامل ولم يعد يتقلص لاستيعاب لوحة المفاتيح. ولن ينتهي الأمر بعد الآن بعنصر ثابت الموضع من يعرف أين تنبثق لوحة المفاتيح.

يوفر هذا سلوكًا أكثر اتساقًا عبر المستعرضات يتماشى مع Chrome و Safari و Edge على iOS و iPadOS. هذا رائع ، حتى لو كان السلوك المحدث أقل من مثالي لأن واجهة مستخدم لوحة المفاتيح لا تزال قادرة على تغطية وإخفاء العناصر التي تعترض طريقها.

إذا كنت تفضل أن تظل العناصر مرئية عند حدوث ذلك ، فمن الجدير النظر إلى ملف الحل الذي شاركه كريس منذ فترة طويلة الذي يستخدم البادئة webkit-fill-available خاصية:

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

يستخدم ذلك المساحة المتاحة في منفذ العرض بدلاً من ما تغطيه واجهة المستخدم ... لكن Chrome يتجاهل حاليًا الخاصية ، وأراهن على أنه من غير المرجح أن يبدأ احترامه في الإصدار 108. قد تكون هذه نقطة خلافية ، رغم ذلك ، مثل يقدم Chrome 108 أيضًا دعم وحدات منفذ العرض الصغيرة والكبيرة والديناميكية ، والتي يتم دعمها بالفعل في Safari و Firefox.