Chrome 133-এ নতুন

র‍্যাচেল অ্যান্ড্রু

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

CSS অ্যাডভান্সড attr() ফাংশন

এই বৈশিষ্ট্যটি বিদ্যমান attr() ফাংশনে যোগ করে, যা CSS লেভেল ৫-এ উল্লেখিত বৈশিষ্ট্য। এটি <string> ছাড়াও টাইপ এবং সমস্ত CSS বৈশিষ্ট্যে (ছদ্ম-উপাদান সামগ্রীর জন্য বিদ্যমান সমর্থন ছাড়াও) ব্যবহারের অনুমতি দেয়।

নিচের উদাহরণে div এর জন্য color প্রোপার্টির মান data-color অ্যাট্রিবিউট থেকে প্রাপ্ত মান ব্যবহার করে। এই অ্যাট্রিবিউট মানটি attr() এবং type() ব্যবহার করে একটি <color> এ পার্স করা হয়। ফলব্যাক মানটি red এ সেট করা হয়।

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

CSS সম্পর্কে আরও জানুন attr() একটি আপগ্রেড পায় ।

CSS স্ক্রোল স্টেট কন্টেইনার কোয়েরি

কন্টেইনারের স্ক্রোল অবস্থার উপর ভিত্তি করে ডিসেন্ডেন্টদের স্টাইল করতে কন্টেইনার কোয়েরি ব্যবহার করুন।

কোয়েরি কন্টেইনারটি হয় একটি স্ক্রোল কন্টেইনার, অথবা একটি স্ক্রোল কন্টেইনারের স্ক্রোল অবস্থান দ্বারা প্রভাবিত একটি উপাদান। নিম্নলিখিত অবস্থাগুলি জিজ্ঞাসা করা যেতে পারে:

  • stuck : স্ক্রোল বাক্সের এক প্রান্তে একটি আঠালো অবস্থানযুক্ত পাত্র আটকে আছে।
  • snapped : একটি স্ক্রল স্ন্যাপ অ্যালাইনড কন্টেইনার বর্তমানে অনুভূমিকভাবে বা উল্লম্বভাবে স্ন্যাপ করা হয়।
  • scrollable : একটি স্ক্রোল কন্টেইনারকে জিজ্ঞাসা করা দিকে স্ক্রোল করা যাবে কিনা।

একটি নতুন কন্টেইনার-টাইপ: scroll-state কন্টেইনারগুলিকে জিজ্ঞাসা করতে দেয়। উদাহরণস্বরূপ:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

আরও জানুন এবং CSS স্ক্রোল স্টেট কোয়েরিতে কিছু ডেমো দেখুন।

সিএসএস text-box , text-box-trim , এবং text-box-edge

text-box-trim প্রপার্টি কোন দিকগুলো ছাঁটাই করতে হবে তা উপরে বা নীচে উল্লেখ করে, এবং text-box-edge প্রপার্টিটি প্রান্তটি কীভাবে ছাঁটাই করতে হবে তা নির্দিষ্ট করে।

এই বৈশিষ্ট্যগুলি আপনাকে ফন্ট মেট্রিক্স ব্যবহার করে উল্লম্ব ব্যবধান সঠিকভাবে নিয়ন্ত্রণ করতে দেয়।

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

CSS text-box-trim এ এই নতুন বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করবেন তা জানুন।

এবং আরও!

অবশ্যই আরও অনেক কিছু আছে।

  • Animation.overallProgress আপনাকে একটি সুবিধাজনক এবং ধারাবাহিক উপস্থাপনা দেয় যে একটি অ্যানিমেশন তার পুনরাবৃত্তি জুড়ে কতটা এগিয়েছে এবং তার সময়রেখার প্রকৃতি নির্বিশেষে।
  • Node.prototype.moveBefore আপনাকে একটি DOM ট্রির চারপাশে উপাদানগুলি সরাতে দেয়, উপাদানটির অবস্থা রিসেট না করেই।
  • FileSystemObserver ইন্টারফেস ওয়েবসাইটগুলিকে ফাইল সিস্টেমের পরিবর্তন সম্পর্কে অবহিত করে।
  • PublicKeyCredential getClientCapabilities() পদ্ধতি আপনাকে নির্ধারণ করতে দেয় যে ব্যবহারকারীর ক্লায়েন্ট কোন WebAuthn বৈশিষ্ট্যগুলি সমর্থিত।

Chrome-এ নতুন এই এবং আরও অনেক বৈশিষ্ট্যের বিস্তারিত জানতে সম্পূর্ণ Chrome 133 রিলিজ নোট দেখুন!

আরও পড়া

এটি শুধুমাত্র কিছু গুরুত্বপূর্ণ বিষয় নিয়ে আলোচনা করে। Chrome 133-তে অতিরিক্ত পরিবর্তনের জন্য নিম্নলিখিত লিঙ্কগুলি দেখুন।

সাবস্ক্রাইব

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

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