Chrome 133-এ নতুন

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

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

CSS উন্নত attr() ফাংশন

এই বৈশিষ্ট্যটি বিদ্যমান attr() ফাংশনে যোগ করে, CSS লেভেল 5-এ নির্দিষ্ট বৈশিষ্ট্যগুলি। এটি <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 স্ক্রোল স্টেট কোয়েরিতে কিছু ডেমো দেখুন।

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

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

এবং আরো!

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

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

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

আরও পড়া

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

সদস্যতা

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

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