ক্রোম ১৫৪-এর নতুন ফিচার

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

প্রকাশিত: ২২ সেপ্টেম্বর, ২০২৬

ক্রোম ১৫৪ এখন চালু হচ্ছে, এবং এই পোস্টে রিলিজটির কিছু প্রধান ফিচার তুলে ধরা হয়েছে। ক্রোম ১৫৪-এর সম্পূর্ণ রিলিজ নোট পড়ুন।

এই রিলিজের উল্লেখযোগ্য দিকগুলো:

  • রেসপন্সিভলি-সাইজড <iframe> একটি <iframe> কে তার এমবেড করা ডকুমেন্টের অন্তর্নিহিত আকারের উপর ভিত্তি করে নিজের আকার নির্ধারণ করতে দেয়।
  • CSS scroll-marker-group modes ফাংশনটি স্ক্রল মার্কারের ফোকাস ক্রম এবং অ্যাক্সেসিবিলিটি সিম্যান্টিকস কনফিগার করার জন্য links এবং tabs মোড যোগ করে।
  • CSS text-decoration-inset আপনাকে টেক্সট ডেকোরেশনের শুরু এবং শেষ বিন্দু সামঞ্জস্য করতে দেয়।

প্রতিক্রিয়াশীল আকারের <iframe>

ক্রোম ১৫৪ রেসপন্সিভলি-সাইজড আইফ্রেমের জন্য সমর্থন যোগ করেছে, যা প্যারেন্ট ডকুমেন্টের একটি <iframe> এলিমেন্টকে এমবেড করা ডকুমেন্টের লেআউট ওভারফ্লো সাইজিং অনুযায়ী নিজের আকার পরিবর্তন করতে দেয়, ফলে চাইল্ড ডকুমেন্টে স্ক্রলিং এড়ানো যায়। এটি সেই পুরোনো পদ্ধতিকে প্রতিস্থাপন করে, যেখানে আপনাকে ম্যানুয়ালি আইফ্রেমের কন্টেন্ট পরিমাপ করতে হতো, postMessage() এর মাধ্যমে মাপ পাঠাতে হতো এবং এমবেডিং পেজে আইফ্রেমের আকার আপডেট করতে হতো।

একটি আইফ্রেমকে তার কন্টেন্টের উচ্চতার সমান আকারে আনতে, এমবেডিং পেজের <iframe> এলিমেন্টে frame-sizing CSS প্রপার্টিটি ব্যবহার করুন:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

এমবেড করা ডকুমেন্টটিকেও তার <head> ট্যাগে একটি <meta name="responsive-embedded-sizing"> এলিমেন্ট অন্তর্ভুক্ত করে এই অপশনটি বেছে নিতে হবে:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

আরও বিস্তারিত তথ্য ও ডেমোর জন্য, Chrome 154-এ রেসপন্সিভ আইফ্রেম দেখুন।

CSS scroll-marker-group মোড

scroll-marker-group প্রপার্টিটি নিয়ন্ত্রণ করে যে একটি স্ক্রল কন্টেইনার তার কন্টেন্টের আগে নাকি পরে একটি ::scroll-marker-group সিউডো-এলিমেন্ট তৈরি করবে। ক্রোম ১৫৪ ` scroll-marker-group দুটি মোড দিয়ে উন্নত করেছে, যা ::scroll-marker-group এবং ::scroll-marker এর ফোকাস অর্ডার এবং WAI-ARIA অ্যাক্সেসিবিলিটি সিম্যান্টিকস নির্ধারণ করে।

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

CSS text-decoration-inset

ডিফল্টরূপে, একটি এলিমেন্টের টেক্সট ডেকোরেশন (যেমন আন্ডারলাইন, ওভারলাইন বা লাইন-থ্রু) রেন্ডার করা টেক্সটের সমান দৈর্ঘ্যের হয়। text-decoration-inset CSS প্রপার্টিটি আপনাকে একটি এলিমেন্টের টেক্সট ডেকোরেশনের শুরু এবং শেষের বিন্দু সামঞ্জস্য করতে দেয়, যাতে এটি টেক্সট রান এজ থেকে ভেতরের দিকে থাকে, এর বাইরে প্রসারিত হয়, বা এর সাপেক্ষে স্থানান্তরিত হয়।

text-decoration-inset এক-মান বা দুই-মান সিনট্যাক্স ব্যবহার করে auto , length, এবং percentage ভ্যালু গ্রহণ করে; উদাহরণস্বরূপ, উভয় প্রান্ত 10px করে ইনসেট করতে:

text-decoration-inset: 10px;

ধনাত্মক মান ডেকোরেশনকে ভেতরের দিকে (ছোট করে) এবং ঋণাত্মক মান ডেকোরেশনকে বাইরের দিকে (লম্বা করে) স্থাপন করে। এর ফলে আপনি ডেকোরেশনের ব্যবধান সূক্ষ্মভাবে নিয়ন্ত্রণ করতে পারেন এবং ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট বা অতিরিক্ত এলিমেন্টের পরিবর্তে CSS টেক্সট ডেকোরেশন ব্যবহার করে অ্যানিমেটেড আন্ডারলাইন রিভিল ইফেক্ট তৈরি করতে পারেন।

আরও তথ্যের জন্য, MDN-এ text-decoration-inset ডকুমেন্টেশন দেখুন।

আরও পড়ুন

এখানে কেবল কিছু গুরুত্বপূর্ণ বিষয় তুলে ধরা হয়েছে। ক্রোম ১৫৪-এর অতিরিক্ত পরিবর্তনগুলোর জন্য নিচের লিঙ্কগুলো দেখুন:

সাবস্ক্রাইব করুন

সর্বশেষ খবরাখবর পেতে Chrome Developers YouTube চ্যানেলটি সাবস্ক্রাইব করুন, এবং আমরা যখনই কোনো নতুন ভিডিও প্রকাশ করব, আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন। অথবা নতুন আর্টিকেল এবং ব্লগ পোস্টের জন্য X বা LinkedIn-এ আমাদের অনুসরণ করুন।

ক্রোম ১৫৫ প্রকাশিত হওয়া মাত্রই, ক্রোমে নতুন কী কী এসেছে তা জানাতে আমরা এখানেই থাকব!