রেগুলার এক্সপ্রেশনের বাইরে: Chrome DevTools-এ CSS মান পার্সিং উন্নত করা

Philip Pfaffe

Ergün Erdogmus

আপনি কি Chrome DevTools এর শৈলী ট্যাবে CSS বৈশিষ্ট্যগুলি ইদানীং একটু বেশি মসৃণ দেখাচ্ছে? এই আপডেটগুলি, Chrome 121 এবং 128-এর মধ্যে রোল আউট করা হয়েছে, আমরা কীভাবে CSS মানগুলিকে পার্স এবং উপস্থাপন করি তার একটি উল্লেখযোগ্য উন্নতির ফলাফল৷ এই নিবন্ধে, আমরা আপনাকে এই রূপান্তরের প্রযুক্তিগত বিশদটি নিয়ে চলে যাব—একটি রেগুলার এক্সপ্রেশন ম্যাচিং সিস্টেম থেকে আরও শক্তিশালী পার্সারে চলে যাওয়া।

আগের সংস্করণের সাথে বর্তমান DevTools তুলনা করা যাক:

বেশ পার্থক্য, তাই না? এখানে মূল উন্নতিগুলির একটি ব্রেক ডাউন রয়েছে:

• color-mix color-mix ফাংশনের মধ্যে দুটি রঙের আর্গুমেন্টকে দৃশ্যত প্রতিনিধিত্ব করে একটি সহজ প্রিভিউ।
• pink নামযুক্ত রঙের pink জন্য একটি ক্লিকযোগ্য রঙের পূর্বরূপ । সহজ সমন্বয়ের জন্য একটি রঙ পিকার খুলতে এটিতে ক্লিক করুন।
• var(--undefined, [fallback value]) । অনির্ধারিত ভেরিয়েবলের উন্নত হ্যান্ডলিং, অনির্ধারিত ভেরিয়েবল ধূসর হয়ে গেছে এবং সক্রিয় ফলব্যাক মান (এই ক্ষেত্রে, একটি HSL রঙ) একটি ক্লিকযোগ্য রঙের পূর্বরূপের সাথে প্রদর্শিত হয়।
• hsl(…) : hsl কালার ফাংশনের জন্য আরেকটি ক্লিকযোগ্য রঙের প্রিভিউ, কালার পিকারে দ্রুত অ্যাক্সেস প্রদান করে।
• 177deg : একটি ক্লিকযোগ্য কোণ ঘড়ি যা আপনাকে ইন্টারেক্টিভভাবে টেনে আনতে এবং কোণের মান পরিবর্তন করতে দেয়।
• var(--saturation, …) : কাস্টম সম্পত্তি সংজ্ঞার একটি ক্লিকযোগ্য লিঙ্ক , এটি প্রাসঙ্গিক ঘোষণায় যেতে সহজ করে তোলে।

পার্থক্য আকর্ষণীয়. এটি অর্জন করার জন্য, আমাদেরকে DevTools কে CSS প্রপার্টির মানগুলি আগের তুলনায় অনেক ভালভাবে বুঝতে শেখাতে হয়েছিল।

এই পূর্বরূপ ইতিমধ্যে উপলব্ধ ছিল না?

যদিও এই প্রিভিউ আইকনগুলি পরিচিত মনে হতে পারে, সেগুলি সবসময় ধারাবাহিকভাবে প্রদর্শিত হয় না, বিশেষ করে উপরের উদাহরণের মতো জটিল CSS সিনট্যাক্সে। এমনকি যে ক্ষেত্রে তারা কাজ করেছিল, সেগুলিকে সঠিকভাবে কাজ করার জন্য প্রায়শই উল্লেখযোগ্য প্রচেষ্টার প্রয়োজন হয়।

এর কারণ হল যে মান বিশ্লেষণের সিস্টেমটি DevTools-এর প্রথম দিন থেকে অর্গানিকভাবে বেড়ে চলেছে। যাইহোক, আমরা CSS থেকে যে সাম্প্রতিক আশ্চর্যজনক নতুন বৈশিষ্ট্যগুলি পাচ্ছি, এবং ভাষার জটিলতার অনুরূপ বৃদ্ধির সাথে তা রাখতে সক্ষম হয়নি। বিবর্তনের সাথে তাল মিলিয়ে চলার জন্য সিস্টেমটির একটি সম্পূর্ণ পুনঃডিজাইন প্রয়োজন এবং আমরা ঠিক তাই করেছি!

কিভাবে CSS সম্পত্তি মান প্রক্রিয়া করা হয়

DevTools-এ, স্টাইল ট্যাবে সম্পত্তি ঘোষণা রেন্ডারিং এবং সাজানোর প্রক্রিয়া দুটি স্বতন্ত্র পর্যায়ে বিভক্ত:

1. কাঠামোগত বিশ্লেষণ। এই প্রাথমিক পর্যায় সম্পত্তির ঘোষণাকে এর অন্তর্নিহিত উপাদান এবং তাদের সম্পর্ক সনাক্ত করতে বিচ্ছিন্ন করে। উদাহরণস্বরূপ, ঘোষণার border: 1px solid red , এটি 1px কে দৈর্ঘ্য, একটি স্ট্রিং হিসাবে solid এবং একটি রঙ হিসাবে red চিনবে।
2. রেন্ডারিং। কাঠামোগত বিশ্লেষণের উপর ভিত্তি করে, রেন্ডারিং ফেজ এই উপাদানগুলিকে একটি HTML উপস্থাপনায় রূপান্তরিত করে। এটি ইন্টারেক্টিভ উপাদান এবং ভিজ্যুয়াল সংকেত সহ প্রদর্শিত সম্পত্তি পাঠ্যকে সমৃদ্ধ করে। উদাহরণস্বরূপ, রঙের মান red একটি ক্লিকযোগ্য রঙ আইকনের সাথে রেন্ডার করা হয় যা ক্লিক করা হলে, সহজে পরিবর্তনের জন্য একটি রঙ চয়নকারী প্রকাশ করে।

নিয়মিত অভিব্যক্তি

পূর্বে, আমরা কাঠামোগত বিশ্লেষণের জন্য সম্পত্তির মানগুলিকে ব্যবচ্ছেদ করতে নিয়মিত এক্সপ্রেশনের (রেজেক্স) উপর নির্ভর করতাম। আমরা প্রপার্টি মানের বিটগুলির সাথে মেলানোর জন্য রেজেক্সের একটি তালিকা বজায় রেখেছি যেগুলিকে আমরা সাজানোর জন্য বিবেচনা করেছি৷ উদাহরণস্বরূপ, এমন অভিব্যক্তি ছিল যা CSS রঙ, দৈর্ঘ্য, কোণ, আরও জটিল সাব-অভিব্যক্তি যেমন var ফাংশন কল ইত্যাদির সাথে মিলে যায়। আমরা মান বিশ্লেষণ করতে পাঠ্যটিকে বাম থেকে ডানে স্ক্যান করেছি, ধারাবাহিকভাবে তালিকা থেকে প্রথম অভিব্যক্তিটি খুঁজছি যা পাঠ্যের পরবর্তী অংশের সাথে মেলে।

যদিও এটি বেশিরভাগ সময় ঠিকঠাক কাজ করে, তবে মামলার সংখ্যা যেখানে এটি বৃদ্ধি পায়নি। বছরের পর বছর ধরে আমরা প্রচুর সংখ্যক বাগ রিপোর্ট পেয়েছি যেখানে মিলটি পুরোপুরি ঠিক হয়নি। যেমন আমরা সেগুলি ঠিক করেছি - কিছু সংশোধন করা সহজ, অন্যগুলি বেশ বিস্তৃত - আমাদের প্রযুক্তিগত ঋণকে উপশম রাখতে আমাদের পদ্ধতির পুনর্বিবেচনা করতে হয়েছিল। চলুন দেখে নেওয়া যাক কিছু বিষয়!

মিলিত color-mix()

color-mix() ফাংশনের জন্য আমরা যে রেজেক্স ব্যবহার করেছি তা নিম্নোক্ত ছিল :

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

যা এর সিনট্যাক্সের সাথে মেলে:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

মিলগুলি কল্পনা করতে নিম্নলিখিত উদাহরণটি চালানোর চেষ্টা করুন।

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

সহজ উদাহরণ সূক্ষ্ম কাজ করে। যাইহোক, আরও জটিল উদাহরণে, <firstColor> ম্যাচটি হল hsl(177deg var(--saturation এবং <secondColor> ম্যাচ হল 100%) 50%)) , যা সম্পূর্ণ অর্থহীন।

আমরা জানতাম এটি একটি সমস্যা। সর্বোপরি, একটি আনুষ্ঠানিক ভাষা হিসাবে CSS নিয়মিত নয়, তাই আমরা ইতিমধ্যেই var ফাংশনের মতো আরও জটিল ফাংশন আর্গুমেন্ট মোকাবেলা করার জন্য বিশেষ হ্যান্ডলিং অন্তর্ভুক্ত করেছি। যাইহোক, আপনি প্রথম স্ক্রিনশটে দেখতে পাচ্ছেন, এটি এখনও সব ক্ষেত্রে কাজ করেনি।

ম্যাচিং tan()

ত্রিকোণমিতিক tan() ফাংশন সম্পর্কে আরও হাস্যকর রিপোর্ট করা বাগগুলির মধ্যে একটি। আমরা রং মেলানোর জন্য যে রেজেক্স ব্যবহার করছিলাম তাতে একটি সাব-এক্সপ্রেশন রয়েছে \b[a-zA-Z]+\b(?!-) নামের রঙগুলি যেমন red কীওয়ার্ডের সাথে মিলে যাওয়ার জন্য। তারপরে আমরা পরীক্ষা করে দেখেছি যে মিলিত অংশটি আসলে একটি নামযুক্ত রঙ, এবং অনুমান করুন যে, tan একটি নামযুক্ত রঙ! তাই, আমরা ভুলভাবে tan() এক্সপ্রেশনকে রং হিসেবে ব্যাখ্যা করেছি।

ম্যাচিং var()

অন্য একটি উদাহরণের দিকে নজর দেওয়া যাক, var() ফাংশন একটি ফলব্যাক সহ অন্যান্য var() রেফারেন্স রয়েছে: var(--non-existent, var(--margin-vertical)) ।

var() এর জন্য আমাদের রেজেক্স আনন্দের সাথে এই মানটির সাথে মেলে। ব্যতীত, এটি প্রথম বন্ধনী বন্ধনীতে মেলানো বন্ধ করবে। সুতরাং উপরের পাঠ্যটি var(--non-existent, var(--margin-vertical) হিসাবে মিলেছে। এটি নিয়মিত এক্সপ্রেশন ম্যাচিংয়ের একটি পাঠ্যপুস্তকের সীমাবদ্ধতা। যে ভাষাগুলির মিল বন্ধনীর প্রয়োজন সেগুলি মৌলিকভাবে নিয়মিত নয়।

একটি CSS পার্সারে রূপান্তর

যখন রেগুলার এক্সপ্রেশন ব্যবহার করে টেক্সট অ্যানালাইসিস কাজ করা বন্ধ করে দেয় (কারণ বিশ্লেষিত ভাষা নিয়মিত নয়) তখন একটি ক্যানোনিকাল পরবর্তী ধাপ রয়েছে: একটি উচ্চ-প্রকার ব্যাকরণের জন্য একটি পার্সার ব্যবহার করুন। CSS-এর জন্য, এর মানে হল প্রসঙ্গ-মুক্ত ভাষার জন্য একটি পার্সার। প্রকৃতপক্ষে, এই ধরনের একটি পার্সার সিস্টেম ইতিমধ্যেই DevTools কোডবেসে বিদ্যমান ছিল: CodeMirror's Lezer , যেটির ভিত্তি, উদাহরণস্বরূপ, CodeMirror-এ সিনট্যাক্স হাইলাইটিং, আপনি উৎস প্যানেলে যে সম্পাদকটি খুঁজে পান। Lezer এর CSS পার্সার আমাদের CSS নিয়মের জন্য (অ-বিমূর্ত) সিনট্যাক্স ট্রি তৈরি করতে দেয় এবং আমাদের ব্যবহারের জন্য প্রস্তুত ছিল। বিজয়।

বাক্সের বাইরে, আমরা regex-ভিত্তিক ম্যাচিং থেকে সরাসরি পার্সার-ভিত্তিক ম্যাচিং-এ স্থানান্তর করা অসম্ভব বলে মনে করেছি: দুটি পন্থা বিপরীত দিক থেকে কাজ করে। রেগুলার এক্সপ্রেশনের সাথে মানের টুকরো মেলানোর সময়, DevTools ইনপুটটি বাম থেকে ডানে স্ক্যান করবে, বারবার প্যাটার্নের অর্ডার করা তালিকা থেকে প্রথম দিকের মিল খুঁজে বের করার চেষ্টা করবে। একটি সিনট্যাক্স ট্রি দিয়ে, ম্যাচিং নিচ থেকে শুরু হবে, উদাহরণস্বরূপ, ফাংশন কল মেলানোর চেষ্টা করার আগে প্রথমে একটি কলের আর্গুমেন্ট বিশ্লেষণ করা। এটিকে একটি গাণিতিক অভিব্যক্তির মূল্যায়ন হিসাবে ভাবুন, যেখানে আপনি প্রথমে বন্ধনীযুক্ত অভিব্যক্তি, তারপর গুণক অপারেটর, তারপর সংযোজন অপারেটর বিবেচনা করবেন। এই ফ্রেমিংয়ে, রেজেক্স-ভিত্তিক মিল বাম থেকে ডানে গাণিতিক অভিব্যক্তির মূল্যায়নের সাথে মিলে যায়। আমরা সত্যিই পুরো ম্যাচিং সিস্টেমটি স্ক্র্যাচ থেকে পুনরায় লিখতে চাইনি: সেখানে 15টি ভিন্ন ম্যাচার এবং রেন্ডারার জোড়া ছিল, তাদের কাছে হাজার হাজার লাইন কোড ছিল, যার ফলে আমরা এটিকে একটি মাইলফলকে পাঠাতে পারি এমন সম্ভাবনা কম।

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

পর্যায় 1: বটম-আপ ম্যাচিং

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

উপরে থেকে সিনট্যাক্স ট্রি উদাহরণ বিবেচনা করুন:

এই গাছের জন্য, আমাদের মিলাররা নিম্নলিখিত ক্রমে আবেদন করবে:

1. hsl( 177deg var(--saturation, 100%) 50%) : প্রথমে, আমরা hsl ফাংশন কলের প্রথম আর্গুমেন্ট, হিউ অ্যাঙ্গেল আবিষ্কার করি। আমরা এটি একটি কোণ ম্যাচারের সাথে মেলে, যাতে আমরা কোণ আইকনের সাথে কোণের মানটি সাজাতে পারি।
2. hsl(177deg var(--saturation, 100%) 50%) : দ্বিতীয়ত, আমরা একটি var ম্যাচার সহ var ফাংশন কল আবিষ্কার করি। এই ধরনের কলগুলির জন্য আমরা প্রধানত দুটি জিনিস করতে চাই:
   • ভেরিয়েবলের ঘোষণাটি দেখুন এবং এর মান গণনা করুন এবং যথাক্রমে তাদের সাথে সংযোগ করতে ভেরিয়েবলের নামের সাথে একটি লিঙ্ক এবং একটি পপওভার যোগ করুন।
   • গণনা করা মান একটি রঙ হলে একটি রঙ আইকন দিয়ে কল সাজাইয়া. আসলে একটি তৃতীয় জিনিস আছে, কিন্তু আমরা পরে যে সম্পর্কে কথা হবে.
3. hsl(177deg var(--saturation, 100%) 50%) : সবশেষে, আমরা hsl ফাংশনের জন্য কল এক্সপ্রেশনের সাথে ম্যাচ করি, যাতে আমরা এটিকে রঙের আইকন দিয়ে সাজাতে পারি।

আমরা সাজাতে চাই সাব-অভিব্যক্তিগুলির জন্য অনুসন্ধান করার পাশাপাশি, আসলে একটি দ্বিতীয় বৈশিষ্ট্য রয়েছে যা আমরা ম্যাচিং প্রক্রিয়ার অংশ হিসাবে চালাচ্ছি। নোট করুন যে ধাপ # 2 এ আমরা বলেছি যে আমরা একটি পরিবর্তনশীল নামের জন্য গণনা করা মানটি সন্ধান করি। প্রকৃতপক্ষে, আমরা এটিকে এক ধাপ এগিয়ে নিয়ে যাই এবং ফলাফলগুলিকে গাছের উপরে প্রচার করি। এবং শুধুমাত্র ভেরিয়েবলের জন্য নয়, ফলব্যাক মানের জন্যও! এটি নিশ্চিত যে একটি var ফাংশন নোড দেখার সময়, এর বাচ্চাদের আগে থেকেই পরিদর্শন করা হয়েছে, তাই আমরা ইতিমধ্যেই যে কোনও var ফাংশনের ফলাফল জানি যা ফলব্যাক মানতে প্রদর্শিত হতে পারে। তাই আমরা সহজে এবং সস্তায় var ফাংশনগুলিকে তাদের ফলাফলগুলি দিয়ে প্রতিস্থাপন করতে সক্ষম হয়েছি, যা আমাদেরকে তুচ্ছভাবে প্রশ্নের উত্তর দিতে দেয় যেমন "এই var এর ফলাফলকে কি রঙ বলা হয়?", যেমনটি আমরা ধাপ #2 এ করেছি৷

পর্যায় 2: টপ-ডাউন রেন্ডারিং

দ্বিতীয় পর্বের জন্য, আমরা বিপরীত দিক। ফেজ 1 থেকে ম্যাচের ফলাফল নিয়ে, আমরা গাছটিকে উপরে থেকে নীচের ক্রমানুসারে HTML-এ রেন্ডার করি। প্রতিটি পরিদর্শন করা নোডের জন্য, আমরা এটি মেলে কিনা তা পরীক্ষা করি এবং যদি তাই হয়, ম্যাচারের সংশ্লিষ্ট রেন্ডারারকে কল করুন। টেক্সট নোডের জন্য ডিফল্ট ম্যাচার এবং রেন্ডারার অন্তর্ভুক্ত করে আমরা নোডগুলির জন্য বিশেষ হ্যান্ডলিং এর প্রয়োজনীয়তা এড়াই যেগুলিতে কেবল পাঠ্য রয়েছে (যেমন NumberLiteral "50%")। রেন্ডারাররা সহজভাবে এইচটিএমএল নোডগুলিকে আউটপুট করে, যেগুলিকে একত্র করা হলে, এটির সজ্জা সহ সম্পত্তির মূল্যের উপস্থাপনা তৈরি করে।

উদাহরণ গাছের জন্য, এখানে সম্পত্তির মান রেন্ডার করা হয়েছে এমন ক্রম:

1. hsl ফাংশন কলে যান। এটি মিলেছে, তাই রঙ ফাংশন রেন্ডারারকে কল করুন। এটি দুটি জিনিস করে:
   • যেকোনো var আর্গুমেন্টের জন্য অন-দ্য-ফ্লাই প্রতিস্থাপন প্রক্রিয়া ব্যবহার করে প্রকৃত রঙের মান গণনা করে, তারপর একটি রঙ আইকন আঁকে।
   • CallExpression এর বাচ্চাদের বারবার রেন্ডার করে। এটি স্বয়ংক্রিয়ভাবে ফাংশনের নাম, বন্ধনী এবং কমা রেন্ডার করার যত্ন নেয়, যা শুধুমাত্র পাঠ্য।
2. hsl কলের প্রথম আর্গুমেন্ট দেখুন। এটি মিলেছে, তাই কোণ রেন্ডারারকে কল করুন, যা কোণ আইকন এবং কোণের পাঠ্য আঁকে৷
3. দ্বিতীয় আর্গুমেন্ট দেখুন, যা var কল। এটি মিলেছে, তাই var রেন্ডারারকে কল করুন, যা নিম্নলিখিতগুলি আউটপুট করে:
   • পাঠ্য var( শুরুতে।
   • ভেরিয়েবলের নাম এবং এটিকে ভেরিয়েবলের সংজ্ঞার লিঙ্ক দিয়ে বা একটি ধূসর টেক্সট রঙ দিয়ে সাজায় যাতে বোঝানো যায় যে এটি অনির্ধারিত ছিল এটি ভেরিয়েবলের মান সম্পর্কে তথ্য দেখানোর জন্য একটি পপওভার যোগ করে।
   • কমা এবং তারপর পুনরাবৃত্তিমূলকভাবে ফলব্যাক মান রেন্ডার করে।
   • একটি বন্ধ বন্ধনী.
4. hsl কলের শেষ আর্গুমেন্ট দেখুন। এটি মেলেনি, তাই শুধু এর পাঠ্য বিষয়বস্তু আউটপুট করুন।

আপনি কি লক্ষ্য করেছেন যে এই অ্যালগরিদমে, একটি রেন্ডার সম্পূর্ণরূপে নিয়ন্ত্রণ করে কিভাবে একটি মিলে যাওয়া নোডের বাচ্চাদের রেন্ডার করা হয়? শিশুদের পুনরাবৃত্তিমূলকভাবে রেন্ডার করা সক্রিয়। এই কৌশলটিই রেজেক্স-ভিত্তিক রেন্ডারিং থেকে সিনট্যাক্স ট্রি-ভিত্তিক রেন্ডারিং-এ ধাপ-ভিত্তিক মাইগ্রেশন সক্ষম করেছে। একটি লিগ্যাসি রেজেক্স-ম্যাচারের সাথে মিলে যাওয়া নোডগুলির জন্য, সংশ্লিষ্ট রেন্ডারার তার আসল আকারে ব্যবহার করা যেতে পারে। সিনট্যাক্স ট্রি পদে, এটি সমগ্র সাবট্রি রেন্ডার করার দায়িত্ব নেবে এবং এর ফলাফল (একটি এইচটিএমএল নোড) পার্শ্ববর্তী রেন্ডারিং প্রক্রিয়ায় পরিষ্কারভাবে প্লাগ করা যেতে পারে। এটি আমাদেরকে জোড়ায় জোড়ায় ম্যাচার এবং রেন্ডারারদের পোর্ট করার বিকল্প দিয়েছে এবং তাদের একে একে অদলবদল করে দিয়েছে।

রেন্ডারারদের আরেকটি দুর্দান্ত বৈশিষ্ট্য যা তাদের মিলিত নোডের বাচ্চাদের রেন্ডারিং নিয়ন্ত্রণ করে তা হল এটি আমাদের যোগ করা আইকনগুলির মধ্যে নির্ভরতা সম্পর্কে যুক্তি দেওয়ার ক্ষমতা দেয়। উপরের উদাহরণে, hsl ফাংশন দ্বারা উত্পাদিত রঙ স্পষ্টতই তার রঙের মানের উপর নির্ভর করে। মানে কালার আইকন দ্বারা দেখানো রঙটি কোণ আইকন দ্বারা দেখানো কোণের উপর নির্ভর করে। যদি ব্যবহারকারী সেই আইকনের মাধ্যমে কোণ সম্পাদকটি খোলে এবং কোণটি সংশোধন করে, আমরা এখন রিয়েল টাইমে রঙ আইকনের রঙ আপডেট করতে সক্ষম হব:

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমরা অন্যান্য আইকন পেয়ারিংয়ের জন্যও এই প্রক্রিয়াটি ব্যবহার করি, যেমন color-mix() এবং এর দুটি রঙের চ্যানেলের জন্য, বা var ফাংশন যা এর ফলব্যাক থেকে একটি রঙ ফেরত দেয়।

কর্মক্ষমতা প্রভাব

নির্ভরযোগ্যতা উন্নত করার জন্য এবং দীর্ঘস্থায়ী সমস্যাগুলির সমাধানের জন্য এই সমস্যাটির মধ্যে ডুব দেওয়ার সময়, আমরা একটি সম্পূর্ণ পার্সার চালানো শুরু করার বিষয়টি বিবেচনা করে কিছু কর্মক্ষমতা রিগ্রেশন আশা করছিলাম। এটি পরীক্ষা করার জন্য, আমরা একটি বেঞ্চমার্ক তৈরি করেছি যা প্রায় 3.5k সম্পত্তির ঘোষণা দেয় এবং একটি M1 মেশিনে 6x থ্রোটলিং সহ regex-ভিত্তিক এবং পার্সার-ভিত্তিক উভয় সংস্করণই প্রোফাইল করে।

আমরা যেমন আশা করেছিলাম, পার্সিং-ভিত্তিক পদ্ধতি সেই ক্ষেত্রে রেজেক্স-ভিত্তিক পদ্ধতির চেয়ে 27% ধীর হয়ে গেছে। রেজেক্স-ভিত্তিক পদ্ধতিটি রেন্ডার করতে 11 সেকেন্ড সময় নেয় এবং পার্সার-ভিত্তিক পদ্ধতিটি রেন্ডার করতে 15 সেকেন্ড সময় নেয়।

নতুন পদ্ধতি থেকে আমরা যে জয় পেয়েছি তা বিবেচনা করে আমরা এটি নিয়ে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

স্বীকৃতি

আমাদের গভীর কৃতজ্ঞতা সোফিয়া ইমেলিয়ানোভা এবং জেসেলিন ইয়েনের কাছে তাদের অমূল্য সাহায্যের জন্য এই পোস্টটি সম্পাদনা করার জন্য!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

Philip Pfaffe

Ergün Erdogmus

আপনি কি Chrome DevTools এর শৈলী ট্যাবে CSS বৈশিষ্ট্যগুলি ইদানীং একটু বেশি মসৃণ দেখাচ্ছে? এই আপডেটগুলি, Chrome 121 এবং 128-এর মধ্যে রোল আউট করা হয়েছে, আমরা কীভাবে CSS মানগুলিকে পার্স এবং উপস্থাপন করি তার একটি উল্লেখযোগ্য উন্নতির ফলাফল৷ এই নিবন্ধে, আমরা আপনাকে এই রূপান্তরের প্রযুক্তিগত বিশদটি নিয়ে চলে যাব—একটি রেগুলার এক্সপ্রেশন ম্যাচিং সিস্টেম থেকে আরও শক্তিশালী পার্সারে চলে যাওয়া।

আগের সংস্করণের সাথে বর্তমান DevTools তুলনা করা যাক:

বেশ পার্থক্য, তাই না? এখানে মূল উন্নতিগুলির একটি ব্রেক ডাউন রয়েছে:

• color-mix color-mix ফাংশনের মধ্যে দুটি রঙের আর্গুমেন্টকে দৃশ্যত প্রতিনিধিত্ব করে একটি সহজ প্রিভিউ।
• pink নামযুক্ত রঙের pink জন্য একটি ক্লিকযোগ্য রঙের পূর্বরূপ । সহজ সমন্বয়ের জন্য একটি রঙ পিকার খুলতে এটিতে ক্লিক করুন।
• var(--undefined, [fallback value]) । অনির্ধারিত ভেরিয়েবলের উন্নত হ্যান্ডলিং, অনির্ধারিত ভেরিয়েবল ধূসর হয়ে গেছে এবং সক্রিয় ফলব্যাক মান (এই ক্ষেত্রে, একটি HSL রঙ) একটি ক্লিকযোগ্য রঙের পূর্বরূপের সাথে প্রদর্শিত হয়।
• hsl(…) : hsl কালার ফাংশনের জন্য আরেকটি ক্লিকযোগ্য রঙের প্রিভিউ, কালার পিকারে দ্রুত অ্যাক্সেস প্রদান করে।
• 177deg : একটি ক্লিকযোগ্য কোণ ঘড়ি যা আপনাকে ইন্টারেক্টিভভাবে টেনে আনতে এবং কোণের মান পরিবর্তন করতে দেয়।
• var(--saturation, …) : কাস্টম সম্পত্তি সংজ্ঞার একটি ক্লিকযোগ্য লিঙ্ক , এটি প্রাসঙ্গিক ঘোষণায় যেতে সহজ করে তোলে।

পার্থক্য আকর্ষণীয়. এটি অর্জন করার জন্য, আমাদেরকে DevTools কে CSS প্রপার্টির মানগুলি আগের তুলনায় অনেক ভালভাবে বুঝতে শেখাতে হয়েছিল।

এই পূর্বরূপ ইতিমধ্যে উপলব্ধ ছিল না?

যদিও এই প্রিভিউ আইকনগুলি পরিচিত মনে হতে পারে, সেগুলি সবসময় ধারাবাহিকভাবে প্রদর্শিত হয় না, বিশেষ করে উপরের উদাহরণের মতো জটিল CSS সিনট্যাক্সে। এমনকি যে ক্ষেত্রে তারা কাজ করেছিল, সেগুলিকে সঠিকভাবে কাজ করার জন্য প্রায়শই উল্লেখযোগ্য প্রচেষ্টার প্রয়োজন হয়।

এর কারণ হল যে মান বিশ্লেষণের সিস্টেমটি DevTools-এর প্রথম দিন থেকে অর্গানিকভাবে বেড়ে চলেছে। যাইহোক, আমরা CSS থেকে যে সাম্প্রতিক আশ্চর্যজনক নতুন বৈশিষ্ট্যগুলি পাচ্ছি, এবং ভাষার জটিলতার অনুরূপ বৃদ্ধির সাথে তা রাখতে সক্ষম হয়নি। বিবর্তনের সাথে তাল মিলিয়ে চলার জন্য সিস্টেমটির একটি সম্পূর্ণ পুনঃডিজাইন প্রয়োজন এবং আমরা ঠিক তাই করেছি!

কিভাবে CSS সম্পত্তি মান প্রক্রিয়া করা হয়

DevTools-এ, স্টাইল ট্যাবে সম্পত্তি ঘোষণা রেন্ডারিং এবং সাজানোর প্রক্রিয়া দুটি স্বতন্ত্র পর্যায়ে বিভক্ত:

1. কাঠামোগত বিশ্লেষণ। এই প্রাথমিক পর্যায় সম্পত্তির ঘোষণাকে এর অন্তর্নিহিত উপাদান এবং তাদের সম্পর্ক সনাক্ত করতে বিচ্ছিন্ন করে। উদাহরণস্বরূপ, ঘোষণার border: 1px solid red , এটি 1px কে দৈর্ঘ্য, একটি স্ট্রিং হিসাবে solid এবং একটি রঙ হিসাবে red চিনবে।
2. রেন্ডারিং। কাঠামোগত বিশ্লেষণের উপর ভিত্তি করে, রেন্ডারিং ফেজ এই উপাদানগুলিকে একটি HTML উপস্থাপনায় রূপান্তরিত করে। এটি ইন্টারেক্টিভ উপাদান এবং ভিজ্যুয়াল সংকেত সহ প্রদর্শিত সম্পত্তি পাঠ্যকে সমৃদ্ধ করে। উদাহরণস্বরূপ, রঙের মান red একটি ক্লিকযোগ্য রঙ আইকনের সাথে রেন্ডার করা হয় যা ক্লিক করা হলে, সহজে পরিবর্তনের জন্য একটি রঙ চয়নকারী প্রকাশ করে।

নিয়মিত অভিব্যক্তি

পূর্বে, আমরা কাঠামোগত বিশ্লেষণের জন্য সম্পত্তির মানগুলিকে ব্যবচ্ছেদ করতে নিয়মিত এক্সপ্রেশনের (রেজেক্স) উপর নির্ভর করতাম। আমরা প্রপার্টি মানের বিটগুলির সাথে মেলানোর জন্য রেজেক্সের একটি তালিকা বজায় রেখেছি যেগুলিকে আমরা সাজানোর জন্য বিবেচনা করেছি৷ উদাহরণস্বরূপ, এমন অভিব্যক্তি ছিল যা CSS রঙ, দৈর্ঘ্য, কোণ, আরও জটিল সাব-অভিব্যক্তি যেমন var ফাংশন কল ইত্যাদির সাথে মিলে যায়। আমরা মান বিশ্লেষণ করতে পাঠ্যটিকে বাম থেকে ডানে স্ক্যান করেছি, ধারাবাহিকভাবে তালিকা থেকে প্রথম অভিব্যক্তিটি খুঁজছি যা পাঠ্যের পরবর্তী অংশের সাথে মেলে।

যদিও এটি বেশিরভাগ সময় ঠিকঠাক কাজ করে, তবে মামলার সংখ্যা যেখানে এটি বৃদ্ধি পায়নি। বছরের পর বছর ধরে আমরা প্রচুর সংখ্যক বাগ রিপোর্ট পেয়েছি যেখানে মিলটি পুরোপুরি ঠিক হয়নি। যেমন আমরা সেগুলি ঠিক করেছি - কিছু সংশোধন করা সহজ, অন্যগুলি বেশ বিস্তৃত - আমাদের প্রযুক্তিগত ঋণকে উপশম রাখতে আমাদের পদ্ধতির পুনর্বিবেচনা করতে হয়েছিল। চলুন দেখে নেওয়া যাক কিছু বিষয়!

মিলিত color-mix()

color-mix() ফাংশনের জন্য আমরা যে রেজেক্স ব্যবহার করেছি তা নিম্নোক্ত ছিল :

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

যা এর সিনট্যাক্সের সাথে মেলে:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

মিলগুলি কল্পনা করতে নিম্নলিখিত উদাহরণটি চালানোর চেষ্টা করুন।

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

সহজ উদাহরণ সূক্ষ্ম কাজ করে। যাইহোক, আরও জটিল উদাহরণে, <firstColor> ম্যাচটি হল hsl(177deg var(--saturation এবং <secondColor> ম্যাচ হল 100%) 50%)) , যা সম্পূর্ণ অর্থহীন।

আমরা জানতাম এটি একটি সমস্যা। সর্বোপরি, একটি আনুষ্ঠানিক ভাষা হিসাবে CSS নিয়মিত নয়, তাই আমরা ইতিমধ্যেই var ফাংশনের মতো আরও জটিল ফাংশন আর্গুমেন্ট মোকাবেলা করার জন্য বিশেষ হ্যান্ডলিং অন্তর্ভুক্ত করেছি। যাইহোক, আপনি প্রথম স্ক্রিনশটে দেখতে পাচ্ছেন, এটি এখনও সব ক্ষেত্রে কাজ করেনি।

ম্যাচিং tan()

ত্রিকোণমিতিক tan() ফাংশন সম্পর্কে আরও হাস্যকর রিপোর্ট করা বাগগুলির মধ্যে একটি। আমরা রং মেলানোর জন্য যে রেজেক্স ব্যবহার করছিলাম তাতে একটি সাব-এক্সপ্রেশন রয়েছে \b[a-zA-Z]+\b(?!-) নামের রঙগুলি যেমন red কীওয়ার্ডের সাথে মিলে যাওয়ার জন্য। তারপরে আমরা পরীক্ষা করে দেখেছি যে মিলিত অংশটি আসলে একটি নামযুক্ত রঙ, এবং অনুমান করুন যে, tan একটি নামযুক্ত রঙ! তাই, আমরা ভুলভাবে tan() এক্সপ্রেশনকে রং হিসেবে ব্যাখ্যা করেছি।

ম্যাচিং var()

অন্য একটি উদাহরণের দিকে নজর দেওয়া যাক, var() ফাংশন একটি ফলব্যাক সহ অন্যান্য var() রেফারেন্স রয়েছে: var(--non-existent, var(--margin-vertical)) ।

var() এর জন্য আমাদের রেজেক্স আনন্দের সাথে এই মানটির সাথে মেলে। ব্যতীত, এটি প্রথম বন্ধনী বন্ধনীতে মেলানো বন্ধ করবে। সুতরাং উপরের পাঠ্যটি var(--non-existent, var(--margin-vertical) হিসাবে মিলেছে। এটি নিয়মিত এক্সপ্রেশন ম্যাচিংয়ের একটি পাঠ্যপুস্তকের সীমাবদ্ধতা। যে ভাষাগুলির মিল বন্ধনীর প্রয়োজন সেগুলি মৌলিকভাবে নিয়মিত নয়।

একটি CSS পার্সারে রূপান্তর

যখন রেগুলার এক্সপ্রেশন ব্যবহার করে টেক্সট অ্যানালাইসিস কাজ করা বন্ধ করে দেয় (কারণ বিশ্লেষিত ভাষা নিয়মিত নয়) তখন একটি ক্যানোনিকাল পরবর্তী ধাপ রয়েছে: একটি উচ্চ-প্রকার ব্যাকরণের জন্য একটি পার্সার ব্যবহার করুন। CSS-এর জন্য, এর মানে হল প্রসঙ্গ-মুক্ত ভাষার জন্য একটি পার্সার। প্রকৃতপক্ষে, এই ধরনের একটি পার্সার সিস্টেম ইতিমধ্যেই DevTools কোডবেসে বিদ্যমান ছিল: CodeMirror's Lezer , যেটির ভিত্তি, উদাহরণস্বরূপ, CodeMirror-এ সিনট্যাক্স হাইলাইটিং, আপনি উৎস প্যানেলে যে সম্পাদকটি খুঁজে পান। Lezer এর CSS পার্সার আমাদের CSS নিয়মের জন্য (অ-বিমূর্ত) সিনট্যাক্স ট্রি তৈরি করতে দেয় এবং আমাদের ব্যবহারের জন্য প্রস্তুত ছিল। বিজয়।

বাক্সের বাইরে, আমরা regex-ভিত্তিক ম্যাচিং থেকে সরাসরি পার্সার-ভিত্তিক ম্যাচিং-এ স্থানান্তর করা অসম্ভব বলে মনে করেছি: দুটি পন্থা বিপরীত দিক থেকে কাজ করে। রেগুলার এক্সপ্রেশনের সাথে মানের টুকরো মেলানোর সময়, DevTools ইনপুটটি বাম থেকে ডানে স্ক্যান করবে, বারবার প্যাটার্নের অর্ডার করা তালিকা থেকে প্রথম দিকের মিল খুঁজে বের করার চেষ্টা করবে। একটি সিনট্যাক্স ট্রি দিয়ে, ম্যাচিং নিচ থেকে শুরু হবে, উদাহরণস্বরূপ, ফাংশন কল মেলানোর চেষ্টা করার আগে প্রথমে একটি কলের আর্গুমেন্ট বিশ্লেষণ করা। এটিকে একটি গাণিতিক অভিব্যক্তির মূল্যায়ন হিসাবে ভাবুন, যেখানে আপনি প্রথমে বন্ধনীযুক্ত অভিব্যক্তি, তারপর গুণক অপারেটর, তারপর সংযোজন অপারেটর বিবেচনা করবেন। এই ফ্রেমিংয়ে, রেজেক্স-ভিত্তিক মিল বাম থেকে ডানে গাণিতিক অভিব্যক্তির মূল্যায়নের সাথে মিলে যায়। আমরা সত্যিই পুরো ম্যাচিং সিস্টেমটি স্ক্র্যাচ থেকে পুনরায় লিখতে চাইনি: সেখানে 15টি ভিন্ন ম্যাচার এবং রেন্ডারার জোড়া ছিল, তাদের কাছে হাজার হাজার লাইন কোড ছিল, যার ফলে আমরা এটিকে একটি মাইলফলকে পাঠাতে পারি এমন সম্ভাবনা কম।

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

পর্যায় 1: বটম-আপ ম্যাচিং

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

উপরে থেকে সিনট্যাক্স ট্রি উদাহরণ বিবেচনা করুন:

এই গাছের জন্য, আমাদের মিলাররা নিম্নলিখিত ক্রমে আবেদন করবে:

1. hsl( 177deg var(--saturation, 100%) 50%) : প্রথমে, আমরা hsl ফাংশন কলের প্রথম আর্গুমেন্ট, হিউ অ্যাঙ্গেল আবিষ্কার করি। আমরা এটি একটি কোণ ম্যাচারের সাথে মেলে, যাতে আমরা কোণ আইকনের সাথে কোণের মানটি সাজাতে পারি।
2. hsl(177deg var(--saturation, 100%) 50%) : দ্বিতীয়ত, আমরা একটি var ম্যাচার সহ var ফাংশন কল আবিষ্কার করি। এই ধরনের কলগুলির জন্য আমরা প্রধানত দুটি জিনিস করতে চাই:
   • ভেরিয়েবলের ঘোষণাটি দেখুন এবং এর মান গণনা করুন এবং যথাক্রমে তাদের সাথে সংযোগ করতে ভেরিয়েবলের নামের সাথে একটি লিঙ্ক এবং একটি পপওভার যোগ করুন।
   • গণনা করা মান একটি রঙ হলে একটি রঙ আইকন দিয়ে কল সাজাইয়া. আসলে একটি তৃতীয় জিনিস আছে, কিন্তু আমরা পরে যে সম্পর্কে কথা হবে.
3. hsl(177deg var(--saturation, 100%) 50%) : সবশেষে, আমরা hsl ফাংশনের জন্য কল এক্সপ্রেশনের সাথে ম্যাচ করি, যাতে আমরা এটিকে রঙের আইকন দিয়ে সাজাতে পারি।

আমরা সাজাতে চাই সাব-অভিব্যক্তিগুলির জন্য অনুসন্ধান করার পাশাপাশি, আসলে একটি দ্বিতীয় বৈশিষ্ট্য রয়েছে যা আমরা ম্যাচিং প্রক্রিয়ার অংশ হিসাবে চালাচ্ছি। নোট করুন যে ধাপ # 2 এ আমরা বলেছি যে আমরা একটি পরিবর্তনশীল নামের জন্য গণনা করা মানটি সন্ধান করি। প্রকৃতপক্ষে, আমরা এটিকে এক ধাপ এগিয়ে নিয়ে যাই এবং ফলাফলগুলিকে গাছের উপরে প্রচার করি। এবং শুধুমাত্র ভেরিয়েবলের জন্য নয়, ফলব্যাক মানের জন্যও! এটি নিশ্চিত যে একটি var ফাংশন নোড দেখার সময়, এর বাচ্চাদের আগে থেকেই পরিদর্শন করা হয়েছে, তাই আমরা ইতিমধ্যেই যে কোনও var ফাংশনের ফলাফল জানি যা ফলব্যাক মানতে প্রদর্শিত হতে পারে। তাই আমরা সহজে এবং সস্তায় var ফাংশনগুলিকে তাদের ফলাফলগুলি দিয়ে প্রতিস্থাপন করতে সক্ষম হয়েছি, যা আমাদেরকে তুচ্ছভাবে প্রশ্নের উত্তর দিতে দেয় যেমন "এই var এর ফলাফলকে কি রঙ বলা হয়?", যেমনটি আমরা ধাপ #2 এ করেছি৷

পর্যায় 2: টপ-ডাউন রেন্ডারিং

দ্বিতীয় পর্বের জন্য, আমরা বিপরীত দিক। ফেজ 1 থেকে ম্যাচের ফলাফল নিয়ে, আমরা গাছটিকে উপরে থেকে নীচের ক্রমানুসারে HTML-এ রেন্ডার করি। প্রতিটি পরিদর্শন করা নোডের জন্য, আমরা এটি মেলে কিনা তা পরীক্ষা করি এবং যদি তাই হয়, ম্যাচারের সংশ্লিষ্ট রেন্ডারারকে কল করুন। টেক্সট নোডের জন্য ডিফল্ট ম্যাচার এবং রেন্ডারার অন্তর্ভুক্ত করে আমরা নোডগুলির জন্য বিশেষ হ্যান্ডলিং এর প্রয়োজনীয়তা এড়াই যেগুলিতে কেবল পাঠ্য রয়েছে (যেমন NumberLiteral "50%")। রেন্ডারাররা সহজভাবে এইচটিএমএল নোডগুলিকে আউটপুট করে, যেগুলিকে একত্র করা হলে, এটির সজ্জা সহ সম্পত্তির মূল্যের উপস্থাপনা তৈরি করে।

উদাহরণ গাছের জন্য, এখানে সম্পত্তির মান রেন্ডার করা হয়েছে এমন ক্রম:

1. hsl ফাংশন কলে যান। এটি মিলেছে, তাই রঙ ফাংশন রেন্ডারারকে কল করুন। এটি দুটি জিনিস করে:
   • যেকোনো var আর্গুমেন্টের জন্য অন-দ্য-ফ্লাই প্রতিস্থাপন প্রক্রিয়া ব্যবহার করে প্রকৃত রঙের মান গণনা করে, তারপর একটি রঙ আইকন আঁকে।
   • CallExpression এর বাচ্চাদের বারবার রেন্ডার করে। এটি স্বয়ংক্রিয়ভাবে ফাংশনের নাম, বন্ধনী এবং কমা রেন্ডার করার যত্ন নেয়, যা শুধুমাত্র পাঠ্য।
2. hsl কলের প্রথম আর্গুমেন্ট দেখুন। এটি মিলেছে, তাই কোণ রেন্ডারারকে কল করুন, যা কোণ আইকন এবং কোণের পাঠ্য আঁকে৷
3. দ্বিতীয় আর্গুমেন্ট দেখুন, যা var কল। এটি মিলেছে, তাই var রেন্ডারারকে কল করুন, যা নিম্নলিখিতগুলি আউটপুট করে:
   • পাঠ্য var( শুরুতে।
   • ভেরিয়েবলের নাম এবং এটিকে ভেরিয়েবলের সংজ্ঞার লিঙ্ক দিয়ে বা একটি ধূসর টেক্সট রঙ দিয়ে সাজায় যাতে বোঝানো যায় যে এটি অনির্ধারিত ছিল এটি ভেরিয়েবলের মান সম্পর্কে তথ্য দেখানোর জন্য একটি পপওভার যোগ করে।
   • কমা এবং তারপর পুনরাবৃত্তিমূলকভাবে ফলব্যাক মান রেন্ডার করে।
   • একটি বন্ধ বন্ধনী.
4. hsl কলের শেষ আর্গুমেন্ট দেখুন। এটি মেলেনি, তাই শুধু এর পাঠ্য বিষয়বস্তু আউটপুট করুন।

আপনি কি লক্ষ্য করেছেন যে এই অ্যালগরিদমে, একটি রেন্ডার সম্পূর্ণরূপে নিয়ন্ত্রণ করে কিভাবে একটি মিলে যাওয়া নোডের বাচ্চাদের রেন্ডার করা হয়? শিশুদের পুনরাবৃত্তিমূলকভাবে রেন্ডার করা সক্রিয়। এই কৌশলটিই রেজেক্স-ভিত্তিক রেন্ডারিং থেকে সিনট্যাক্স ট্রি-ভিত্তিক রেন্ডারিং-এ ধাপ-ভিত্তিক মাইগ্রেশন সক্ষম করেছে। একটি লিগ্যাসি রেজেক্স-ম্যাচারের সাথে মিলে যাওয়া নোডগুলির জন্য, সংশ্লিষ্ট রেন্ডারার তার আসল আকারে ব্যবহার করা যেতে পারে। সিনট্যাক্স ট্রি পদে, এটি সমগ্র সাবট্রি রেন্ডার করার দায়িত্ব নেবে এবং এর ফলাফল (একটি এইচটিএমএল নোড) পার্শ্ববর্তী রেন্ডারিং প্রক্রিয়ায় পরিষ্কারভাবে প্লাগ করা যেতে পারে। এটি আমাদেরকে জোড়ায় জোড়ায় ম্যাচার এবং রেন্ডারারদের পোর্ট করার বিকল্প দিয়েছে এবং তাদের একে একে অদলবদল করে দিয়েছে।

রেন্ডারারদের আরেকটি দুর্দান্ত বৈশিষ্ট্য যা তাদের মিলিত নোডের বাচ্চাদের রেন্ডারিং নিয়ন্ত্রণ করে তা হল এটি আমাদের যোগ করা আইকনগুলির মধ্যে নির্ভরতা সম্পর্কে যুক্তি দেওয়ার ক্ষমতা দেয়। উপরের উদাহরণে, hsl ফাংশন দ্বারা উত্পাদিত রঙ স্পষ্টতই তার রঙের মানের উপর নির্ভর করে। মানে কালার আইকন দ্বারা দেখানো রঙটি কোণ আইকন দ্বারা দেখানো কোণের উপর নির্ভর করে। যদি ব্যবহারকারী সেই আইকনের মাধ্যমে কোণ সম্পাদকটি খোলে এবং কোণটি সংশোধন করে, আমরা এখন রিয়েল টাইমে রঙ আইকনের রঙ আপডেট করতে সক্ষম হব:

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমরা অন্যান্য আইকন পেয়ারিংয়ের জন্যও এই প্রক্রিয়াটি ব্যবহার করি, যেমন color-mix() এবং এর দুটি রঙের চ্যানেলের জন্য, বা var ফাংশন যা এর ফলব্যাক থেকে একটি রঙ ফেরত দেয়।

কর্মক্ষমতা প্রভাব

নির্ভরযোগ্যতা উন্নত করার জন্য এবং দীর্ঘস্থায়ী সমস্যাগুলির সমাধানের জন্য এই সমস্যাটির মধ্যে ডুব দেওয়ার সময়, আমরা একটি সম্পূর্ণ পার্সার চালানো শুরু করার বিষয়টি বিবেচনা করে কিছু কর্মক্ষমতা রিগ্রেশন আশা করছিলাম। এটি পরীক্ষা করার জন্য, আমরা একটি বেঞ্চমার্ক তৈরি করেছি যা প্রায় 3.5k সম্পত্তির ঘোষণা দেয় এবং একটি M1 মেশিনে 6x থ্রোটলিং সহ regex-ভিত্তিক এবং পার্সার-ভিত্তিক উভয় সংস্করণই প্রোফাইল করে।

আমরা যেমন আশা করেছিলাম, পার্সিং-ভিত্তিক পদ্ধতি সেই ক্ষেত্রে রেজেক্স-ভিত্তিক পদ্ধতির চেয়ে 27% ধীর হয়ে গেছে। রেজেক্স-ভিত্তিক পদ্ধতিটি রেন্ডার করতে 11 সেকেন্ড সময় নেয় এবং পার্সার-ভিত্তিক পদ্ধতিটি রেন্ডার করতে 15 সেকেন্ড সময় নেয়।

নতুন পদ্ধতি থেকে আমরা যে জয় পেয়েছি তা বিবেচনা করে আমরা এটি নিয়ে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

স্বীকৃতি

আমাদের গভীর কৃতজ্ঞতা সোফিয়া ইমেলিয়ানোভা এবং জেসেলিন ইয়েনের কাছে তাদের অমূল্য সাহায্যের জন্য এই পোস্টটি সম্পাদনা করার জন্য!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

Philip Pfaffe

Ergün Erdogmus

আপনি কি Chrome DevTools এর শৈলী ট্যাবে CSS বৈশিষ্ট্যগুলি ইদানীং একটু বেশি মসৃণ দেখাচ্ছে? এই আপডেটগুলি, Chrome 121 এবং 128-এর মধ্যে রোল আউট করা হয়েছে, আমরা কীভাবে CSS মানগুলিকে পার্স এবং উপস্থাপন করি তার একটি উল্লেখযোগ্য উন্নতির ফলাফল৷ এই নিবন্ধে, আমরা আপনাকে এই রূপান্তরের প্রযুক্তিগত বিশদটি নিয়ে চলে যাব—একটি রেগুলার এক্সপ্রেশন ম্যাচিং সিস্টেম থেকে আরও শক্তিশালী পার্সারে চলে যাওয়া।

আগের সংস্করণের সাথে বর্তমান DevTools তুলনা করা যাক:

বেশ পার্থক্য, তাই না? এখানে মূল উন্নতিগুলির একটি ব্রেক ডাউন রয়েছে:

• color-mix color-mix ফাংশনের মধ্যে দুটি রঙের আর্গুমেন্টকে দৃশ্যত প্রতিনিধিত্ব করে একটি সহজ প্রিভিউ।
• pink নামযুক্ত রঙের pink জন্য একটি ক্লিকযোগ্য রঙের পূর্বরূপ । সহজ সমন্বয়ের জন্য একটি রঙ পিকার খুলতে এটিতে ক্লিক করুন।
• var(--undefined, [fallback value]) । অনির্ধারিত ভেরিয়েবলের উন্নত হ্যান্ডলিং, অনির্ধারিত ভেরিয়েবল ধূসর হয়ে গেছে এবং সক্রিয় ফলব্যাক মান (এই ক্ষেত্রে, একটি HSL রঙ) একটি ক্লিকযোগ্য রঙের পূর্বরূপের সাথে প্রদর্শিত হয়।
• hsl(…) : hsl কালার ফাংশনের জন্য আরেকটি ক্লিকযোগ্য রঙের প্রিভিউ, কালার পিকারে দ্রুত অ্যাক্সেস প্রদান করে।
• 177deg : একটি ক্লিকযোগ্য কোণ ঘড়ি যা আপনাকে ইন্টারেক্টিভভাবে টেনে আনতে এবং কোণের মান পরিবর্তন করতে দেয়।
• var(--saturation, …) : কাস্টম সম্পত্তি সংজ্ঞার একটি ক্লিকযোগ্য লিঙ্ক , এটি প্রাসঙ্গিক ঘোষণায় যেতে সহজ করে তোলে।

পার্থক্য আকর্ষণীয়. এটি অর্জন করার জন্য, আমাদেরকে DevTools কে CSS প্রপার্টির মানগুলি আগের তুলনায় অনেক ভালভাবে বুঝতে শেখাতে হয়েছিল।

এই পূর্বরূপ ইতিমধ্যে উপলব্ধ ছিল না?

যদিও এই প্রিভিউ আইকনগুলি পরিচিত মনে হতে পারে, সেগুলি সবসময় ধারাবাহিকভাবে প্রদর্শিত হয় না, বিশেষ করে উপরের উদাহরণের মতো জটিল CSS সিনট্যাক্সে। এমনকি যে ক্ষেত্রে তারা কাজ করেছিল, সেগুলিকে সঠিকভাবে কাজ করার জন্য প্রায়শই উল্লেখযোগ্য প্রচেষ্টার প্রয়োজন হয়।

এর কারণ হল যে মান বিশ্লেষণের সিস্টেমটি DevTools-এর প্রথম দিন থেকে অর্গানিকভাবে বেড়ে চলেছে। যাইহোক, আমরা CSS থেকে যে সাম্প্রতিক আশ্চর্যজনক নতুন বৈশিষ্ট্যগুলি পাচ্ছি, এবং ভাষার জটিলতার অনুরূপ বৃদ্ধির সাথে তা রাখতে সক্ষম হয়নি। বিবর্তনের সাথে তাল মিলিয়ে চলার জন্য সিস্টেমটির একটি সম্পূর্ণ পুনঃডিজাইন প্রয়োজন এবং আমরা ঠিক তাই করেছি!

কিভাবে CSS সম্পত্তি মান প্রক্রিয়া করা হয়

DevTools-এ, স্টাইল ট্যাবে সম্পত্তি ঘোষণা রেন্ডারিং এবং সাজানোর প্রক্রিয়া দুটি স্বতন্ত্র পর্যায়ে বিভক্ত:

1. কাঠামোগত বিশ্লেষণ। এই প্রাথমিক পর্যায় সম্পত্তির ঘোষণাকে এর অন্তর্নিহিত উপাদান এবং তাদের সম্পর্ক সনাক্ত করতে বিচ্ছিন্ন করে। উদাহরণস্বরূপ, ঘোষণার border: 1px solid red , এটি 1px কে দৈর্ঘ্য, একটি স্ট্রিং হিসাবে solid এবং একটি রঙ হিসাবে red চিনবে।
2. রেন্ডারিং। কাঠামোগত বিশ্লেষণের উপর ভিত্তি করে, রেন্ডারিং ফেজ এই উপাদানগুলিকে একটি HTML উপস্থাপনায় রূপান্তরিত করে। এটি ইন্টারেক্টিভ উপাদান এবং ভিজ্যুয়াল সংকেত সহ প্রদর্শিত সম্পত্তি পাঠ্যকে সমৃদ্ধ করে। উদাহরণস্বরূপ, রঙের মান red একটি ক্লিকযোগ্য রঙ আইকনের সাথে রেন্ডার করা হয় যা ক্লিক করা হলে, সহজে পরিবর্তনের জন্য একটি রঙ চয়নকারী প্রকাশ করে।

নিয়মিত অভিব্যক্তি

পূর্বে, আমরা কাঠামোগত বিশ্লেষণের জন্য সম্পত্তির মানগুলিকে ব্যবচ্ছেদ করতে নিয়মিত এক্সপ্রেশনের (রেজেক্স) উপর নির্ভর করতাম। আমরা প্রপার্টি মানের বিটগুলির সাথে মেলানোর জন্য রেজেক্সের একটি তালিকা বজায় রেখেছি যেগুলিকে আমরা সাজানোর জন্য বিবেচনা করেছি৷ উদাহরণস্বরূপ, এমন অভিব্যক্তি ছিল যা CSS রঙ, দৈর্ঘ্য, কোণ, আরও জটিল সাব-অভিব্যক্তি যেমন var ফাংশন কল ইত্যাদির সাথে মিলে যায়। আমরা পাঠ্যটির পরবর্তী অংশের সাথে মেলে তালিকা থেকে প্রথম অভিব্যক্তিটি সন্ধান করে, মান বিশ্লেষণ করতে বাম থেকে ডানে পাঠ্যটি স্ক্যান করেছি।

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

color-mix()

color-mix() ফাংশনের জন্য আমরা যে রেজেক্সটি ব্যবহার করেছি তা নিম্নলিখিত ছিল :

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

যা এর সিনট্যাক্সের সাথে মেলে:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

ম্যাচগুলি ভিজ্যুয়ালাইজ করতে নিম্নলিখিত উদাহরণটি চালানোর চেষ্টা করুন।

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

সহজ উদাহরণ ভাল কাজ করে। যাইহোক, আরও জটিল উদাহরণে, <firstColor> ম্যাচটি হ'ল hsl(177deg var(--saturation এবং <secondColor> ম্যাচটি 100%) 50%)) , যা সম্পূর্ণ অর্থহীন।

আমরা জানতাম এটি একটি সমস্যা ছিল। সর্বোপরি, সিএসএস একটি আনুষ্ঠানিক ভাষা হিসাবে নিয়মিত নয়, তাই আমরা ইতিমধ্যে var ফাংশনগুলির মতো আরও জটিল ফাংশন যুক্তিগুলি মোকাবেলায় বিশেষ হ্যান্ডলিং অন্তর্ভুক্ত করেছি। তবে, আপনি প্রথম স্ক্রিনশটে যেমন দেখতে পাচ্ছেন, এটি এখনও সমস্ত ক্ষেত্রে কার্যকর হয়নি।

ম্যাচিং tan()

আরও হাসিখুশি রিপোর্ট করা বাগগুলির মধ্যে একটি ছিল ত্রিকোণমিতিক tan() ফাংশন সম্পর্কে। রঙের জন্য আমরা যে রেজেক্সটি ব্যবহার করছিলাম সেগুলির মধ্যে একটি উপ-এক্সপ্রেশন \b[a-zA-Z]+\b(?!-) red কীওয়ার্ডের মতো নামযুক্ত রঙের সাথে মিলে যাওয়ার জন্য অন্তর্ভুক্ত রয়েছে। তারপরে আমরা ম্যাচ করা অংশটি আসলে একটি নামযুক্ত রঙ কিনা তা পরীক্ষা করে দেখেছি এবং অনুমান করুন কী, tan একটি নামযুক্ত রঙও! সুতরাং, আমরা ভুলভাবে tan() এক্সপ্রেশনগুলিকে রঙ হিসাবে ব্যাখ্যা করেছি।

ম্যাচিং var()

আসুন আমরা অন্য উদাহরণটি একবার দেখে নিই, var() অন্যান্য var() রেফারেন্স সহ একটি ফ্যালব্যাক সহ ফাংশনগুলি: var(--non-existent, var(--margin-vertical)) ।

var() এর জন্য আমাদের রেজেক্স আনন্দের সাথে এই মানটির সাথে মেলে। ব্যতীত, এটি প্রথম সমাপনী প্রথম বন্ধনীতে মিলানো বন্ধ করবে । সুতরাং উপরের পাঠ্যটি var(--non-existent, var(--margin-vertical) হিসাবে মিলে গেছে This এটি নিয়মিত প্রকাশের মিলের পাঠ্যপুস্তকের সীমাবদ্ধতা। যে ভাষাগুলি ম্যাচিং প্রথম বন্ধনী প্রয়োজন তাদের মৌলিকভাবে নিয়মিত নয়।

একটি সিএসএস পার্সারে রূপান্তর

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

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

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

পর্ব 1: নীচে-আপ ম্যাচিং

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

উপরে থেকে সিনট্যাক্স গাছের উদাহরণ বিবেচনা করুন:

এই গাছের জন্য, আমাদের ম্যাচারগুলি নিম্নলিখিত ক্রমে প্রয়োগ করবে:

1. hsl( 177deg var(--saturation, 100%) 50%) : প্রথমত, আমরা hsl ফাংশন কল, হিউ কোণটির প্রথম যুক্তি আবিষ্কার করি। আমরা এটি একটি কোণ ম্যাচারের সাথে মেলে, যাতে আমরা কোণ আইকন দিয়ে কোণ মান সাজাতে পারি।
2. hsl(177deg var(--saturation, 100%) 50%) : দ্বিতীয়ত, আমরা একটি ভিএআর ম্যাচার সহ var ফাংশন কলটি আবিষ্কার করি। এই জাতীয় কলগুলির জন্য আমরা মূলত দুটি জিনিস করতে চাই:
   • ভেরিয়েবলের ঘোষণাপত্রটি সন্ধান করুন এবং এর মানটি গণনা করুন এবং যথাক্রমে তাদের সাথে সংযোগ স্থাপনের জন্য একটি লিঙ্ক এবং একটি পপওভার যুক্ত করুন।
   • গণনা করা মানটি যদি রঙ হয় তবে রঙিন আইকন দিয়ে কলটি সাজান। আসলে একটি তৃতীয় জিনিস আছে, তবে আমরা পরে এটি সম্পর্কে কথা বলব।
3. hsl(177deg var(--saturation, 100%) 50%) : শেষ অবধি, আমরা hsl ফাংশনের জন্য কল এক্সপ্রেশনটির সাথে মেলে, যাতে আমরা এটি রঙিন আইকন দিয়ে সাজাতে পারি।

আমরা যে সাব-এক্সপ্রেশনগুলি সাজাতে চাই তা অনুসন্ধান করার পাশাপাশি, ম্যাচিং প্রক্রিয়াটির অংশ হিসাবে আমরা চলমান একটি দ্বিতীয় বৈশিষ্ট্য রয়েছে। নোট করুন যে পদক্ষেপ #2 এ আমরা বলেছিলাম যে আমরা একটি পরিবর্তনশীল নামের জন্য গণিত মানটি সন্ধান করি। আসলে, আমরা সেই এক ধাপ এগিয়ে নিয়ে যাই এবং ফলাফলগুলি গাছের উপরে প্রচার করি। এবং কেবল ভেরিয়েবলের জন্য নয়, ফ্যালব্যাক মানের জন্যও! এটি গ্যারান্টিযুক্ত যে কোনও var ফাংশন নোড পরিদর্শন করার সময়, এর বাচ্চারা আগেই পরিদর্শন করা হয়েছে, সুতরাং আমরা ইতিমধ্যে ফ্যালব্যাক মানটিতে প্রদর্শিত হতে পারে এমন কোনও var ফাংশনের ফলাফলগুলি জানি। অতএব আমরা ফ্লাইতে তাদের ফলাফলের সাথে সহজেই এবং সস্তারভাবে var ফাংশনগুলির বিকল্প করতে সক্ষম হয়েছি, যা আমাদের "এই var কলের ফলাফল কি কোনও রঙের?" এর মতো প্রশ্নের উত্তর দিতে দেয়? ", যেমনটি আমরা #2 এ করেছি।

দ্বিতীয় ধাপ: টপ-ডাউন রেন্ডারিং

দ্বিতীয় পর্বের জন্য, আমরা বিপরীত দিক। ম্যাচের ফলাফলগুলি প্রথম ধাপ থেকে গ্রহণ করে, আমরা উপরে থেকে নীচে পর্যন্ত চেষ্টা করে গাছটিকে এইচটিএমএলে রেন্ডার করি। প্রতিটি পরিদর্শন করা নোডের জন্য, আমরা এটি মেলে কিনা তা পরীক্ষা করে দেখি এবং যদি তাই হয় তবে ম্যাচারের সংশ্লিষ্ট রেন্ডারারকে কল করুন। পাঠ্য নোডগুলির জন্য একটি ডিফল্ট ম্যাচার এবং রেন্ডারারকে অন্তর্ভুক্ত করে কেবল টেক্সট ( NumberLiteral "50%" এর মতো) রয়েছে এমন নোডগুলির জন্য বিশেষ হ্যান্ডলিংয়ের প্রয়োজনীয়তা আমরা এড়িয়ে চলি। রেন্ডারাররা কেবল এইচটিএমএল নোডগুলিকে আউটপুট করে, যা একসাথে রাখার পরে, তার সজ্জা সহ সম্পত্তির মানটির প্রতিনিধিত্ব করে।

উদাহরণস্বরূপ গাছের জন্য, এখানে সেই ক্রমটি যেখানে সম্পত্তির মানটি রেন্ডার করা হয়েছে:

1. hsl ফাংশন কল দেখুন। এটি মেলে, তাই রঙিন ফাংশন রেন্ডারার কল করুন। এটি দুটি জিনিস করে:
   • কোনও var আর্গুমেন্টের জন্য অন-দ্য ফ্লাই প্রতিস্থাপন প্রক্রিয়াটি ব্যবহার করে প্রকৃত রঙের মান গণনা করে, তারপরে একটি রঙ আইকন আঁকায়।
   • পুনরাবৃত্তভাবে CallExpression বাচ্চাদের রেন্ডার করে। এটি স্বয়ংক্রিয়ভাবে ফাংশন নাম, প্রথম বন্ধনী এবং কমা রেন্ডারিংয়ের যত্ন নেয়, যা কেবল পাঠ্য।
2. hsl কলটির প্রথম যুক্তি দেখুন। এটি মিলেছে, সুতরাং কোণ রেন্ডারারকে কল করুন, যা কোণ আইকন এবং কোণটির পাঠ্য আঁকায়।
3. দ্বিতীয় যুক্তি দেখুন, যা var কল। এটি মিলেছে, সুতরাং var রেন্ডারারকে কল করুন, যা নিম্নলিখিতগুলি আউটপুট করে:
   • পাঠ্য var( শুরুতে।
   • ভেরিয়েবলের নাম এবং এটি ভেরিয়েবলের সংজ্ঞার লিঙ্কের সাথে বা ধূসর পাঠ্য রঙের সাথে এটি সজ্জিত করে এটি নির্ধারণ করে যে এটি অপরিজ্ঞাত ছিল এটি এর মান সম্পর্কে তথ্য দেখানোর জন্য ভেরিয়েবলে একটি পপওভার যুক্ত করে।
   • কমা এবং তারপরে পুনরাবৃত্তভাবে ফ্যালব্যাক মানটি রেন্ডার করে।
   • একটি সমাপনী বন্ধনী।
4. hsl কলটির শেষ যুক্তি দেখুন। এটি মেলে না, তাই কেবল এর পাঠ্য সামগ্রীগুলি আউটপুট করুন।

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

রেন্ডারারদের তাদের ম্যাচ করা নোডের বাচ্চাদের রেন্ডারিং নিয়ন্ত্রণকারী আরেকটি দুর্দান্ত বৈশিষ্ট্য হ'ল এটি আমাদের যুক্ত করা আইকনগুলির মধ্যে নির্ভরতা সম্পর্কে যুক্তিযুক্ত করার ক্ষমতা দেয়। উপরের উদাহরণে, hsl ফাংশন দ্বারা উত্পাদিত রঙ স্পষ্টতই তার বর্ণের মানের উপর নির্ভর করে। এর অর্থ রঙিন আইকন দ্বারা প্রদর্শিত রঙটি কোণ আইকন দ্বারা প্রদর্শিত কোণের উপর নির্ভর করে। যদি ব্যবহারকারী সেই আইকনের মাধ্যমে কোণ সম্পাদকটি খুলে এবং কোণটি সংশোধন করে তবে আমরা এখন রিয়েল টাইমে রঙের আইকনের রঙ আপডেট করতে সক্ষম হয়েছি:

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমরা অন্যান্য আইকন জুটির জন্যও এই প্রক্রিয়াটি ব্যবহার করি যেমন color-mix() এবং এর দুটি রঙের চ্যানেল, বা var ফাংশনগুলি যা এর ফ্যালব্যাক থেকে কোনও রঙ দেয়।

কর্মক্ষমতা প্রভাব

নির্ভরযোগ্যতা উন্নত করার জন্য এবং দীর্ঘস্থায়ী সমস্যাগুলি ঠিক করার জন্য এই সমস্যাটিতে ডুব দেওয়ার সময়, আমরা একটি সম্পূর্ণ পারফরম্যান্স রিগ্রেশন আশা করছিলাম যে আমরা একটি সম্পূর্ণরূপে পার্সার চালানো শুরু করেছি। এটি পরীক্ষা করার জন্য, আমরা একটি বেঞ্চমার্ক তৈরি করেছি যা প্রায় 3.5 কে সম্পত্তি ঘোষণা দেয় এবং এম 1 মেশিনে 6x থ্রোটলিংয়ের সাথে রেজেক্স-ভিত্তিক এবং পার্সার-ভিত্তিক উভয় সংস্করণকে প্রোফাইল করে।

যেমনটি আমরা প্রত্যাশা করেছি, পার্সিং-ভিত্তিক পদ্ধতির ক্ষেত্রে রেজেক্স-ভিত্তিক পদ্ধতির চেয়ে 27% ধীর হয়ে গেছে। রেজেক্স-ভিত্তিক পদ্ধতির রেন্ডার করতে 11s সময় লেগেছিল এবং পার্সার-ভিত্তিক পদ্ধতির রেন্ডার করতে 15s সময় লেগেছে।

নতুন পদ্ধতির থেকে আমরা যে জয়গুলি পেয়েছি তা বিবেচনা করে আমরা এটির সাথে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

স্বীকৃতি

আমাদের গভীর কৃতজ্ঞতা এই পোস্টটি সম্পাদনা করার জন্য তাদের অমূল্য সহায়তার জন্য সোফিয়া এমেলিয়ানোভা এবং জেসিলিন ইয়েনের কাছে চলে গেছে!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷