বেশ কিছুক্ষণ হলো! নতুন ইন ক্রোম ভিডিও এই বিষয়ে তথ্য নিয়ে ফিরে এসেছে:
- CSS টেক্সট-বক্স , যা আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে সঠিকভাবে উল্লম্ব ব্যবধান নিয়ন্ত্রণ করতে দেয়।
- ফাইল সিস্টেম অ্যাক্সেস API যা এখন Android এবং ওয়েব ভিউতে সমর্থিত।
-
moveBeforeসাথে একটি DOM উপাদান সরানোর জন্য একটি রাষ্ট্র সংরক্ষণের উপায় । - হালকা খারিজ
<dialog>উপাদানে আসে। - এবং বেসলাইনে অনেক আপডেট আছে এবং আরও অনেক কিছু !
আমি মারিকো চলুন ডুব দিয়ে দেখি গত তিনটি রিলিজের জন্য Chrome-এ নতুন কী রয়েছে৷
CSS টেক্সট-বক্স
CSS text-box বৈশিষ্ট্য আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে উল্লম্ব ব্যবধানকে সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে দেয়।
প্রতিটি ফন্ট উপরে এবং অক্ষরগুলির নীচে একটি আলাদা পরিমাণ স্থান তৈরি করে, যা উপাদানটির আকার নির্ধারণ করে।
এখন পর্যন্ত এই স্থানগুলির আকার নিয়ন্ত্রণ করা অসম্ভব।
নতুন text-box-trim প্রপার্টি ট্রিম করার জন্য সাইডগুলিকে উপরে বা নীচে নির্দিষ্ট করে এবং text-box-edge প্রোপার্টি নির্দিষ্ট করে যে এটি কীভাবে ট্রিম করা উচিত। উদাহরণস্বরূপ, ক্যাপ উচ্চতায় ছাঁটা, যা বড় হাতের অক্ষরগুলির শীর্ষে।
আপনি শর্টহ্যান্ড text-box বৈশিষ্ট্য ব্যবহার করে এটি লিখতে পারেন।
সিএসএস text-box-trim নিবন্ধে এই নতুন বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও জানুন।
ফাইল সিস্টেম অ্যাক্সেস API
Chrome 133-এ যোগ করা হয়েছে, একটি DOM আদিম Node.prototype.moveBefore আপনাকে উপাদানের অবস্থা রিসেট না করেই একটি DOM গাছের চারপাশে উপাদানগুলি সরাতে দেয়৷
যখন আপনি মুছে ফেলুন, তারপর একটি DOM উপাদান সরানোর জন্য একটি উপাদান পুনরায় সন্নিবেশ করুন, এটি সেই উপাদানটির অবস্থা পুনরায় সেট করবে। এই নতুন আদিম ব্যবহার করে, একটি নোডের অবস্থা সংরক্ষিত হয়।
তাই iframes লোড থাকে, সক্রিয় উপাদানগুলি ফোকাসে থাকে, পপওভার এবং ডায়ালগের মতো জিনিসগুলি খোলা থাকে এবং CSS ট্রানজিশন বা অ্যানিমেশনগুলি চলতে থাকে।
একটি DOM উপাদান সরানোর জন্য রাষ্ট্র সংরক্ষণের উপায়
ফাইল সিস্টেম অ্যাক্সেস API কিছু সময়ের জন্য Chrome ডেস্কটপে উপলব্ধ রয়েছে। এই API ওয়েব অ্যাপগুলিকে ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমের ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ ক্রোম 132 থেকে, এপিআই অ্যান্ড্রয়েড এবং ওয়েবভিউতেও উপলব্ধ।
একটি ফাইল পড়তে, showOpenFilePicker() কল করুন। এই পদ্ধতিটি একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি ফাইলটি পড়ার জন্য ব্যবহার করতে পারেন।
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি আগে যে ফাইল হ্যান্ডেলটি পেয়েছিলেন সেটি ব্যবহার করতে পারেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন৷
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
হালকা খারিজ <dialog> উপাদানে আসে
আপনি যদি পপওভার এপিআই ব্যবহার করে থাকেন তাহলে আপনি জানেন যে পপওভার এপিআই এর একটি চমৎকার বৈশিষ্ট্য হল হালকা খারিজ আচরণ। ব্যবহারকারীরা ব্যাকগ্রাউন্ডে ক্লিক করতে পারেন এবং পপওভার উপাদানটি বিশেষভাবে বন্ধ বোতামে আঘাত না করে বন্ধ হয়ে যায়।
এই হালকা খারিজ ক্ষমতা এখন <dialog> উপাদানেও সমর্থিত!
আপনি যখন any closedby অ্যাট্রিবিউট সেট করেন, তখন ডায়ালগের বাইরে ক্লিক করে বা এস্কেপ কী টিপে ডায়ালগটি বাতিল করা যেতে পারে।
<dialog closedby="any">...</dialog>
যখন একটি পপওভার অটোতে সেট করা হয় তখন এটি একই আচরণ।
বেসলাইনে আপডেট
এবং, এখানে বেসলাইন সম্পর্কে খবর আছে
বেসলাইন নতুন উপলব্ধ
প্রথমত, বেসলাইন নতুনভাবে উপলব্ধ, এই বৈশিষ্ট্যগুলি যা সম্প্রতি চারটি প্রধান ব্রাউজারে পাঠানো হয়েছে৷
scrollbar-gutter এবং scrollbar-width
স্ক্রলবার-গটার সিএসএস সম্পত্তির সাহায্যে আপনি স্ক্রলবারটি প্রদর্শিত বা অদৃশ্য হয়ে গেলে অবাঞ্ছিত লেআউট পরিবর্তন এড়াতে স্ক্রলবারের জন্য একটি স্থান সংরক্ষণ করতে পারেন। স্ক্রলবার-প্রস্থের সাহায্যে আপনি একটি সংকীর্ণ স্ক্রলবার তৈরি করতে পারেন, এমনকি স্ক্রোলবারকে প্রভাবিত না করে সম্পূর্ণরূপে স্ক্রলবার লুকিয়ে রাখতে পারেন।
ruby-align
রুবি-সারিবদ্ধ সিএসএস প্রপার্টি দিয়ে আপনি রুবি বেস টেক্সট এবং রুবি টীকা লেখার সারিবদ্ধকরণ নির্দিষ্ট করতে পারেন।
Promise.try
Promise.try হল সিঙ্ক্রোনাস অনুরোধের জন্য ত্রুটি পরিচালনা করার একটি সুবিধাজনক পদ্ধতি। এটি ব্যবহার করে, আপনি যখন Promise.resolve-এর সাথে অনুরোধ করার চেষ্টা করেন তখন আপনি কলব্যাক ফাংশন বাদ দিতে পারেন।
ওয়াসম আবর্জনা সংগ্রহ এবং টেইল কল অপ্টিমাইজেশান
WebAssembly এখন আবর্জনা সংগ্রহ এবং টেল কল অপ্টিমাইজেশন সমর্থন করে।
বেসলাইন ব্যাপকভাবে উপলব্ধ
অ্যারে findLast() এবং findLastIndex()
অ্যারে findLast() এবং findLastIndex() একটি অ্যারের শেষ থেকে আইটেম পেতে খুব সুবিধাজনক পদ্ধতি। এই বৈশিষ্ট্যটি 30 মাস ধরে সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে, যার মানে এটি এখন বেসলাইন ব্যাপকভাবে উপলব্ধ৷
স্বতন্ত্র রূপান্তর বৈশিষ্ট্য
স্বতন্ত্র ট্রান্সফর্ম বৈশিষ্ট্য যা আপনাকে CSS রূপান্তরগুলির উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ দেয় এখন বেসলাইন ব্যাপকভাবে উপলব্ধ।
বেসলাইন সম্পর্কে আরও
আপনি যদি বেসলাইন সম্পর্কে আরও জানতে চান এবং নিউলি এবং ওয়াইডলি উপলব্ধের মধ্যে পার্থক্য জানতে চান, আমার তৈরি করা ছোট ভিডিওটি দেখুন।
আপনি ওয়েব প্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ডে একটি বৈশিষ্ট্যের বেসলাইন স্থিতি সম্পর্কে আরও জানতে পারেন!
ইন্টারপ প্রকল্প 2025 এর জন্য ফিরে এসেছে
এবং সবশেষে, ইন্টারপ প্রজেক্টটি 2025 এর জন্য ফিরে আসছে যার মধ্যে ফোকাস ক্ষেত্রগুলির একটি তালিকা সহ ভিউ ট্রানজিশন, CSS অ্যাঙ্কর পজিশনিং, এবং নেভিগেশন এপিআই। প্রকল্প ঘোষণা চেক আউট নিশ্চিত করুন!
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি মারিকো কোসাকা, এবং Chrome-এ নতুন কী আছে সে সম্পর্কে আরও জানাতে আমি তিন মাসের মধ্যে ফিরে আসব!
,বেশ কিছুক্ষণ হলো! নতুন ইন ক্রোম ভিডিও এই বিষয়ে তথ্য নিয়ে ফিরে এসেছে:
- CSS টেক্সট-বক্স , যা আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে সঠিকভাবে উল্লম্ব ব্যবধান নিয়ন্ত্রণ করতে দেয়।
- ফাইল সিস্টেম অ্যাক্সেস API যা এখন Android এবং ওয়েব ভিউতে সমর্থিত।
-
moveBeforeসাথে একটি DOM উপাদান সরানোর জন্য একটি রাষ্ট্র সংরক্ষণের উপায় । - হালকা খারিজ
<dialog>উপাদানে আসে। - এবং বেসলাইনে অনেক আপডেট আছে এবং আরও অনেক কিছু !
আমি মারিকো চলুন ডুব দিয়ে দেখি গত তিনটি রিলিজের জন্য Chrome-এ নতুন কী রয়েছে৷
CSS টেক্সট-বক্স
CSS text-box বৈশিষ্ট্য আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে উল্লম্ব ব্যবধানকে সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে দেয়।
প্রতিটি ফন্ট উপরে এবং অক্ষরগুলির নীচে একটি আলাদা পরিমাণ স্থান তৈরি করে, যা উপাদানটির আকার নির্ধারণ করে।
এখন পর্যন্ত এই স্থানগুলির আকার নিয়ন্ত্রণ করা অসম্ভব।
নতুন text-box-trim প্রপার্টি ট্রিম করার জন্য সাইডগুলিকে উপরে বা নীচে নির্দিষ্ট করে এবং text-box-edge প্রোপার্টি নির্দিষ্ট করে যে এটি কীভাবে ট্রিম করা উচিত। উদাহরণস্বরূপ, ক্যাপ উচ্চতায় ছাঁটা, যা বড় হাতের অক্ষরগুলির শীর্ষে।
আপনি শর্টহ্যান্ড text-box বৈশিষ্ট্য ব্যবহার করে এটি লিখতে পারেন।
সিএসএস text-box-trim নিবন্ধে এই নতুন বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও জানুন।
ফাইল সিস্টেম অ্যাক্সেস API
Chrome 133-এ যোগ করা হয়েছে, একটি DOM আদিম Node.prototype.moveBefore আপনাকে উপাদানের অবস্থা রিসেট না করেই একটি DOM গাছের চারপাশে উপাদানগুলি সরাতে দেয়৷
যখন আপনি মুছে ফেলুন, তারপর একটি DOM উপাদান সরানোর জন্য একটি উপাদান পুনরায় সন্নিবেশ করুন, এটি সেই উপাদানটির অবস্থা পুনরায় সেট করবে। এই নতুন আদিম ব্যবহার করে, একটি নোডের অবস্থা সংরক্ষিত হয়।
তাই iframes লোড থাকে, সক্রিয় উপাদানগুলি ফোকাসে থাকে, পপওভার এবং ডায়ালগের মতো জিনিসগুলি খোলা থাকে এবং CSS ট্রানজিশন বা অ্যানিমেশনগুলি চলতে থাকে।
একটি DOM উপাদান সরানোর জন্য রাষ্ট্র সংরক্ষণের উপায়
ফাইল সিস্টেম অ্যাক্সেস API কিছু সময়ের জন্য Chrome ডেস্কটপে উপলব্ধ রয়েছে। এই API ওয়েব অ্যাপগুলিকে ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমের ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ ক্রোম 132 থেকে, এপিআই অ্যান্ড্রয়েড এবং ওয়েবভিউতেও উপলব্ধ।
একটি ফাইল পড়তে, showOpenFilePicker() কল করুন। এই পদ্ধতিটি একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি ফাইলটি পড়ার জন্য ব্যবহার করতে পারেন।
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি আগে যে ফাইল হ্যান্ডেলটি পেয়েছিলেন সেটি ব্যবহার করতে পারেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন৷
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
হালকা খারিজ <dialog> উপাদানে আসে
আপনি যদি পপওভার এপিআই ব্যবহার করে থাকেন তাহলে আপনি জানেন যে পপওভার এপিআই এর একটি চমৎকার বৈশিষ্ট্য হল হালকা খারিজ আচরণ। ব্যবহারকারীরা ব্যাকগ্রাউন্ডে ক্লিক করতে পারেন এবং পপওভার উপাদানটি বিশেষভাবে বন্ধ বোতামে আঘাত না করে বন্ধ হয়ে যায়।
এই হালকা খারিজ ক্ষমতা এখন <dialog> উপাদানেও সমর্থিত!
আপনি যখন any closedby অ্যাট্রিবিউট সেট করেন, তখন ডায়ালগের বাইরে ক্লিক করে বা এস্কেপ কী টিপে ডায়ালগটি বাতিল করা যেতে পারে।
<dialog closedby="any">...</dialog>
যখন একটি পপওভার অটোতে সেট করা হয় তখন এটি একই আচরণ।
বেসলাইনে আপডেট
এবং, এখানে বেসলাইন সম্পর্কে খবর আছে
বেসলাইন নতুন উপলব্ধ
প্রথমত, বেসলাইন নতুনভাবে উপলব্ধ, এই বৈশিষ্ট্যগুলি যা সম্প্রতি চারটি প্রধান ব্রাউজারে পাঠানো হয়েছে৷
scrollbar-gutter এবং scrollbar-width
স্ক্রলবার-গটার সিএসএস সম্পত্তির সাহায্যে আপনি স্ক্রলবারটি প্রদর্শিত বা অদৃশ্য হয়ে গেলে অবাঞ্ছিত লেআউট পরিবর্তন এড়াতে স্ক্রলবারের জন্য একটি স্থান সংরক্ষণ করতে পারেন। স্ক্রলবার-প্রস্থের সাহায্যে আপনি একটি সংকীর্ণ স্ক্রলবার তৈরি করতে পারেন, এমনকি স্ক্রোলবারকে প্রভাবিত না করে সম্পূর্ণরূপে স্ক্রলবার লুকিয়ে রাখতে পারেন।
ruby-align
রুবি-সারিবদ্ধ সিএসএস প্রপার্টি দিয়ে আপনি রুবি বেস টেক্সট এবং রুবি টীকা লেখার সারিবদ্ধকরণ নির্দিষ্ট করতে পারেন।
Promise.try
Promise.try হল সিঙ্ক্রোনাস অনুরোধের জন্য ত্রুটি পরিচালনা করার একটি সুবিধাজনক পদ্ধতি। এটি ব্যবহার করে, আপনি যখন Promise.resolve-এর সাথে অনুরোধ করার চেষ্টা করেন তখন আপনি কলব্যাক ফাংশন বাদ দিতে পারেন।
ওয়াসম আবর্জনা সংগ্রহ এবং টেইল কল অপ্টিমাইজেশান
WebAssembly এখন আবর্জনা সংগ্রহ এবং টেল কল অপ্টিমাইজেশন সমর্থন করে।
বেসলাইন ব্যাপকভাবে উপলব্ধ
অ্যারে findLast() এবং findLastIndex()
অ্যারে findLast() এবং findLastIndex() একটি অ্যারের শেষ থেকে আইটেম পেতে খুব সুবিধাজনক পদ্ধতি। এই বৈশিষ্ট্যটি 30 মাস ধরে সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে, যার মানে এটি এখন বেসলাইন ব্যাপকভাবে উপলব্ধ৷
স্বতন্ত্র রূপান্তর বৈশিষ্ট্য
স্বতন্ত্র ট্রান্সফর্ম বৈশিষ্ট্য যা আপনাকে CSS রূপান্তরগুলির উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ দেয় এখন বেসলাইন ব্যাপকভাবে উপলব্ধ।
বেসলাইন সম্পর্কে আরও
আপনি যদি বেসলাইন সম্পর্কে আরও জানতে চান এবং নিউলি এবং ওয়াইডলি উপলব্ধের মধ্যে পার্থক্য জানতে চান, আমার তৈরি করা ছোট ভিডিওটি দেখুন।
আপনি ওয়েব প্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ডে একটি বৈশিষ্ট্যের বেসলাইন স্থিতি সম্পর্কে আরও জানতে পারেন!
ইন্টারপ প্রকল্প 2025 এর জন্য ফিরে এসেছে
এবং সবশেষে, ইন্টারপ প্রজেক্টটি 2025 এর জন্য ফিরে আসছে যার মধ্যে ফোকাস ক্ষেত্রগুলির একটি তালিকা সহ ভিউ ট্রানজিশন, CSS অ্যাঙ্কর পজিশনিং, এবং নেভিগেশন এপিআই। প্রকল্প ঘোষণা চেক আউট নিশ্চিত করুন!
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি মারিকো কোসাকা, এবং Chrome-এ নতুন কী আছে সে সম্পর্কে আরও জানাতে আমি তিন মাসের মধ্যে ফিরে আসব!
,বেশ কিছুক্ষণ হলো! নতুন ইন ক্রোম ভিডিও এই বিষয়ে তথ্য নিয়ে ফিরে এসেছে:
- CSS টেক্সট-বক্স , যা আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে সঠিকভাবে উল্লম্ব ব্যবধান নিয়ন্ত্রণ করতে দেয়।
- ফাইল সিস্টেম অ্যাক্সেস API যা এখন Android এবং ওয়েব ভিউতে সমর্থিত।
-
moveBeforeসাথে একটি DOM উপাদান সরানোর জন্য একটি রাষ্ট্র সংরক্ষণের উপায় । - হালকা খারিজ
<dialog>উপাদানে আসে। - এবং বেসলাইনে অনেক আপডেট আছে এবং আরও অনেক কিছু !
আমি মারিকো চলুন ডুব দিয়ে দেখি গত তিনটি রিলিজের জন্য Chrome-এ নতুন কী রয়েছে৷
CSS টেক্সট-বক্স
CSS text-box বৈশিষ্ট্য আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে উল্লম্ব ব্যবধানকে সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে দেয়।
প্রতিটি ফন্ট উপরে এবং অক্ষরগুলির নীচে একটি আলাদা পরিমাণ স্থান তৈরি করে, যা উপাদানটির আকার নির্ধারণ করে।
এখন পর্যন্ত এই স্থানগুলির আকার নিয়ন্ত্রণ করা অসম্ভব।
নতুন text-box-trim প্রপার্টি ট্রিম করার জন্য সাইডগুলিকে উপরে বা নীচে নির্দিষ্ট করে এবং text-box-edge প্রোপার্টি নির্দিষ্ট করে যে এটি কীভাবে ট্রিম করা উচিত। উদাহরণস্বরূপ, ক্যাপ উচ্চতায় ছাঁটা, যা বড় হাতের অক্ষরগুলির শীর্ষে।
আপনি শর্টহ্যান্ড text-box বৈশিষ্ট্য ব্যবহার করে এটি লিখতে পারেন।
সিএসএস text-box-trim নিবন্ধে এই নতুন বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও জানুন।
ফাইল সিস্টেম অ্যাক্সেস API
Chrome 133-এ যোগ করা হয়েছে, একটি DOM আদিম Node.prototype.moveBefore আপনাকে উপাদানের অবস্থা রিসেট না করেই একটি DOM গাছের চারপাশে উপাদানগুলি সরাতে দেয়৷
যখন আপনি মুছে ফেলুন, তারপর একটি DOM উপাদান সরানোর জন্য একটি উপাদান পুনরায় সন্নিবেশ করুন, এটি সেই উপাদানটির অবস্থা পুনরায় সেট করবে। এই নতুন আদিম ব্যবহার করে, একটি নোডের অবস্থা সংরক্ষিত হয়।
তাই iframes লোড থাকে, সক্রিয় উপাদানগুলি ফোকাসে থাকে, পপওভার এবং ডায়ালগের মতো জিনিসগুলি খোলা থাকে এবং CSS ট্রানজিশন বা অ্যানিমেশনগুলি চলতে থাকে।
একটি DOM উপাদান সরানোর জন্য রাষ্ট্র সংরক্ষণের উপায়
ফাইল সিস্টেম অ্যাক্সেস API কিছু সময়ের জন্য Chrome ডেস্কটপে উপলব্ধ রয়েছে। এই API ওয়েব অ্যাপগুলিকে ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমের ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ ক্রোম 132 থেকে, এপিআই অ্যান্ড্রয়েড এবং ওয়েবভিউতেও উপলব্ধ।
একটি ফাইল পড়তে, showOpenFilePicker() কল করুন। এই পদ্ধতিটি একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি ফাইলটি পড়ার জন্য ব্যবহার করতে পারেন।
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি আগে যে ফাইল হ্যান্ডেলটি পেয়েছিলেন সেটি ব্যবহার করতে পারেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন৷
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
হালকা খারিজ <dialog> উপাদানে আসে
আপনি যদি পপওভার এপিআই ব্যবহার করে থাকেন তাহলে আপনি জানেন যে পপওভার এপিআই এর একটি চমৎকার বৈশিষ্ট্য হল হালকা খারিজ আচরণ। ব্যবহারকারীরা ব্যাকগ্রাউন্ডে ক্লিক করতে পারেন এবং পপওভার উপাদানটি বিশেষভাবে বন্ধ বোতামে আঘাত না করে বন্ধ হয়ে যায়।
এই হালকা খারিজ ক্ষমতা এখন <dialog> উপাদানেও সমর্থিত!
আপনি যখন any closedby অ্যাট্রিবিউট সেট করেন, তখন ডায়ালগের বাইরে ক্লিক করে বা এস্কেপ কী টিপে ডায়ালগটি বাতিল করা যেতে পারে।
<dialog closedby="any">...</dialog>
যখন একটি পপওভার অটোতে সেট করা হয় তখন এটি একই আচরণ।
বেসলাইনে আপডেট
এবং, এখানে বেসলাইন সম্পর্কে খবর আছে
বেসলাইন নতুন উপলব্ধ
প্রথমত, বেসলাইন নতুনভাবে উপলব্ধ, এই বৈশিষ্ট্যগুলি যা সম্প্রতি চারটি প্রধান ব্রাউজারে পাঠানো হয়েছে৷
scrollbar-gutter এবং scrollbar-width
স্ক্রলবার-গটার সিএসএস সম্পত্তির সাহায্যে আপনি স্ক্রলবারটি প্রদর্শিত বা অদৃশ্য হয়ে গেলে অবাঞ্ছিত লেআউট পরিবর্তন এড়াতে স্ক্রলবারের জন্য একটি স্থান সংরক্ষণ করতে পারেন। স্ক্রলবার-প্রস্থের সাহায্যে আপনি একটি সংকীর্ণ স্ক্রলবার তৈরি করতে পারেন, এমনকি স্ক্রোলবারকে প্রভাবিত না করে সম্পূর্ণরূপে স্ক্রলবার লুকিয়ে রাখতে পারেন।
ruby-align
রুবি-সারিবদ্ধ সিএসএস প্রপার্টি দিয়ে আপনি রুবি বেস টেক্সট এবং রুবি টীকা লেখার সারিবদ্ধকরণ নির্দিষ্ট করতে পারেন।
Promise.try
Promise.try হল সিঙ্ক্রোনাস অনুরোধের জন্য ত্রুটি পরিচালনা করার একটি সুবিধাজনক পদ্ধতি। এটি ব্যবহার করে, আপনি যখন Promise.resolve-এর সাথে অনুরোধ করার চেষ্টা করেন তখন আপনি কলব্যাক ফাংশন বাদ দিতে পারেন।
ওয়াসম আবর্জনা সংগ্রহ এবং টেইল কল অপ্টিমাইজেশান
WebAssembly এখন আবর্জনা সংগ্রহ এবং টেল কল অপ্টিমাইজেশন সমর্থন করে।
বেসলাইন ব্যাপকভাবে উপলব্ধ
অ্যারে findLast() এবং findLastIndex()
অ্যারে findLast() এবং findLastIndex() একটি অ্যারের শেষ থেকে আইটেম পেতে খুব সুবিধাজনক পদ্ধতি। এই বৈশিষ্ট্যটি 30 মাস ধরে সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে, যার মানে এটি এখন বেসলাইন ব্যাপকভাবে উপলব্ধ৷
স্বতন্ত্র রূপান্তর বৈশিষ্ট্য
স্বতন্ত্র ট্রান্সফর্ম বৈশিষ্ট্য যা আপনাকে CSS রূপান্তরগুলির উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ দেয় এখন বেসলাইন ব্যাপকভাবে উপলব্ধ।
বেসলাইন সম্পর্কে আরও
আপনি যদি বেসলাইন সম্পর্কে আরও জানতে চান এবং নিউলি এবং ওয়াইডলি উপলব্ধের মধ্যে পার্থক্য জানতে চান, আমার তৈরি করা ছোট ভিডিওটি দেখুন।
আপনি ওয়েব প্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ডে একটি বৈশিষ্ট্যের বেসলাইন স্থিতি সম্পর্কে আরও জানতে পারেন!
ইন্টারপ প্রকল্প 2025 এর জন্য ফিরে এসেছে
এবং সবশেষে, ইন্টারপ প্রজেক্টটি 2025 এর জন্য ফিরে আসছে যার মধ্যে ফোকাস ক্ষেত্রগুলির একটি তালিকা সহ ভিউ ট্রানজিশন, CSS অ্যাঙ্কর পজিশনিং, এবং নেভিগেশন এপিআই। প্রকল্প ঘোষণা চেক আউট নিশ্চিত করুন!
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি মারিকো কোসাকা, এবং Chrome-এ নতুন কী আছে সে সম্পর্কে আরও জানাতে আমি তিন মাসের মধ্যে ফিরে আসব!
,বেশ কিছুক্ষণ হলো! নতুন ইন ক্রোম ভিডিও এই বিষয়ে তথ্য নিয়ে ফিরে এসেছে:
- CSS টেক্সট-বক্স , যা আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে সঠিকভাবে উল্লম্ব ব্যবধান নিয়ন্ত্রণ করতে দেয়।
- ফাইল সিস্টেম অ্যাক্সেস API যা এখন Android এবং ওয়েব ভিউতে সমর্থিত।
-
moveBeforeসাথে একটি DOM উপাদান সরানোর জন্য একটি রাষ্ট্র সংরক্ষণের উপায় । - হালকা খারিজ
<dialog>উপাদানে আসে। - এবং বেসলাইনে অনেক আপডেট আছে এবং আরও অনেক কিছু !
আমি মারিকো চলুন ডুব দিয়ে দেখি গত তিনটি রিলিজের জন্য Chrome-এ নতুন কী রয়েছে৷
CSS টেক্সট-বক্স
CSS text-box বৈশিষ্ট্য আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে উল্লম্ব ব্যবধানকে সুনির্দিষ্টভাবে নিয়ন্ত্রণ করতে দেয়।
প্রতিটি ফন্ট উপরে এবং অক্ষরগুলির নীচে একটি আলাদা পরিমাণ স্থান তৈরি করে, যা উপাদানটির আকার নির্ধারণ করে।
এখন পর্যন্ত এই স্থানগুলির আকার নিয়ন্ত্রণ করা অসম্ভব।
নতুন text-box-trim প্রপার্টি ট্রিম করার জন্য সাইডগুলিকে উপরে বা নীচে নির্দিষ্ট করে এবং text-box-edge প্রোপার্টি নির্দিষ্ট করে যে এটি কীভাবে ট্রিম করা উচিত। উদাহরণস্বরূপ, ক্যাপ উচ্চতায় ছাঁটা, যা বড় হাতের অক্ষরগুলির শীর্ষে।
আপনি শর্টহ্যান্ড text-box বৈশিষ্ট্য ব্যবহার করে এটি লিখতে পারেন।
সিএসএস text-box-trim নিবন্ধে এই নতুন বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও জানুন।
ফাইল সিস্টেম অ্যাক্সেস API
Chrome 133-এ যোগ করা হয়েছে, একটি DOM আদিম Node.prototype.moveBefore আপনাকে উপাদানের অবস্থা রিসেট না করেই একটি DOM গাছের চারপাশে উপাদানগুলি সরাতে দেয়৷
যখন আপনি মুছে ফেলুন, তারপর একটি DOM উপাদান সরানোর জন্য একটি উপাদান পুনরায় সন্নিবেশ করুন, এটি সেই উপাদানটির অবস্থা পুনরায় সেট করবে। এই নতুন আদিম ব্যবহার করে, একটি নোডের অবস্থা সংরক্ষিত হয়।
তাই iframes লোড থাকে, সক্রিয় উপাদানগুলি ফোকাসে থাকে, পপওভার এবং ডায়ালগের মতো জিনিসগুলি খোলা থাকে এবং CSS ট্রানজিশন বা অ্যানিমেশনগুলি চলতে থাকে।
একটি DOM উপাদান সরানোর জন্য রাষ্ট্র সংরক্ষণের উপায়
ফাইল সিস্টেম অ্যাক্সেস API কিছু সময়ের জন্য Chrome ডেস্কটপে উপলব্ধ রয়েছে। এই API ওয়েব অ্যাপগুলিকে ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমের ফাইলগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ ক্রোম 132 থেকে, এপিআই অ্যান্ড্রয়েড এবং ওয়েবভিউতেও উপলব্ধ।
একটি ফাইল পড়তে, showOpenFilePicker() কল করুন। এই পদ্ধতিটি একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি ফাইলটি পড়ার জন্য ব্যবহার করতে পারেন।
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি আগে যে ফাইল হ্যান্ডেলটি পেয়েছিলেন সেটি ব্যবহার করতে পারেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন৷
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
হালকা খারিজ <dialog> উপাদানে আসে
আপনি যদি একটি পপওভার করতে পপওভার API ব্যবহার করে থাকেন তবে আপনি জানেন যে পপওভার API-এর চমৎকার বৈশিষ্ট্যগুলির মধ্যে একটি হল হালকা খারিজ আচরণ। ব্যবহারকারীরা ব্যাকগ্রাউন্ডে ক্লিক করতে পারেন এবং পপওভার উপাদানটি বিশেষভাবে বন্ধ বোতামে আঘাত না করে বন্ধ হয়ে যায়।
এই হালকা খারিজ ক্ষমতা এখন <dialog> উপাদানেও সমর্থিত!
আপনি যখন any closedby অ্যাট্রিবিউট সেট করেন, তখন ডায়ালগের বাইরে ক্লিক করে বা এস্কেপ কী টিপে ডায়ালগটি বাতিল করা যেতে পারে।
<dialog closedby="any">...</dialog>
যখন একটি পপওভার অটোতে সেট করা হয় তখন এটি একই আচরণ।
বেসলাইনে আপডেট
এবং, এখানে বেসলাইন সম্পর্কে খবর আছে
বেসলাইন নতুন উপলব্ধ
প্রথমত, বেসলাইন নতুনভাবে উপলব্ধ, এই বৈশিষ্ট্যগুলি যা সম্প্রতি চারটি প্রধান ব্রাউজারে পাঠানো হয়েছে৷
scrollbar-gutter এবং scrollbar-width
স্ক্রলবার-গটার সিএসএস সম্পত্তির সাহায্যে আপনি স্ক্রলবারটি প্রদর্শিত বা অদৃশ্য হয়ে গেলে অবাঞ্ছিত লেআউট পরিবর্তন এড়াতে স্ক্রলবারের জন্য একটি স্থান সংরক্ষণ করতে পারেন। স্ক্রলবার-প্রস্থের সাহায্যে আপনি একটি সংকীর্ণ স্ক্রলবার তৈরি করতে পারেন, এমনকি স্ক্রোলবারকে প্রভাবিত না করে সম্পূর্ণরূপে স্ক্রলবার লুকিয়ে রাখতে পারেন।
ruby-align
রুবি-সারিবদ্ধ সিএসএস প্রপার্টি দিয়ে আপনি রুবি বেস টেক্সট এবং রুবি টীকা লেখার সারিবদ্ধকরণ নির্দিষ্ট করতে পারেন।
Promise.try
Promise.try হল সিঙ্ক্রোনাস অনুরোধের জন্য ত্রুটি পরিচালনা করার একটি সুবিধাজনক পদ্ধতি। এটি ব্যবহার করে, আপনি যখন Promise.resolve-এর সাথে অনুরোধ করার চেষ্টা করেন তখন আপনি কলব্যাক ফাংশন বাদ দিতে পারেন।
ওয়াসম আবর্জনা সংগ্রহ এবং টেইল কল অপ্টিমাইজেশান
WebAssembly এখন আবর্জনা সংগ্রহ এবং টেল কল অপ্টিমাইজেশন সমর্থন করে।
বেসলাইন ব্যাপকভাবে উপলব্ধ
অ্যারে findLast() এবং findLastIndex()
অ্যারে findLast() এবং findLastIndex() একটি অ্যারের শেষ থেকে আইটেম পেতে খুব সুবিধাজনক পদ্ধতি। এই বৈশিষ্ট্যটি 30 মাস ধরে সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে, যার মানে এটি এখন বেসলাইন ব্যাপকভাবে উপলব্ধ৷
স্বতন্ত্র রূপান্তর বৈশিষ্ট্য
স্বতন্ত্র ট্রান্সফর্ম বৈশিষ্ট্য যা আপনাকে CSS রূপান্তরগুলির উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ দেয় এখন বেসলাইন ব্যাপকভাবে উপলব্ধ।
বেসলাইন সম্পর্কে আরও
আপনি যদি বেসলাইন সম্পর্কে আরও জানতে চান এবং নিউলি এবং ওয়াইডলি উপলব্ধের মধ্যে পার্থক্য জানতে চান, আমার তৈরি করা ছোট ভিডিওটি দেখুন।
আপনি ওয়েব প্ল্যাটফর্ম স্ট্যাটাস ড্যাশবোর্ডে একটি বৈশিষ্ট্যের বেসলাইন স্থিতি সম্পর্কে আরও জানতে পারেন!
ইন্টারপ প্রকল্প 2025 এর জন্য ফিরে এসেছে
এবং সবশেষে, ইন্টারপ প্রজেক্টটি 2025 এর জন্য ফিরে আসছে যার মধ্যে ফোকাস ক্ষেত্রগুলির একটি তালিকা সহ ভিউ ট্রানজিশন, CSS অ্যাঙ্কর পজিশনিং, এবং নেভিগেশন এপিআই। প্রকল্প ঘোষণা চেক আউট নিশ্চিত করুন!
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি মারিকো কোসাকা, এবং Chrome-এ নতুন কী আছে সে সম্পর্কে আরও জানাতে আমি তিন মাসের মধ্যে ফিরে আসব!