রেগুলার এক্সপ্রেশনের বাইরে: 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 এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।
• আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷