Chrome 108-এ একটি যুগল পরিবর্তন আসছে৷

"সিএসএসে প্রতিস্থাপিত উপাদানগুলিতে ওভারফ্লোতে একটি পরিবর্তন":

Chrome 108 থেকে, নিম্নলিখিত প্রতিস্থাপিত উপাদানগুলি ওভারফ্লো সম্পত্তিকে সম্মান করে: img, video এবং canvas. Chrome-এর পূর্ববর্তী সংস্করণগুলিতে, এই উপাদানগুলিতে এই বৈশিষ্ট্যটিকে উপেক্ষা করা হয়েছিল৷

এর মানে হল যে একটি চিত্র যা আগে এর বিষয়বস্তু বাক্সে ক্লিপ করা হয়েছিল এখন সেই সীমার বাইরে আঁকতে পারে যদি এটি একটি স্টাইল শীটে করার জন্য নির্দিষ্ট করা হয়।

সুতরাং, চিত্র, ভিডিও এবং ক্যানভাস উপাদানগুলি যেগুলি একবার ক্লিপ করা হয়েছিল সেগুলি Chrome 108 শিপ করার সময় ওভারফ্লো প্রদর্শন করতে পারে৷ উল্লেখিত পরিস্থিতি যেখানে এটি আপনার বিদ্যমান কাজকে প্রভাবিত করতে পারে:

• সার্জারির  object-fit ইমেজ স্কেল এবং বাক্স পূরণ করার জন্য সম্পত্তি ব্যবহার করা হয়। যদি আকৃতির অনুপাত বাক্সের সাথে মেলে না, তবে চিত্রটি সীমার বাইরে আঁকবে।
• সার্জারির  border-radius সম্পত্তি একটি বর্গাকার চিত্রকে একটি বৃত্তের মতো দেখায়, কিন্তু কারণ overflow দৃশ্যমান ক্লিপিং আর ঘটবে না।
• বিন্যাস inherit: all এবং সমস্ত সম্পত্তি উত্তরাধিকার সূত্রে প্রাপ্ত করা, সহ overflow.

কোড উদাহরণগুলির জন্য সম্পূর্ণ নিবন্ধটি পড়ার মূল্য, কিন্তু অবাঞ্ছিত দৃশ্যমান ওভারফ্লো জন্য সমাধান UA এর ডিফল্ট ওভাররাইড করছে overflow: visible সঙ্গে overflow: clip:

img {
  overflow: clip;
}

"Android-এ Chrome-এ আসছে ভিউপোর্ট রিসাইজ আচরণ পরিবর্তনের জন্য প্রস্তুতি নিন":

নভেম্বরে, ক্রোম 108 প্রকাশের সাথে সাথে, অন-স্ক্রিন কীবোর্ড (OSK) দেখানো হলে লেআউট ভিউপোর্ট কীভাবে আচরণ করে তাতে Chrome কিছু পরিবর্তন করবে। এই পরিবর্তনের সাথে, Android-এ Chrome আর লেআউট ভিউপোর্টের আকার পরিবর্তন করবে না এবং পরিবর্তে শুধুমাত্র ভিজ্যুয়াল ভিউপোর্টের আকার পরিবর্তন করবে। এটি আইওএস-এ ক্রোম এবং আইওএস-এ সাফারির মতো অ্যানড্রয়েড-এর আচরণের সমতা আনবে।

এটি মোবাইল টাচ ডিভাইসে ভিউপোর্ট ইউনিট এবং স্থির অবস্থানের সাথে কাজ করার সাধারণ মাথাব্যথার সাথে সম্পর্কিত একটি পরিবর্তন। আমরা বছরের পর বছর ধরে এটি কভার করেছি (এবং সমাধান করার চেষ্টা করেছি):

পরিবর্তনের মানে হল যে অন-স্ক্রীন কীবোর্ড দেখানো হলে Android-এ Chrome আর লেআউট ভিউপোর্টের আকার পরিবর্তন করবে না। সুতরাং, একটি ডিভাইসের কীবোর্ড প্রদর্শিত হলে ভিউপোর্ট ইউনিটের গণনাকৃত মান আর সঙ্কুচিত হবে না। একই রকম উপাদানগুলির ক্ষেত্রেও যায় যা সম্পূর্ণ ভিউপোর্ট নেওয়ার জন্য ডিজাইন করা হয়েছে এবং কীবোর্ডকে সামঞ্জস্য করার জন্য আর সঙ্কুচিত হয় না। এবং একটি স্থির-অবস্থানের উপাদান আর শেষ হবে না কে জানে কখন কীবোর্ড পপ আপ হয়।

এটি আরও সামঞ্জস্যপূর্ণ ক্রস-ব্রাউজার আচরণ নিয়ে আসে যা iOS এবং iPadOS-এ Chrome, Safari এবং Edge-এর সাথে সঙ্গতিপূর্ণ। এটি দুর্দান্ত, এমনকি যদি আপডেট করা আচরণ আদর্শের চেয়ে কম হয় কারণ কীবোর্ড UI এখনও তার পথে আসা উপাদানগুলিকে আবৃত এবং অস্পষ্ট করতে পারে।

আপনি যদি উপাদানগুলিকে দৃশ্যমান রাখতে পছন্দ করেন যখন এটি ঘটবে, এটি একটি দেখার মূল্য সমাধান ক্রিস একটি দীর্ঘ সময় আগে ভাগ যে উপসর্গ ব্যবহার করে webkit-fill-available সম্পত্তি:

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

এটি UI দ্বারা আচ্ছাদিত করার পরিবর্তে ভিউপোর্টে উপলব্ধ স্থান ব্যবহার করে… তবে Chrome বর্তমানে সম্পত্তিটিকে উপেক্ষা করে, এবং আমি আমার পকেটে থাকা নিকেল বাজি ধরতে চাই যে 108 রিলিজে এটিকে সম্মান করা শুরু করার সম্ভাবনা নেই৷ যে একটি মূল বিন্দু হতে পারে, যদিও, হিসাবে ক্রোম 108ও চালু করেছে ছোট, বড় এবং গতিশীল ভিউপোর্ট ইউনিটগুলির জন্য সমর্থন, যা ইতিমধ্যে সাফারি এবং ফায়ারফক্সে সমর্থিত।