Chrome 105-এ নতুন

পিট লেপেজ

আপনার যা জানা দরকার তা এখানে:

আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 105-এ ডেভেলপারদের জন্য নতুন কী আছে।

কন্টেইনার প্রশ্ন এবং :has() CSS প্রপার্টি

কনটেইনার ক্যোয়ারী, সর্বাধিক অনুরোধ করা বৈশিষ্ট্যগুলির মধ্যে একটি হল Chrome 105-এ অবতরণ করা৷ তারা বিকাশকারীদেরকে এর আকার এবং স্টাইলিং তথ্যের জন্য একটি অভিভাবক নির্বাচককে জিজ্ঞাসা করতে সক্ষম করে, এটি একটি শিশু উপাদানের পক্ষে তার প্রতিক্রিয়াশীল স্টাইলিং যুক্তির মালিক হওয়া সম্ভব করে তোলে, সে যেখানেই থাকুক না কেন একটি পৃষ্ঠায়

তারা একটি @media ক্যোয়ারী অনুরূপ, ব্যতীত তারা ভিউপোর্টের আকারের পরিবর্তে একটি কন্টেইনারের আকারের বিপরীতে মূল্যায়ন করে।

কন্টেইনার ক্যোয়ারী বনাম মিডিয়া ক্যোয়ারী।

কন্টেইনার ক্যোয়ারী ব্যবহার করতে, আপনাকে একটি প্যারেন্ট এলিমেন্টে কনটেইনমেন্ট সেট করতে হবে। উদাহরণস্বরূপ, আপনার কাছে একটি ছবি এবং কিছু পাঠ্য সহ একটি কার্ড থাকতে পারে৷

একক দুই কলামের কার্ড।

একটি কন্টেইনার ক্যোয়ারী তৈরি করতে, কার্ড কন্টেইনারে container-type সেট করুন। inline-size -আকারে container-type সেট করা প্যারেন্টের inline-direction আকারকে জিজ্ঞাসা করে।

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

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

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

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

এই ক্ষেত্রে, যখন ধারকটি 400px-এর কম হয়, তখন এটি একটি একক কলাম লেআউটে চলে যায়।

CSS :has() ছদ্ম-শ্রেণী

আমরা CSS :has() pseudo-class দিয়ে এটিকে আরও এক ধাপ এগিয়ে নিতে পারি। এটি আপনাকে একটি অভিভাবক উপাদানে নির্দিষ্ট পরামিতি সহ শিশু রয়েছে কিনা তা পরীক্ষা করার অনুমতি দেয়।

উদাহরণস্বরূপ, p:has(span) একটি অনুচ্ছেদ নির্বাচককে নির্দেশ করে যার ভিতরে একটি স্প্যান রয়েছে। আপনি এটি ব্যবহার করতে পারেন প্যারেন্ট অনুচ্ছেদ নিজেই স্টাইল করতে, বা এটির মধ্যে যেকোনো কিছু। অথবা, আপনি figure:has(figcaption) ব্যবহার করতে পারেন এমন একটি চিত্রের উপাদান যাতে একটি ক্যাপশন রয়েছে।

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

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

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

বেশিরভাগ ওয়েব অ্যাপগুলি প্রায়শই অবিশ্বস্ত স্ট্রিংগুলির সাথে মোকাবিলা করে, তবে সেই সামগ্রীটিকে নিরাপদে রেন্ডার করা কঠিন হতে পারে৷ পর্যাপ্ত যত্ন ছাড়া, ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতার জন্য ঘটনাক্রমে সুযোগ তৈরি করা সহজ।

DomPurify- এর মতো লাইব্রেরি আছে যা সাহায্য করে, কিন্তু রক্ষণাবেক্ষণের একটি ছোট বোঝা যোগ করে। HTML স্যানিটাইজার API প্লাটফর্মে স্যানিটাইজেশন তৈরি করে ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতার সংখ্যা কমাতে সাহায্য করে।

এটি ব্যবহার করতে, স্যানিটাইজারের একটি নতুন উদাহরণ তৈরি করুন। তারপরে, আপনি যে উপাদানটিতে স্যানিটাইজড সামগ্রী সন্নিবেশ করতে চান তাতে setHTML() কল করুন।

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

স্যানিটাইজার API ডিফল্টভাবে নিরাপদ এবং কাস্টমাইজ করার জন্য ডিজাইন করা হয়েছে, যা আপনাকে বিভিন্ন কনফিগার বিকল্প নির্দিষ্ট করতে দেয়, উদাহরণস্বরূপ কিছু উপাদান বাদ দেওয়া বা অন্যদের অনুমতি দেওয়া।

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

আরও বিশদ বিবরণের জন্য স্যানিটাইজার API এর সাথে নিরাপদ DOM ম্যানিপুলেশন দেখুন।

অ-সুরক্ষিত প্রসঙ্গগুলির জন্য ওয়েব SQL অবমূল্যায়ন করা হচ্ছে

কিছু সময় আগে, আমরা ওয়েব SQL অবমূল্যায়ন করার আমাদের পরিকল্পনা ঘোষণা করেছি। ক্রোম 105 থেকে শুরু করে, অ-সুরক্ষিত প্রেক্ষাপটে ওয়েব এসকিউএল বাতিল করা হবে।

আপনি যদি অ-সুরক্ষিত প্রেক্ষাপটে ওয়েব এসকিউএল ব্যবহার করেন, আপনার যত তাড়াতাড়ি সম্ভব IndexDB বা অন্য স্থানীয় স্টোরেজ কন্টেনারে স্থানান্তর করা উচিত।

এবং আরো!

অবশ্যই আরো অনেক আছে.

  • আপনি এখন ওয়েব অ্যাপ ম্যানিফেস্ট আপডেট করে ডেস্কটপ এবং মোবাইল উভয়েই ইনস্টল করা PWA-এর নাম আপডেট করতে পারেন।
  • মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API সঠিক স্ক্রিন নামের লেবেল পায়।
  • উইন্ডো নিয়ন্ত্রণ ওভারলে API এখন উপলব্ধ. এটি একটি ছোট ওভারলের জন্য বিদ্যমান পূর্ণ-প্রস্থ শিরোনাম বারটি অদলবদল করে PWA-গুলিকে আরও অ্যাপের মতো অনুভূতি প্রদান করতে দেয়। এটি আপনাকে শিরোনাম বার এলাকায় কাস্টম বিষয়বস্তু স্থাপন করতে দেয়।

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 105-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

সাবস্ক্রাইব

আপ টু ডেট থাকার জন্য, Chrome Developers YouTube চ্যানেলে সাবস্ক্রাইব করুন , এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

আমি পিট লেপেজ, এবং ক্রোম 106 রিলিজ হওয়ার সাথে সাথেই আমরা আপনাকে জানাতে এখানে থাকব যে Chrome-এ নতুন কী আছে!