কম্প্যাট 2021-এর মধ্য-বছরের আপডেট— পাঁচটি মূল ফোকাস এলাকায় ব্রাউজার সামঞ্জস্যের সমস্যা দূর করার একটি প্রচেষ্টা: CSS ফ্লেক্সবক্স, CSS গ্রিড, অবস্থান: স্টিকি, আকৃতি-অনুপাত এবং CSS রূপান্তর।
এটি কম্প্যাট 2021-এর মধ্য-বছরের আপডেটের সময় - পাঁচটি মূল ফোকাস এলাকায় ব্রাউজার সামঞ্জস্য সমস্যা দূর করার একটি প্রচেষ্টা। #compat2021-এর কাজ এবং আমরা কীভাবে ফোকাসের ক্ষেত্রে সিদ্ধান্ত নিয়েছি সে সম্পর্কে আরও বিশদ বিবরণের জন্য, মার্চের ঘোষণাটি দেখুন।
এই পোস্টে আলোচনা করা Chromium-এর উন্নতিগুলি Chrome, Edge এবং সমস্ত Chromium-ভিত্তিক ব্রাউজারে পৌঁছাবে৷
আমরা কিভাবে অগ্রগতি পরিমাপ করি
বিভিন্ন ব্রাউজারে পাস করা পরীক্ষার সংখ্যা এবং ট্রেন্ডিং গ্রাফ দেখতে আপনি ওয়েব-প্ল্যাটফর্ম-পরীক্ষার জন্য Compat 2021 ড্যাশবোর্ড চেক করতে পারেন।
একটি সাধারণ "পরীক্ষায় উত্তীর্ণ" নম্বর ব্রাউজার সামঞ্জস্যের সম্পূর্ণ গল্প বলে না, তবে এটি আমাদের প্রচেষ্টার অগ্রগতি দেখতে আমরা যে সংকেতগুলি ব্যবহার করি তার মধ্যে একটি। পরীক্ষার ফলাফলে ব্রাউজারগুলির মধ্যে কম পার্থক্য মানে একাধিক ব্রাউজার জুড়ে একটি ওয়েব বৈশিষ্ট্যের বৃহত্তর আন্তঃঅপারেবিলিটি।
CSS flexbox
তিনটি ব্রাউজার ইঞ্জিনই ফ্লেক্সবক্সে উন্নতি দেখেছে।
Safari 14.1 ফ্লেক্সবক্সের জন্য gap প্রপার্টি পাঠিয়েছে। gap সম্পত্তি আইটেম মধ্যে ব্যবধান সেট করার একটি সুবিধাজনক উপায়. এই প্রপার্টিটি প্রায়ই গ্রিড লেআউটে ব্যবহার করা হয়, এবং ফ্লেক্সবক্স লেআউটে সমর্থন ছিল MDN ব্রাউজার সামঞ্জস্য রিপোর্টের সবচেয়ে অনুরোধ করা বৈশিষ্ট্যগুলির মধ্যে একটি। এই আপডেটের সাথে, ফ্লেক্স লেআউটের gap প্রপার্টি সমস্ত প্রধান ব্রাউজারে উপলব্ধ এবং একটি শীর্ষ সামঞ্জস্যপূর্ণ চ্যালেঞ্জ সমাধান করা হয়েছে। Safari 14.1 এছাড়াও ফ্লেক্সবক্সে চিত্রগুলির জন্য অনেকগুলি সংশোধন অন্তর্ভুক্ত করে, পুরানো কাজের জন্য প্রয়োজনীয়তা দূর করে৷
ফায়ারফক্স ফ্লেক্স আইটেম হিসাবে টেবিলের রেন্ডারিং সমাধান করেছে, ফায়ারফক্সকে 100% পরীক্ষায় উত্তীর্ণ হওয়ার কাছাকাছি (বর্তমানে 98.5%)।
পাশাপাশি ফ্লেক্স আইটেম হিসাবে Chromium স্থির টেবিল . Chromium 88-এ, ফ্লেক্স আইটেম হিসাবে ইমেজগুলির একটি পুনর্লিখনও ছিল, যা বহুদিনের বাগগুলির সমাধান করে। অবশেষে, Chromium সম্প্রতি নতুন প্রান্তিককরণ কীওয়ার্ডগুলির জন্য সমর্থন যোগ করেছে: start , end , self-start , self-end , left এবং right । এই কীওয়ার্ডগুলি Chrome Canary এবং Edge Canary- এ চেষ্টা করার জন্য উপলব্ধ।
CSS গ্রিড
CSS গ্রিডের ব্যবহার ক্রমশ বাড়ছে , বর্তমানে পৃষ্ঠা দর্শনের 9%। তিনটি প্রধান ব্রাউজার ইঞ্জিনই CSS গ্রিড প্রয়োগ করে এবং ইতিমধ্যেই 89% এর বেশি সম্পর্কিত ওয়েব-প্ল্যাটফর্ম-পরীক্ষায় উত্তীর্ণ হয়েছে। এই বৈশিষ্ট্যটির স্থিতিশীল বৃদ্ধিকে সমর্থন করার জন্য সামঞ্জস্যের ফাঁক বন্ধ করা গুরুত্বপূর্ণ।
এখন পর্যন্ত 2021 সালে, Safari পরীক্ষায় উত্তীর্ণ হয়ে 89% থেকে 93% হয়েছে এবং Chromium আরও CSS গ্রিড সমস্যা সমাধানের জন্য একটি নতুন আর্কিটেকচারে কাজ করছে, যার নাম GridNG। এটি মাইক্রোসফ্ট টিমের নেতৃত্বে একটি প্রচেষ্টা, এবং লক্ষ্যবস্তু গ্রিড পরীক্ষায় সাম্প্রতিক সময়ে 94% থেকে 97% বৃদ্ধি পেয়েছে। আপনি শীঘ্রই এজ ব্লগে গ্রিডএনজি-তে একটি আপডেট আশা করতে পারেন।
CSS position: sticky
Chromium-এ, position: sticky TablesNG-এর লঞ্চের সাথে স্থির করা হয়েছে—টেবিলগুলির পুনরায় আর্কিটেক্ট রেন্ডারিং করার বহু বছরের প্রচেষ্টা৷ এই পরিবর্তনটি, কয়েকটি চূড়ান্ত সংশোধনের সাথে, Chrome এবং Edge 93 ডেভেলপার চ্যানেলকে 100% টার্গেট করা পরীক্ষায় উত্তীর্ণ হতে সাহায্য করেছে।
position: sticky , টেবিলএনজি 72টি ক্রোমিয়াম বাগ সমাধান করেছে !
CSS aspect-ratio সম্পত্তি
aspect-ratio বৈশিষ্ট্য, যা প্রস্থ-থেকে-উচ্চতা অনুপাত সেট করা সহজ করে তোলে, প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ক্রমবর্ধমান বিন্যাস স্থানান্তর প্রতিরোধ করার একটি সমাধান।
aspect-ratio বৈশিষ্ট্যটি এখন Chrome, Edge এবং Firefox-এর স্থিতিশীল সংস্করণে এবং Safari 15 বিটাতে সমর্থিত। ক্রস-ব্রাউজার সমর্থন উন্নত হওয়ার সাথে সাথে ব্যবহার বাড়ছে।
যদিও কোনো ব্রাউজারে 100% পাস করা পরীক্ষা নেই, তবে কম্প্যাট 2021-এর জন্য aspect-ratio সামঞ্জস্যের ব্যবধান হল পাঁচটি ফোকাস এলাকার মধ্যে সবচেয়ে ছোট। এতে সমস্ত প্রধান ব্রাউজারগুলির জন্য 90%-এর বেশি পরীক্ষা রয়েছে। সামনের দিকে এগিয়ে, আমরা এই টেস্ট স্যুটটিকে একটি রক-সলিড বৈশিষ্ট্য তৈরি করতে ব্যবহার করে অগ্রগতি পর্যবেক্ষণ করতে থাকব।
web.dev-এ aspect-ratio সম্পত্তির ব্যবহার এবং সুবিধা সম্পর্কে আরও জানুন।
CSS রূপান্তরিত করে
সিএসএস রূপান্তরের লক্ষ্যবস্তু পরীক্ষার ফলাফলে একটি ধীর এবং স্থির উন্নতি হয়েছে, উভয় বাগ সংশোধন এবং পরীক্ষায় উন্নতির কারণে।
Chromium টিম ট্রান্সফর্ম transform-style: preserve-3d এবং transform :perspective() এর ইন্টারঅপারেবিলিটি উন্নত করার জন্যও কাজ করছে। আমরা পরবর্তী আপডেটে ভাগ করার জন্য আরও অগ্রগতি আশা করি।
সামগ্রিক স্কোর উন্নতি
মার্চে ঘোষণার পর থেকে, তিনটি ব্রাউজার ইঞ্জিনই তাদের Compat 2021 স্কোর উন্নত করেছে:
- Chrome এবং Edge Dev 86 থেকে 92 এ চলে গেছে।
- ফায়ারফক্স 83 থেকে 86 এ চলে গেছে।
- সাফারি 64 থেকে 82 এ চলে গেছে।
উল্লেখযোগ্যভাবে, ওয়েবকিট অবদানকারীদের অনেক কাজের জন্য সাফারি সামঞ্জস্যের ব্যবধানটি 18 পয়েন্টে বন্ধ করতে ঠেলে দিয়েছে। বিশেষ করে ইগালিয়ার দলটি aspect-ratio বৈশিষ্ট্য এবং ফ্লেক্সবক্স এবং গ্রিডের অনেক উন্নতিতে অবদান রেখেছে, যেমন ফ্লেক্সবক্সের জন্য gap এবং বিভিন্ন বাগ ফিক্স।
Compat 2021 এর অগ্রগতি অনুসরণ করুন
Compat 2021-এর অগ্রগতি অনুসরণ করতে, ড্যাশবোর্ডে নজর রাখুন, আমাদের মেইলিং তালিকায় সদস্যতা নিন বা usat @chromiumdev- এর সাথে যোগাযোগ করুন। আপনি যদি কোনও সমস্যা অনুভব করেন তবে প্রভাবিত ব্রাউজারের জন্য একটি বাগ ফাইল করা নিশ্চিত করুন৷