আপনার যা জানা দরকার তা এখানে:
- ক্রোম এবং ফায়ারফক্সের 100 সংস্করণের গণনা মাত্র কয়েক সপ্তাহ বাকি।
- CSS ক্যাসকেড স্তরগুলি আপনাকে আপনার CSS এর উপর আরও নিয়ন্ত্রণ দেয় এবং শৈলী-নির্দিষ্টতার দ্বন্দ্ব প্রতিরোধ করতে সহায়তা করে।
-
showPicker()পদ্ধতি আপনাকেdate,colorএবংdatalistমতো<input>উপাদানগুলির জন্য একটি ব্রাউজার পিকার প্রোগ্রাম্যাটিকভাবে দেখাতে দেয়। - এবং আরো অনেক আছে.
আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 99-এ ডেভেলপারদের জন্য নতুন কী রয়েছে৷
ক্রোম 100 এবং ফায়ারফক্স 100
ক্রোম 100 মার্চের শেষের দিকে (2022) এবং ফায়ারফক্স 100 মে মাসের শুরুর কিছু পরেই জাহাজে করে। এই দুটিই একটি প্রধান সংস্করণ নম্বর মাইলফলক এবং তিনটি সংখ্যায় রোল ওভার। কিন্তু, যদি আপনার কোড দুটি সংখ্যার প্রত্যাশা করে, নতুন সংস্করণ নম্বরটি আপনার জন্য সমস্যার কারণ হতে পারে।
যেকোন কোড যা ভার্সন নম্বর চেক করে বা ইউজার এজেন্ট স্ট্রিং পার্স করে তাতে কোনো সমস্যা নেই তা নিশ্চিত করতে চেক করা উচিত।
Chrome-এ, #force-major-version-to-100 ফ্ল্যাগ বর্তমান সংস্করণ নম্বর 100 এ পরিবর্তন করবে।
এবং Firefox Nightly এর সেটিংস মেনুতে, আপনি "Firefox 100 User-Agent String" বিকল্পটি সক্রিয় করতে পারেন। আপনার সাইটটি পরীক্ষা করা একটি ভাল ধারণা যাতে আপনি নিশ্চিত করতে পারেন যে সবকিছু প্রত্যাশিতভাবে কাজ করছে৷
সম্পূর্ণ বিবরণের জন্য প্রধান সংস্করণ 100-এ পৌঁছানোর জন্য শীঘ্রই Chrome এবং Firefox দেখুন।
CSS ক্যাসকেড স্তরসমূহ
CSS ক্যাসকেড স্তরগুলির জন্য সমর্থন এবং CSS @layer নিয়মটি Chrome 99-এ অবতরণ করছে৷ তারা শৈলী-নির্দিষ্টতা দ্বন্দ্ব প্রতিরোধ করতে আপনার CSS ফাইলগুলির আরও স্পষ্ট নিয়ন্ত্রণ প্রদান করে৷ এটি বিশেষ করে বড় কোডবেস, ডিজাইন সিস্টেম এবং অ্যাপ্লিকেশনগুলিতে তৃতীয় পক্ষের শৈলী পরিচালনা করার জন্য দরকারী।
তারা CSS ক্যাসকেডে একটি নতুন স্তর প্রবর্তন করে। স্তরযুক্ত শৈলীর সাথে, একটি স্তরের অগ্রাধিকার সর্বদা একটি নির্বাচকের নির্দিষ্টতাকে হারায়।
আপনি যদি একটি লিঙ্ক স্টাইল করার চেষ্টা করেন, একটি .card ভিতরে, একটি .post এর মধ্যে আপনি দেখতে পাবেন যে আরও নির্দিষ্ট নির্বাচক প্রয়োগ করা হবে৷ @layer নিয়মটি ব্যবহার করে, আপনি প্রত্যেকটির শৈলীর নির্দিষ্টতা সম্পর্কে আরও স্পষ্ট হতে পারেন এবং নিশ্চিত করুন যে আপনার কার্ডের লিঙ্ক শৈলী, আপনার পোস্টের লিঙ্ক শৈলীকে ওভাররাইড করে।
@layer base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
এটি ক্যাসকেড প্রাধান্যের কারণে। স্তরযুক্ত শৈলী নতুন ক্যাসকেড প্লেন তৈরি করে।
CSS @layer নিয়ম ব্যবহার করে ক্যাসকেড স্তরগুলি Chrome 99, Firefox 97, এবং Safari 15.4 বিটাতে সমর্থিত। আরও তথ্যের জন্য ক্যাসকেড স্তরগুলি আপনার ব্রাউজারে আসছে দেখুন।
ইনপুট উপাদানের জন্য showPicker()
দীর্ঘ সময়ের জন্য, আমাদের একটি ডেট পিকার দেখানোর জন্য কাস্টম উইজেট লাইব্রেরি বা হ্যাকগুলি অবলম্বন করতে হয়েছিল৷ HTML InputElements এ একটি নতুন showPicker() পদ্ধতি রয়েছে। এটি একটি ব্রাউজার পিকার দেখানোর ক্যানোনিকাল উপায়, শুধুমাত্র date জন্য নয়, time , color এবং অন্যান্য <input> উপাদানগুলিও পিকার সহ।
এটি ব্যবহার করতে, <input> উপাদানে showPicker() কল করুন। এই উদাহরণে, আমি এটি একটি try…catch ব্লক। এটি আমাকে একটি ফলব্যাক প্রদান করতে দেয়, যদি ব্রাউজারটি API সমর্থন না করে, বা পিকারটি দেখাতে না পারে। এইভাবে, ব্যবহারকারীরা এখনও একটি ভাল অভিজ্ঞতা পান তা নিশ্চিত করা।
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use an external library when this fails.
}
});
সম্পূর্ণ বিশদ বিবরণের জন্য তারিখ, সময়, রঙ এবং ফাইলগুলির জন্য একটি ব্রাউজার পিকার দেখান এবং সমস্ত বিভিন্ন <input> প্রকারের জন্য আপনি showPicker() ব্যবহার করতে পারেন দেখুন।
এবং আরো!
অবশ্যই আরো অনেক আছে.
Canvas2D API আপডেট করা হয়েছে, নতুন কার্যকারিতা যোগ করে, যার মধ্যে রয়েছে:
-
ContextLostএবংContextRestoredজন্য দুটি নতুন ইভেন্ট - একটি
willReadFrequentlyবিকল্প - আরও CSS পাঠ্য সংশোধক সমর্থন
- এবং আরো
ডার্ক মোডের জন্য ওয়েব অ্যাপ ম্যানিফেস্টে PWAs-কে বিকল্প রং দেওয়ার অনুমতি দেওয়ার জন্য একটি নতুন অরিজিন ট্রায়াল রয়েছে।
এবং হস্তাক্ষর স্বীকৃতি API এখন অবতরণ করেছে।
আরও পড়া
এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 99-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷
- Chrome DevTools এ নতুন কি আছে (99)
- Chrome 99 অবচয় এবং অপসারণ
- Chrome 99-এর জন্য ChromeStatus.com আপডেট
- Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা
- ক্রোম রিলিজ ক্যালেন্ডার
সদস্যতা
আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷
আমি পিট লেপেজ, এবং ক্রোম 100 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব যে Chrome-এ নতুন কি আছে!