আগস্টে ওয়েব প্ল্যাটফর্মে নতুন

2022 সালের আগস্টে স্থিতিশীল এবং বিটা ওয়েব ব্রাউজারে আসা কিছু আকর্ষণীয় বৈশিষ্ট্য আবিষ্কার করুন।

Rachel Andrew

স্থিতিশীল ব্রাউজার রিলিজ

আগস্টে, ফায়ারফক্স 104 , ক্রোম 104 , এবং ক্রোম 105 স্থিতিশীল হয়ে ওঠে।

স্বতন্ত্র রূপান্তর

ক্রোম 104 সিএসএস ট্রান্সফর্মের জন্য পৃথক বৈশিষ্ট্য অন্তর্ভুক্ত করে। বৈশিষ্ট্যগুলি হল scale , rotate এবং translate , যা আপনি একটি রূপান্তরের অংশগুলিকে পৃথকভাবে সংজ্ঞায়িত করতে ব্যবহার করতে পারেন।

এটি করার মাধ্যমে, Chrome Firefox এবং Safari-এ যোগ দেয় যা ইতিমধ্যেই এই বৈশিষ্ট্যগুলিকে সমর্থন করে৷

নতুন মিডিয়া ক্যোয়ারী সিনট্যাক্স

Chrome 104-এ মিডিয়া ক্যোয়ারী রেঞ্জ সিনট্যাক্সও রয়েছে। এটি ইতিমধ্যেই ফায়ারফক্স দ্বারা পাঠানো হয়েছে, এবং মিডিয়া প্রশ্নগুলিকে স্ট্রিমলাইন করতে সহায়তা করে৷ উদাহরণস্বরূপ নিম্নলিখিত মিডিয়া ক্যোয়ারী:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

তুলনা অপারেটর ব্যবহার করে লেখা যেতে পারে:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

ধারক প্রশ্ন

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

কন্টেইনার কোয়েরি ব্যবহার করতে, container-type প্রপার্টি ব্যবহার করে কন্টেনমেন্ট চালু করুন।

.card-container {
  container-type: inline-size;
}

inline-size container-type সেট করা প্যারেন্টের ইনলাইন-দিক-নির্দেশের আকারের প্রশ্ন করে। ইংরেজির মতো ল্যাটিন ভাষায়, এটি কার্ডের প্রস্থ হবে, যেহেতু পাঠ্যটি বাম থেকে ডানে ইনলাইনে প্রবাহিত হয়।

এখন, আমরা @container ব্যবহার করে তার যেকোনো বাচ্চার জন্য শৈলী প্রয়োগ করতে সেই পাত্রটি ব্যবহার করতে পারি:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

আপনি @container এবং :has(): Chromium 105-এ দুটি শক্তিশালী নতুন প্রতিক্রিয়াশীল API ল্যান্ডিং পোস্টে কন্টেইনার কোয়েরি সম্পর্কে আরও জানতে পারেন।

:has() প্যারেন্ট সিউডো-ক্লাস

উপরে উল্লিখিত পোস্টে উল্লেখ করা হয়েছে :has() । এই নতুন ছদ্ম-শ্রেণী CSS :has() pseudo-class আপনাকে শর্তের উপর ভিত্তি করে পিতামাতার উপাদান এবং ভাইবোনদের লক্ষ্য করার একটি উপায় দেয়। পরিবার নির্বাচক :has()- এ আরও জানুন।

স্যানিটাইজার API

এছাড়াও Chrome 105-এ রয়েছে স্যানিটাইজার API । এই API ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতা দূর করতে সাহায্য করার জন্য প্ল্যাটফর্মে স্যানিটাইজেশন তৈরি করে।

এছাড়াও Chrome 105-এ রয়েছে :modal CSS pseudo-class। এটি এমন একটি উপাদানের সাথে মেলে যা এমন অবস্থায় রয়েছে যেখানে এটি এর বাইরের উপাদানগুলির সাথে সমস্ত মিথস্ক্রিয়া বাদ দেয়। উদাহরণস্বরূপ, showModal() API এর সাথে একটি <dialog> খোলা হয়েছে।

FindLast() এবং findLastIndex() পদ্ধতি

Firefox 104 Array.prototype.findLast() , Array.prototype.findLastIndex() , TypedArray.prototype.findLast() এবং TypedArray.prototype.findLastIndex() পদ্ধতিগুলির জন্য একটি পতাকার পিছনে সমর্থন যোগ করে। এগুলি একটি সরবরাহকৃত পরীক্ষার ফাংশনের সাথে মেলে এমন একটি অ্যারে বা TypedArray-এর শেষ উপাদানটির মান এবং সূচক (যথাক্রমে) খুঁজে পেতে ব্যবহৃত হয়।

বিটা ব্রাউজার রিলিজ

বিটা ব্রাউজার সংস্করণগুলি আপনাকে সেই জিনিসগুলির একটি পূর্বরূপ দেয় যা ব্রাউজারের পরবর্তী স্থিতিশীল সংস্করণে থাকবে৷ নতুন বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য এটি একটি দুর্দান্ত সময়, বা অপসারণ, যা বিশ্ব এই প্রকাশ পাওয়ার আগে আপনার সাইটকে প্রভাবিত করতে পারে৷

মুক্তির তারিখগুলি মাসের বাইরে পড়ার কারণে, আগস্টে একমাত্র নতুন বিটা ছিল Firefox 105 , যা বর্তমানে বিশদ বিবরণে হালকা।

জুনে উল্লিখিত সাফারি 16 বিটা এখনও চলছে।

ওয়েব সিরিজের নতুন অংশ