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

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

Rachel Andrew

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

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

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

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

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

ব্রাউজার সমর্থন

• 104
• 104
• 72
• 14.1

উৎস

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

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.
}

ব্রাউজার সমর্থন

• 104
• 104
• 102
• 16.4

উৎস

ধারক প্রশ্ন

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

ব্রাউজার সমর্থন

• 105
• 105
• 110
• 16

উৎস

কন্টেইনার কোয়েরি ব্যবহার করতে, 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()- এ আরও জানুন।

ব্রাউজার সমর্থন

• 105
• 105
• 121
• 15.4

উৎস

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

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

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

ব্রাউজার সমর্থন

• 105
• 105
• 103
• 15.6

উৎস

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

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

ব্রাউজার সমর্থন

• 97
• 97
• 104
• 15.4

উৎস

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

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

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

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

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