TablesNG Chromium 91-এ লঞ্চ হয়েছে, এবং বহু বছর ধরে ওয়েব প্ল্যাটফর্মের অংশ হয়ে থাকা এক টন বাগ সংশোধন করে৷ এই আপডেটগুলি #Compat2021 প্রচেষ্টার একটি অংশ হিসাবে ব্রাউজার সামঞ্জস্যতা উন্নত করবে, এবং সামগ্রিকভাবে ওয়েব প্ল্যাটফর্মে টেবিলের ব্যবহার উন্নত করবে। সবচেয়ে তারকাচিহ্নিত কিছু সমস্যাগুলির মধ্যে রয়েছে position: sticky , সাবপিক্সেল জ্যামিতি , এবং যথাযথ বর্ডার-কোল্যাপসিং ৷
টেবিলএনজি প্রচেষ্টা
টেবিলএনজি হল একটি বহু-বছরের প্রচেষ্টা, যার নেতৃত্বে Chrome ডেভেলপার অ্যালেক্স টটিক, ওয়েবে টেবিলগুলি কীভাবে রেন্ডার করা হয় তা সম্পূর্ণরূপে পুনর্নির্মাণ করার জন্য৷ টেবিলগুলি হল ওয়েব ডেভেলপমেন্টে ঘর্ষণের একটি নির্দিষ্ট ক্ষেত্র, আংশিকভাবে তাদের ইতিহাসের কারণে।
1994 সালে এইচটিএমএল-এ টেবিল যোগ করা হয়েছিল, তারপর বহু বছর ধরে জটিল পৃষ্ঠা লেআউট তৈরি করার প্রাথমিক পদ্ধতি হিসেবে ব্যবহার করা হয়েছিল। এগুলি এখনও ওয়েব জুড়ে পাওয়া যায়, যদিও আধুনিক ব্যবহার সাধারণত ট্যাবুলার ডেটা প্রদর্শনের জন্য। যাইহোক, ব্রাউজার জুড়ে টেবিলের আচরণে বড় পার্থক্য রয়েছে, যার মধ্যে অনেকগুলি টেবিলের স্পেসিফিকেশন অসম্পূর্ণ এবং বিশদ বিবরণের অভাবের কারণে ঘটেছে। অনেক CSS বৈশিষ্ট্যের আগেও ব্রাউজারগুলিতে টেবিলগুলি প্রয়োগ করা হয়েছিল: অর্থোগোনাল লেখার মোড, position:relative , box-sizing , ফ্লেক্সবক্স কন্টেনার এবং আরও অনেক কিছু। তাই এই বৈশিষ্ট্যগুলির অনেকগুলির জন্য সমর্থন অসঙ্গত ছিল।
নতুন স্পেসিক, CSS টেবিল মডিউল লেভেল 3, 2018 সালে এজ পুনরায় প্রয়োগ করা টেবিলের পরে লেখা হয়েছিল। TablesNG হল একটি রি-আর্কিটেকচার প্রচেষ্টা যার লক্ষ্য শুধুমাত্র এই নতুন স্পেসিফিকেশন অনুসরণ করা নয়, পাশাপাশি টেবিলের অনেক অসঙ্গতিও ঠিক করা। . এর থেকে বেরিয়ে আসা কিছু দৃশ্যমান পরিবর্তনগুলি হল:
- স্ক্রোল করা লম্বা টেবিলের জন্য সারিগুলিতে স্টিকি পজিশনিং সক্ষম করা।
- সাব-পিক্সেল জ্যামিতি এবং টেবিলের সীমানা সহ প্রান্তিককরণ ঠিক করা।
- পটভূমি এবং সীমানা জন্য উন্নত পেইন্টিং.
position: sticky
অতীতে স্টাইলিং টেবিল সম্পর্কে সবচেয়ে বড় প্রশ্ন এবং সবচেয়ে হতাশাজনক জিনিসগুলির মধ্যে একটি ছিল position: sticky । এই বৈশিষ্ট্যটি আপনার স্ক্রোল করার সাথে সাথে একটি টেবিল হেডারকে পৃষ্ঠায় থাকতে সক্ষম করবে এবং দীর্ঘ ডেটা টেবিলে প্রসঙ্গ দেবে। যখন আপনি শিরোনামটি দৃশ্যের বাইরে স্ক্রোল করেন এবং আপনি সংখ্যায় পূর্ণ একটি টেবিলের দিকে তাকাচ্ছেন, সেই সংখ্যাগুলির অর্থ কী তা ভুলে যাওয়া সহজ।
<thead> এ position: sticky প্রয়োগ করা হচ্ছে। আমাদের এতদিন ধরে এই বাগটি থাকার কারণ হল position: sticky ভালভাবে নির্দিষ্ট করা হয়েছিল। এই সংশোধনের আগে, একটি উদ্দেশ্যযুক্ত position: sticky কেবল অবস্থানে রূপান্তরিত করা হয়েছিল position: static , কিন্তু এখন, আপনি position: sticky টেবিলের যে কোনও জায়গায় ব্যবহার করতে পারেন: শিরোনাম ( <thead> ) বা উল্লম্ব অক্ষ লেবেলে৷
উন্নত বর্ডার পেইন্টিং এবং ব্যাকগ্রাউন্ড পেইন্টিং
প্রাচীনতম টেবিল বাগগুলির মধ্যে একটি সেপ্টেম্বর 2008 এর তারিখের। এটি Chrome প্রকাশিত হওয়ার সাথে সাথেই ফাইল করা হয়েছিল এবং পুরানো টেবিল আর্কিটেকচারের কারণে এটি কখনই ঠিক করা যায়নি। সমস্যাটি টেবিল পেইন্টিং এবং ভেঙে পড়া সীমানাকে ঘিরে।
টেবিলগুলি যেভাবে আঁকা হয়, z-index এর ক্রমানুসারে, তা হল: ঘর > সারি > বিভাগ > টেবিল। তারপরে সেগুলি DOM (ডকুমেন্ট অবজেক্ট মডেল) এ প্রদর্শিত ক্রম অনুসারে আঁকা হয়, যদিও কোষগুলি নিজেই বিপরীত DOM ক্রমে থাকে, যেখানে টেবিলের প্রথম ঘরটি শীর্ষে থাকে।
সুতরাং এখানে সমস্যা হল যে সীমানাগুলি টেবিলের অন্তর্গত, ঘরের নয়, পুরোনো উপায়ে যে টেবিলগুলি আঁকা হয়েছিল। যখন টেবিল তার অগ্রভাগে রঙ করে তখন সংকুচিত সীমানাগুলি আঁকা হয়। এর মানে হল যে একটি একক টেবিল কক্ষে একাধিক সীমানা থাকতে পারে না:
উপরের উদাহরণে, আপনি দেখতে পাচ্ছেন যে বামদিকের নীল কক্ষটি ভুলভাবে কমলা নীচে-ডান কক্ষের উপরে আঁকা হয়েছে কারণ এটির একাধিক সীমানা থাকতে পারে না। পুনঃস্থাপিত বাস্তবায়নে, এটি সমাধান করা হয়, এবং কমলা বর্ডার সেলটি নীলের উপরে সঠিকভাবে পেইন্ট করে, দ্বিতীয় টেবিলের ফাঁকে নীল এবং কমলা উভয় সীমানা রেখা থাকতে দেয়।
এই বাগটি এখন ক্রোমিয়াম এবং ফায়ারফক্সে সংশোধন করা হয়েছে৷
সাব-পিক্সেল জ্যামিতি (টেবিল প্রান্তিককরণ)
টেবিলে পিক্সেল সারিবদ্ধকরণ হল আরেকটি ইন্টারঅপারেবিলিটি সমস্যা যা TablesNG এর সাথে ঠিক করা হয়েছে। পূর্বে, পুরানো ইঞ্জিন সবসময় গ্রাফিক্সের মানকে পিক্সেলের সাথে বৃত্তাকার করত। এর মানে হল যে আপনি পৃষ্ঠাটি জুম ইন এবং আউট করার সাথে সাথে জিনিসগুলি স্থানান্তরিত হবে, যার ফলে প্রান্তিককরণের সমস্যা হবে। TablesNG এই প্রান্তিককরণ সমস্যাগুলি সমাধান করে।
ওয়েব পুনর্নির্মাণ করা হচ্ছে
ক্রোম টিম শুধুমাত্র ওয়েব অথরিংকে আরও শক্তিশালী করার জন্য নতুন বৈশিষ্ট্যগুলি প্রবর্তন করেনি, তারা বিদ্যমান API এবং তাদের সামঞ্জস্যতা উন্নত করার জন্য কঠোর পরিশ্রম করছে৷ প্রকৃতপক্ষে, TablesNG হল অনেকগুলি পুনঃস্থাপত্য প্রকল্পের মধ্যে একটি যা এই দলটি গত আট বছরে গ্রহণ করেছে। অন্যান্য, যদিও সমস্ত প্রকল্প নয়, অন্তর্ভুক্ত:
- লেআউটএনজি: ব্যাপকভাবে উন্নত নির্ভরযোগ্যতা এবং আরও অনুমানযোগ্য কর্মক্ষমতার জন্য সমস্ত লেআউট অ্যালগরিদমের একটি গ্রাউন্ড-আপ পুনর্লিখন।
- BlinkNG: পরিষ্কারভাবে পৃথক করা পাইপলাইন পর্যায়গুলিতে ব্লিঙ্ক রেন্ডারিং ইঞ্জিনের একটি পদ্ধতিগত পরিষ্কার এবং রিফ্যাক্টরিং। এটি আরও ভাল ক্যাশিং, উচ্চতর নির্ভরযোগ্যতা এবং পুনঃপ্রবেশকারী / বিলম্বিত-রেন্ডারিং বৈশিষ্ট্য যেমন বিষয়বস্তু-দৃশ্যমানতা এবং কন্টেইনার কোয়েরির জন্য অনুমতি দেয়।
- GPU রাস্টার সর্বত্র: যখনই সম্ভব সব প্ল্যাটফর্মে GPU রাস্টারাইজেশন চালু করার জন্য একটি দীর্ঘমেয়াদী প্রচেষ্টা।
- থ্রেডেড স্ক্রলিং এবং অ্যানিমেশন: কম্পোজিটর থ্রেডে সমস্ত স্ক্রোলিং এবং নন-লেআউট-ইনডিউসিং অ্যানিমেশন সরানোর জন্য একটি দীর্ঘমেয়াদী প্রচেষ্টা।
এই উন্নতি এবং আরো কিছু আপডেটের জন্য একটি সন্ধান রাখুন!