নতুন বৈশিষ্ট্যগুলি কেবল সিএসএস-এ পপ আপ করে না (কিন্তু আমি চাই তারা তা করত)। বরং, তারা আলোচনা এবং বিবেচনার একটি বিস্তৃত প্রক্রিয়ার মধ্য দিয়ে যায়, সংজ্ঞায়িত, লেখা, প্রোটোটাইপিং, পরীক্ষা, শিপিং হ্যান্ডলিং সমর্থন এবং আরও অনেক ক্রিয়া যা আমি কল্পনাও করতে পারি না। সেই প্রক্রিয়া দীর্ঘএবং প্রতিদিনের বিকাশকারী হিসাবে আমি একটি নতুন বৈশিষ্ট্যে আমার হাত পেতে কতটা চাই তা সত্ত্বেও, আমি কেবল অপেক্ষা করতে পারি।
যাইহোক, আমি কীভাবে অপেক্ষা করতে পারি তা নিয়ন্ত্রণ করতে পারি: আমি কি সেই একটি বৈশিষ্ট্যের সাথে সম্ভব এমন সমস্ত সম্ভাব্য ইন্টারফেস বা ডেমো এড়াতে পারি? অথবা আমি কি সিএসএসের সীমানা পুশ করব এবং যেভাবেই হোক সেগুলি করার চেষ্টা করব?
উচ্চাকাঙ্ক্ষী এবং কৌতূহলী বিকাশকারী হিসাবে, আমাদের মধ্যে অনেকেই পরবর্তী বিকল্পটি বেছে নেয়। সেই মানসিকতা ছাড়াই সিএসএস অচল হয়ে পড়বে। তাই, আজ, আমি দুটি আসন্ন ফাংশন দেখতে চাই: sibling-count() এবং sibling-index(). আমরা তাদের জন্য অপেক্ষা করছি — এবং বেশ কয়েক বছর ধরে আছি — তাই আমি আমার স্বাভাবিক কৌতূহলকে আমার সেরাটা পেতে দিচ্ছি যাতে আমি কী সম্পর্কে উত্তেজিত হতে পারি তার জন্য আমি অনুভব করতে পারি। আমার সাথে যোগ দিন!
গাছ গণনা ফাংশন
কোনো কোনো সময়ে, আপনি সম্ভবত একটি উপাদানের ভাইবোনদের মধ্যে অবস্থান জানতে চেয়েছেন বা একটি উপাদানকে CSS-এ কতগুলি শিশুর কিছু গণনা করতে হবে, হতে পারে এমন কিছু বিস্ময়কর অ্যানিমেশনের জন্য যেখানে প্রতিটি উপাদানের দীর্ঘ বিলম্ব হয়, অথবা সম্ভবত পরিবর্তনের জন্য একটি উপাদান background-color ভাইবোনের সংখ্যার উপর নির্ভর করে। এটি আমার উপর একটি দীর্ঘ প্রতীক্ষিত চুক্তি হয়েছে CSS ইচ্ছা তালিকা. এই নাও CSSWG GitHub সমস্যা 2017 থেকে:
বৈশিষ্ট্য অনুরোধ. এটি ব্যবহার করতে সক্ষম হতে ভাল হবে
counter()এর ভিতরে ফাংশনcalc()ফাংশন এটি লেআউটগুলিতে নতুন সম্ভাবনাগুলিকে সক্ষম করবে।
যাইহোক, কাউন্টারগুলি স্ট্রিং ব্যবহার করে কাজ করে, এগুলিকে একটি এর ভিতরে অকেজো করে calc() ফাংশন যা সংখ্যা নিয়ে কাজ করে। আমাদের একই ধরনের ফাংশনগুলির একটি সেট দরকার যা ফেরত দেয় পূর্ণসংখ্যা হিসাবে একটি উপাদানের সূচক এবং ভাইবোনের গণনা। এই জিজ্ঞাসা খুব বেশি মনে হয় না. আমরা বর্তমানে ব্যবহার করে একটি উপাদানকে তার গাছের অবস্থান দ্বারা জিজ্ঞাসা করতে পারি :nth-child() ছদ্ম-নির্বাচক (এবং এর বৈকল্পিক), এটি ব্যবহার করে কতগুলি আইটেমের উপর ভিত্তি করে একটি উপাদান জিজ্ঞাসা করার কথা উল্লেখ না করে :has() ছদ্ম-নির্বাচক
ভাগ্যক্রমে, এই বছর CSSWG বাস্তবায়ন অনুমোদন sibling-count() এবং sibling-index() ফাংশন! এবং আমাদের কাছে ইতিমধ্যেই নির্দিষ্ট কিছু লেখা আছে:
দ
sibling-count()কার্যকরী স্বরলিপি প্রতিনিধিত্ব করে, একটি হিসাবে<integer>যে উপাদানটির উপর স্বরলিপি ব্যবহার করা হয়েছে তার অভিভাবকের মধ্যে চাইল্ড উপাদানের মোট সংখ্যা।দ
sibling-index()কার্যকরী স্বরলিপি প্রতিনিধিত্ব করে, একটি হিসাবে<integer>উপাদানটির সূচক যার উপর স্বরলিপিটি তার পিতামাতার সন্তানদের মধ্যে ব্যবহৃত হয়। লাইক:nth-child(),sibling-index()1-সূচিবদ্ধ।
তাদের ব্যবহার করার জন্য আমাদের কত সময় অপেক্ষা করতে হবে? এই বছরের শুরুর দিকে অ্যাডাম আর্গিল ড যে “একজন ক্রোমিয়াম প্রকৌশলী এটি করতে চান বলে উল্লেখ করেছেন, কিন্তু আমাদের কাছে এখনও এটি চেষ্টা করার জন্য একটি পতাকা নেই৷ আমরা যখন করব তখন শেয়ার করব!” সুতরাং, যদিও আমি 2025 সালে আরও খবর পেতে আশাবাদী, আমরা সম্ভবত সেগুলি শীঘ্রই পাঠানো দেখতে পাব না। ইতিমধ্যে, আসুন আমরা এই মুহূর্তে কি করতে পারি তা জেনে নেওয়া যাক!
দুই কাঠি একসঙ্গে ঘষে
সিনট্যাক্স এবং ব্যবহারের পরিপ্রেক্ষিতে আমরা গাছ গণনা ফাংশনের সবচেয়ে কাছাকাছি যা কাস্টম বৈশিষ্ট্যের সাথে পেতে পারি। যাইহোক, সবচেয়ে বড় সমস্যা হল সঠিক সূচক এবং গণনা দিয়ে তাদের জনবহুল করা। সবচেয়ে সহজ এবং দীর্ঘতম পদ্ধতি হল প্রতিটি হার্ডকোডিং শুধুমাত্র CSS ব্যবহার করে: আমরা ব্যবহার করতে পারি nth-child() নির্বাচক প্রতিটি উপাদান তার সংশ্লিষ্ট সূচক দিতে:
li:nth-child(1) {
--sibling-index: 1;
}
li:nth-child(2) {
--sibling-index: 2;
}
li:nth-child(3) {
--sibling-index: 3;
}
/* and so on... */সেট করা sibling-count() সমতুল্যের একটু বেশি সূক্ষ্মতা রয়েছে যেহেতু আমাদের এর সাথে পরিমাণের প্রশ্নগুলি ব্যবহার করতে হবে :has() নির্বাচক একটি পরিমাণ প্রশ্নের নিম্নলিখিত সিনট্যাক্স আছে:
.container:has(> :last-child:nth-child(m)) { }…কোথায় m আমরা লক্ষ্য করতে চাই উপাদান সংখ্যা. এটি একটি পাত্রের শেষ উপাদানটিও কিনা তা পরীক্ষা করে কাজ করে nth আমরা লক্ষ্য করছি উপাদান; এইভাবে এটির উপাদানগুলির সংখ্যা মাত্র। আপনি আপনার কাস্টম তৈরি করতে পারেন তেমানি আফিফের এই টুলটি ব্যবহার করে পরিমাণের প্রশ্ন. এই ক্ষেত্রে, আমাদের পরিমাণ প্রশ্ন নিম্নলিখিত মত দেখাবে:
ol:has(> :nth-child(1)) {
--sibling-count: 1;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}
ol:has(> :last-child:nth-child(3)) {
--sibling-count: 3;
}
/* and so on... */এই উদাহরণটি ইচ্ছাকৃতভাবে সংক্ষিপ্ততার জন্য উপাদানের সংখ্যার উপর হালকা, কিন্তু তালিকা বাড়ার সাথে সাথে এটি নিয়ন্ত্রণের অযোগ্য হয়ে যাবে। হয়তো আমরা আমাদের জন্য সেগুলি লিখতে Sass এর মতো একটি প্রিপ্রসেসর ব্যবহার করতে পারি, কিন্তু আমরা এখানে একটি ভ্যানিলা CSS সমাধানের উপর ফোকাস করতে চাই। উদাহরণস্বরূপ, নিম্নলিখিত ডেমোটি 12টি উপাদান পর্যন্ত সমর্থন করতে পারে এবং আপনি ইতিমধ্যে দেখতে পাচ্ছেন যে এটি কোডে কতটা কুশ্রী।
আপনি স্কোর রাখার জন্য 12টি উপাদানের সূচক এবং গণনা জানার 24টি নিয়ম। এটি অবশ্যই মনে হয় যে আমরা সেই সংখ্যাটিকে আরও পরিচালনাযোগ্য কিছুতে নামিয়ে আনতে পারি, তবে আমরা যদি প্রতিটি সূচককে হার্ডকোড করি তবে আমরা আমাদের লিখিত কোডের পরিমাণ বাড়াতে বাধ্য। আমরা যা করতে পারি তা হল আমাদের CSS পুনরায় লেখা যাতে আমরা নেস্ট করতে পারি --sibling-index এবং --sibling-count বৈশিষ্ট্য একসাথে। প্রতিটি সম্পত্তি নিজেই লেখার পরিবর্তে:
li:nth-child(2) {
--sibling-index: 2;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}আমরা পরিবর্তে নেস্ট পারে --sibling-count ভিতরে শাসন --sibling-index নিয়ম
li:nth-child(2) {
--sibling-index: 2;
ol:has(> &:last-child) {
--sibling-count: 2;
}
}যদিও এটি একটি অভিভাবককে তার সন্তানদের মধ্যে বাসা বাঁধতে অস্বস্তিকর মনে হতে পারে, নিম্নলিখিত CSS কোডটি সম্পূর্ণ বৈধ; আমরা দ্বিতীয় নির্বাচন করছি li উপাদান, এবং ভিতরে, আমরা একটি নির্বাচন করছি ol উপাদান যদি দ্বিতীয় হয় li উপাদানটিও শেষ, তাই তালিকায় কেবল দুটি উপাদান রয়েছে। কোন সিনট্যাক্স পরিচালনা করা সহজ? এটা আপনার উপর নির্ভর করে।
কিন্তু যে শুধু একটি সামান্য উন্নতি. আমাদের যদি 100টি উপাদান থাকত, তাহলে আমাদের এখনও হার্ডকোড করতে হবে --sibling-index এবং --sibling-count বৈশিষ্ট্য 100 বার। সৌভাগ্যবশত, নিম্নলিখিত পদ্ধতিটি লগারিদমিক উপায়ে নিয়ম বাড়াবে, বিশেষ করে বেস-2। সুতরাং 100টি উপাদানের জন্য 100টি নিয়ম লেখার পরিবর্তে, আমরা প্রায় 100টি উপাদানের জন্য 10টি নিয়মের কাছাকাছি লিখব।
ফ্লিন্ট এবং ইস্পাত
এই পদ্ধতিটি প্রথম দ্বারা বর্ণিত হয়েছিল গত বছরের অক্টোবরে রোমান কোমারভযেখানে তিনি গাছ গণনা ফাংশন এবং ভবিষ্যত উভয়েরই প্রোটোটাইপ করেন random() ফাংশন এটি একটি আশ্চর্যজনক পোস্ট, তাই আমি দৃঢ়ভাবে এটি পড়তে উত্সাহিত.
এই পদ্ধতিটি কাস্টম বৈশিষ্ট্যগুলিও ব্যবহার করে, তবে প্রতিটিকে হার্ডকোড করার পরিবর্তে, আমরা দুটি কাস্টম বৈশিষ্ট্য ব্যবহার করব যা তৈরি করবে --sibling-index প্রতিটি উপাদানের জন্য সম্পত্তি। শুধু রোমান এর পোস্টের সাথে সামঞ্জস্যপূর্ণ হতে, আমরা তাদের কল করব --si1 এবং --si2উভয় থেকে শুরু 0:
li {
--si1: 0;
--si2: 0;
}আসল --sibling-index উভয় বৈশিষ্ট্য ব্যবহার করে নির্মিত হবে এবং a ফ্যাক্টর (F) যা একটি পূর্ণসংখ্যার বড় বা সমান প্রতিনিধিত্ব করে 2 এটি আমাদের বলে যে আমরা সূত্র অনুসারে কতগুলি উপাদান নির্বাচন করতে পারি sqrt(F) - 1. তাই…
- একটি ফ্যাক্টর জন্য
2আমরা নির্বাচন করতে পারি3উপাদান - একটি ফ্যাক্টর জন্য
3আমরা নির্বাচন করতে পারি8উপাদান - একটি ফ্যাক্টর জন্য
5আমরা নির্বাচন করতে পারি24উপাদান - একটি ফ্যাক্টর জন্য
10আমরা নির্বাচন করতে পারি99উপাদান - একটি ফ্যাক্টর জন্য
25আমরা নির্বাচন করতে পারি624উপাদান
আপনি দেখতে পাচ্ছেন, একটি করে ফ্যাক্টর বাড়ালে আমরা কতগুলি উপাদান নির্বাচন করতে পারি তার উপর আমাদের সূচকীয় লাভ দেবে। কিন্তু কিভাবে এই সব CSS অনুবাদ করে?
সর্বপ্রথম জানতে হবে যে হিসাব করার সূত্রটি --sibling-index সম্পত্তি হল calc(F * var(--si2) + var(--si1)). যদি আমরা একটি ফ্যাক্টর নিতে 3এটি নিম্নলিখিত মত দেখাবে:
li {
--si1: 0;
--si2: 0;
/* factor of 3; it's a harcoded number */
--sibling-index: calc(3 * var(--si2) + var(--si1));
}নিম্নলিখিত নির্বাচকরা এলোমেলো হতে পারে তবে এখানে আমার সাথে থাকুন। জন্য --si1 প্রোপার্টি, আমরা ফ্যাক্টরের গুণিতক উপাদান নির্বাচন করার নিয়ম লিখব এবং তাদের একটি দ্বারা অফসেট করব 1 যতক্ষণ না আমরা পৌঁছাই F - 1তারপর সেট --si1 অফসেট করতে এটি নিম্নলিখিত CSS-এ অনুবাদ করে:
li:nth-child(Fn + 1) { --si1: 1; }
li:nth-child(Fn + 2) { --si1: 2; }
/* ... */
li:nth-child(Fn+(F-1)) { --si1: (F-1) }তাই যদি আমাদের ফ্যাক্টর হয় 3আমরা পৌঁছনো পর্যন্ত আমরা নিম্নলিখিত নিয়ম লিখব F-1তাই 2 নিয়ম:
li:nth-child(3n + 1) { --si1: 1; }
li:nth-child(3n + 2) { --si1: 2; }জন্য --si2 প্রোপার্টি, আমরা ফ্যাক্টরের ব্যাচে উপাদান নির্বাচন করার নিয়ম লিখব (তাই যদি আমাদের ফ্যাক্টর হয় 3আমরা নির্বাচন করব 3 নিয়ম প্রতি উপাদান), শেষ সম্ভাব্য সূচক থেকে যাচ্ছে (এই ক্ষেত্রে 8) পশ্চাদপদ যতক্ষণ না আমরা ব্যাচে আরও উপাদান নির্বাচন করতে অক্ষম। এটি CSS এ লিখতে একটু বেশি জটিল:
li:nth-child(n + F*1):nth-child(-n + F*1-1){--si2: 1;}
li:nth-child(n + F*2):nth-child(-n + F*2-1){--si2: 2;}
/* ... */
li:nth-child(n+(F*(F-1))):nth-child(-n+(F*F-1)) { --si2: (F-1) }আবার যদি আমাদের ফ্যাক্টর হয় 3আমরা নিম্নলিখিত দুটি নিয়ম লিখব:
li:nth-child(n + 3):nth-child(-n + 5) {
--si2: 1;
}
li:nth-child(n + 6):nth-child(-n + 8) {
--si2: 2;
}আর এটাই! শুধুমাত্র জন্য যারা দুটি মান সেট করে --si1 এবং --si2 আমরা পর্যন্ত গণনা করতে পারি 8 মোট উপাদান। এটি কীভাবে কাজ করে তার পিছনের গণিতটি প্রথমে অস্বস্তিকর বলে মনে হয়, কিন্তু একবার আপনি দৃশ্যত এটি পেয়ে গেলে, এটি সব ক্লিক করে। আমি এই ইন্টারেক্টিভ ডেমো তৈরি করেছি যাতে আপনি দেখতে পারেন কিভাবে এই সূত্রটি ব্যবহার করে সমস্ত উপাদান পৌঁছানো যায়। কোন উপাদানগুলি নির্বাচন করা যেতে পারে তা দেখতে কোড স্নিপেটগুলির উপর হোভার করুন এবং একটি সম্ভাব্য সূচকে তাদের একত্রিত করতে প্রতিটি স্নিপেটে ক্লিক করুন৷
আপনি যদি উপাদানগুলি এবং ফ্যাক্টরগুলিকে সর্বোচ্চে ক্র্যাঙ্ক করেন, আপনি দেখতে পাবেন যে আমরা শুধুমাত্র 14টি স্নিপেট ব্যবহার করে 49টি উপাদান নির্বাচন করতে পারি!
অপেক্ষা করুন, একটি জিনিস অনুপস্থিত: the sibling-count() ফাংশন ভাগ্যক্রমে, আমরা প্রোটোটাইপিং থেকে যা শিখেছি তা আমরা পুনরায় ব্যবহার করব --sibling-index. আমরা দুটি কাস্টম বৈশিষ্ট্য দিয়ে শুরু করব: --sc1 এবং --sc1 ধারক এ, উভয় থেকে শুরু 0 পাশাপাশি গণনার সূত্র --sibling-count একই
ol {
--sc1: 0;
--sc2: 0;
/* factor of 3; also a harcoded number */
--sibling-count: calc(3 * var(--sc2) + var(--sc1));
}রোমান এর পোস্ট এছাড়াও ব্যাখ্যা করে কিভাবে নির্বাচকদের লিখতে হয় --sibling-count নিজেদের দ্বারা সম্পত্তি, কিন্তু আমরা ব্যবহার করব :has() আমাদের প্রথম কৌশল থেকে নির্বাচন পদ্ধতি তাই আমাদের অতিরিক্ত নির্বাচক লিখতে হবে না। আমরা যারা ক্র্যাম করতে পারেন --sc1 এবং --sc2 নিয়মের বৈশিষ্ট্য যেখানে আমরা সংজ্ঞায়িত করেছি sibling-index() বৈশিষ্ট্য:
/* --si1 and --sc1 */
li:nth-child(3n + 1) {
--si1: 1;
ol:has(> &:last-child) {
--sc1: 1;
}
}
li:nth-child(3n + 2) {
--si1: 2;
ol:has(> &:last-child) {
--sc1: 2;
}
}
/* --si2 and --sc2 */
li:nth-child(n + 3):nth-child(-n + 5) {
--si2: 1;
ol:has(> &:last-child) {
--sc2: 1;
}
}
li:nth-child(n + 6):nth-child(-n + 8) {
--si2: 2;
ol:has(> &:last-child) {
--sc2: 2;
}
}এই একটি ফ্যাক্টর ব্যবহার করা হয় 3তাই আমরা মাত্র চারটি নিয়ম সহ আটটি উপাদান পর্যন্ত গণনা করতে পারি। নিম্নলিখিত উদাহরণ একটি ফ্যাক্টর আছে 7তাই আমরা মাত্র 14 টি নিয়ম সহ 48 টি উপাদান গণনা করতে পারি।
এই পদ্ধতিটি দুর্দান্ত, তবে এটি কীভাবে কাজ করে তার প্রায় জাদুকরী উপায়ের কারণে বা কেবলমাত্র আপনি এটিকে নান্দনিকভাবে আনন্দদায়ক মনে করেন না বলে সবার জন্য উপযুক্ত নাও হতে পারে। যদিও উত্সাহী হাতের জন্য চকমকি এবং ইস্পাত দিয়ে আগুন জ্বালানো একটি হাওয়া, অনেকে তাদের আগুন শুরু করতে পারে না।
একটি flamethrower ব্যবহার করে
এই পদ্ধতির জন্য, আমরা গাছ গণনা ফাংশন অনুকরণ করার জন্য আবার কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করব, এবং সবচেয়ে ভাল কি, আমরা অসীম পর্যন্ত গণনা করার জন্য 20 লাইনের কম কোড লিখব—অথবা আমার ধারণা 1.7976931348623157e+308যা দ্বিগুণ নির্ভুলতা ফ্লোটিং পয়েন্ট সীমা!
আমরা ব্যবহার করা হবে মিউটেশন অবজারভার APIতাই অবশ্যই জাভাস্ক্রিপ্ট লাগে। আমি জানি এটা অনেকের কাছে পরাজয় স্বীকার করার মত, কিন্তু আমি একমত নই। যদি জাভাস্ক্রিপ্ট পদ্ধতি সহজ হয় (যা এই ক্ষেত্রে, এটি এখন পর্যন্ত), তাহলে এটি সবচেয়ে উপযুক্ত পছন্দ। শুধু একটি সাইড নোট হিসাবে, যদি কর্মক্ষমতা আপনার প্রধান উদ্বেগ হয়, CSS বা HTML-এ প্রতিটি সূচক হার্ড-কোডিং এ লেগে থাকুন।
প্রথমে, আমরা DOM থেকে আমাদের কন্টেইনার ধরব:
const elements = document.querySelector("ol");তারপর আমরা একটি ফাংশন তৈরি করব যা সেট করে --sibling-index প্রতিটি উপাদানের সম্পত্তি এবং --sibling-count পাত্রে (এটি ক্যাসকেডের কারণে এটির বাচ্চাদের জন্য উপলব্ধ হবে)। জন্য --sibling-indexআমরা মাধ্যমে লুপ আছে elements.childrenএবং আমরা পেতে পারি --sibling-count থেকে elements.children.length.
const updateCustomProperties = () => {
let index = 1;
for (element of elements.children) {
element.style.setProperty("--sibling-index", index);
index++;
}
elements.style.setProperty("--sibling-count", elements.children.length);
};আমাদের ফাংশন হয়ে গেলে, একবার কল করতে ভুলবেন না যাতে আমাদের প্রাথমিক গাছ গণনা বৈশিষ্ট্যগুলি থাকে:
updateCustomProperties();সবশেষে, মিউটেশন অবজারভার। আমাদের ব্যবহার করে একটি নতুন পর্যবেক্ষক শুরু করতে হবে MutationObserver নির্মাণকারী এটি একটি কলব্যাক লাগে যা প্রতিবার উপাদান পরিবর্তন করার সময় আহ্বান করা হয়, তাই আমরা আমাদের লিখি updateCustomProperties ফাংশন ফলে সঙ্গে observer বস্তু, আমরা এটা কল করতে পারেন observe() পদ্ধতি যা দুটি পরামিতি লাগে:
- আমরা পর্যবেক্ষণ করতে চাই উপাদান, এবং
- ক
configঅবজেক্ট যা আমরা তিনটি বুলিয়ান বৈশিষ্ট্যের মাধ্যমে কী পর্যবেক্ষণ করতে চাই তা সংজ্ঞায়িত করে:attributes,childListএবংsubtree. এই ক্ষেত্রে, আমরা শুধু চাইল্ড তালিকার পরিবর্তনগুলি পরীক্ষা করতে চাই, তাই আমরা সেটিকে সেট করেছি৷true:
const observer = new MutationObserver(updateCustomProperties);
const config = {attributes: false, childList: true, subtree: false};
observer.observe(elements, config);যে আমাদের প্রয়োজন হবে! এই পদ্ধতি ব্যবহার করে আমরা গণনা করতে পারি অনেক উপাদান, নিম্নলিখিত ডেমোতে আমি সর্বোচ্চ সেট করেছি 100কিন্তু এটি সহজেই দশগুণে পৌঁছাতে পারে:
তাই হ্যাঁ, ওখানেই আমাদের ফ্লেমথ্রওয়ার। এটি অবশ্যই আগুন শুরু করে, তবে বেশিরভাগ ব্যবহারের ক্ষেত্রে এটি প্রচুর পরিমাণে ওভারকিল। আমরা নিখুঁত লাইটার জন্য অপেক্ষা করার সময় কিন্তু যে আমরা কি আছে.
