বেসলাইন বৈশিষ্ট্য আপনি আজ ব্যবহার করতে পারেন

বেসলাইনের অংশ মাত্র কিছু বৈশিষ্ট্য সম্পর্কে জানুন।

Mariko Kosaka

ওয়েব সর্বদা বিকশিত হচ্ছে এবং প্ল্যাটফর্মে উদ্ভাবনের জন্য বিকাশকারীদের নতুন টুল দেওয়ার জন্য ব্রাউজারগুলি ক্রমাগত আপডেট করে। যে জিনিসগুলি আগে সাহায্যকারী লাইব্রেরিগুলির প্রয়োজন ছিল তা ওয়েব প্ল্যাটফর্মের অংশ হয়ে ওঠে এবং ডিজাইন উপাদানগুলি কোড করার সংক্ষিপ্ত বা সহজ উপায় সহ সমস্ত ব্রাউজারে সমর্থিত৷

যদিও এই ধ্রুবক বিবর্তন এবং অভিযোজন সহায়ক, এটি বিভ্রান্তিও আনতে পারে। এই সমস্ত আপডেট নেভিগেট করা কঠিন হতে পারে। বিকাশকারী হিসাবে, আমাদের প্রশ্ন আছে, "সব ব্রাউজার ইঞ্জিন কখন এই নতুন বৈশিষ্ট্যটিকে সমর্থন করবে?" "আমি কখন আমার প্রোডাকশন কোডে সেই বৈশিষ্ট্যগুলি ব্যবহার করা শুরু করতে পারি?" "আমরা কতক্ষণ পুরানো ব্রাউজার সমর্থন করব?"

সত্য উত্তর হল "এটা নির্ভর করে"। কী প্রয়োজন এবং কী ব্যবহারযোগ্য তা নির্ভর করে আপনার ব্যবহারকারীর ভিত্তি, প্রযুক্তিগত স্ট্যাক, আপনার দলের গঠন এবং সমর্থিত ডিভাইসগুলির উপর। কিন্তু, একটি বিষয়ে আমরা সবাই একমত যে, ওয়েবের বর্তমান ল্যান্ডস্কেপ সেই সিদ্ধান্তগুলি নেওয়া কঠিন করে তুলতে পারে।

আরও স্পষ্টতা আনতে Chrome টিম অন্যান্য ব্রাউজার ইঞ্জিন এবং ওয়েব সম্প্রদায়ের সাথে সহযোগিতা করছে৷ এর মধ্যে রয়েছে Interop 2023- এর মতো প্রকল্পগুলির উপর আমাদের কাজ যা মূল বৈশিষ্ট্যগুলির একটি সেটের আন্তঃকার্যক্ষমতা উন্নত করতে সাহায্য করে। কিন্তু গত কয়েক বছরে ল্যান্ড করা বৈশিষ্ট্য সম্পর্কে কি? পরীক্ষামূলক বৈশিষ্ট্যগুলি কি আমরা প্রায় দুই বছর আগে শিখেছি ব্যবহারের জন্য প্রস্তুত?

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

ডায়ালগ উপাদান

<dialog> উপাদান হল একটি নতুন HTML উপাদান যা ডায়ালগ প্রম্পট যেমন পপআপ এবং মডেল তৈরি করে।

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

• 37
• 79
• 98
• 15.4

উৎস

এটি ব্যবহার করতে, মডেল উপাদানটি সংজ্ঞায়িত করুন, তারপর ডায়ালগ উপাদানটিতে showModal() পদ্ধতিতে কল করে ডায়ালগটি খুলুন।

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

একটি নেটিভ HTML এলিমেন্ট হিসেবে, ফোকাস ম্যানেজমেন্ট, ট্যাব ট্র্যাকিং এবং স্ট্যাকিং কনটেক্সট রাখার মত বৈশিষ্ট্যগুলি অন্তর্নির্মিত। আরও জানতে, বিল্ডিং এ ডায়ালগ কম্পোনেন্ট পড়ুন।

স্বতন্ত্র CSS রূপান্তর বৈশিষ্ট্য

CSS রূপান্তর ব্যবহার করা আপনার সাইটে একটি আন্দোলন যোগ করার একটি কার্যকর উপায়।
আপনি একটি লাইনে তিনটি বৈশিষ্ট্য সহ CSS রূপান্তর লেখার সাথে পরিচিত হতে পারেন।
স্বতন্ত্র রূপান্তর বৈশিষ্ট্যগুলির সাথে আপনি এখন পৃথকভাবে রূপান্তর বৈশিষ্ট্যগুলি নির্দিষ্ট করতে পারেন। আপনি যখন জটিল কীফ্রেম অ্যানিমেশন লিখছেন তখন এটি কাজে আসে।

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

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

• 104
• 104
• 72
• 14.1

উৎস

এই পরিবর্তনের একটি গভীর ব্যাখ্যার জন্য, পৃথক ট্রান্সফর্ম বৈশিষ্ট্য সহ CSS রূপান্তরের উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণ পড়ুন।

নতুন ভিউপোর্ট ইউনিট

মোবাইলে, ভিউপোর্টের আকার ডায়নামিক টুলবারের উপস্থিতি বা অনুপস্থিতি দ্বারা প্রভাবিত হয়।
কখনও কখনও আপনার কাছে একটি URL বার এবং নেভিগেশন টুলবার দৃশ্যমান থাকে, কিন্তু কখনও কখনও সেই টুলবারগুলি সম্পূর্ণরূপে প্রত্যাহার করা হয়৷
টুলবারগুলি দৃশ্যমান কি না তার উপর নির্ভর করে ভিউপোর্টের প্রকৃত আকার ভিন্ন হবে।
নতুন ভিউপোর্ট ইউনিট যেমন svh এবং lvh মোবাইলের জন্য ডিজাইন করার সময় ওয়েব ডেভেলপারদের সূক্ষ্ম নিয়ন্ত্রণ দেয়। আপনি বড়, ছোট এবং গতিশীল ভিউপোর্ট ইউনিট নিবন্ধে আরও শিখতে পারেন।

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

• 108
• 108
• 101
• 15.4

জাভাস্ক্রিপ্টে গভীর অনুলিপি

অতীতে, আসল অবজেক্টের রেফারেন্স ছাড়াই একটি অবজেক্টের একটি গভীর অনুলিপি তৈরি করতে, একটি জনপ্রিয় হ্যাক ছিল JSON.stringify এর সাথে JSON.parse । এটি এমন একটি সাধারণ হ্যাক ছিল যে V8 (ক্রোমের জাভাস্ক্রিপ্ট ইঞ্জিন) আক্রমণাত্মকভাবে এই কৌশলটির কার্যকারিতা উন্নত করেছে। কিন্তু, structuredClone সাথে আপনার আর এই হ্যাকের প্রয়োজন নেই।

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

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

• 98
• 98
• 94
• 15.4

উৎস

আরও বিস্তারিত জানার জন্য অনুগ্রহ করে স্ট্রাকচার্ডক্লোন ব্যবহার করে জাভাস্ক্রিপ্টে ডিপ-কপি করা দেখুন।

:focus-visible ছদ্ম-শ্রেণী

ওয়েব ডেভেলপার হিসাবে, আমরা সবাই সেই "ফোকাস রিং" এর সাথে পরিচিত যেটি দেখায় যখন আপনি একটি কীবোর্ড দিয়ে একটি পৃষ্ঠা নেভিগেট করেন বা ইনপুট উপাদানগুলিতে ক্লিক করেন৷ এটি অ্যাক্সেসযোগ্যতার জন্য একটি প্রয়োজনীয় বৈশিষ্ট্য কিন্তু কখনও কখনও এটি বিভিন্ন ব্যবহারকারীদের জন্য ভিজ্যুয়াল ডিজাইনের পথে বাধা হয়ে দাঁড়ায়। :focus-visible CSS pseudo-class চেক করে যদি ব্রাউজার বিশ্বাস করে যে ফোকাস দৃশ্যমান হওয়া উচিত। আপনি এখন শৈলী নির্দিষ্ট করতে পারেন শুধুমাত্র যখন ফোকাস দৃশ্যমান হবে।

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

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

• 86
• 86
• 85
• 15.4

উৎস

আরও তথ্যের জন্য সিএসএস শিখতে ফোকাস বিভাগটি দেখুন।

ট্রান্সফর্ম স্ট্রিম ইন্টারফেস

স্ট্রিম এপিআই-এর ট্রান্সফর্মস্ট্রিম ইন্টারফেস একে অপরের মধ্যে স্ট্রিমগুলিকে পাইপ করা সম্ভব করে তোলে।

উদাহরণস্বরূপ আপনি এক জায়গা থেকে ডেটা স্ট্রিম করতে পারেন, তারপরে ডেটা পাস হওয়ার সাথে সাথে ডেটা স্ট্রীমটিকে অন্য অবস্থানে সংকুচিত করুন। ফেচ এপিআই সহ নিবন্ধ স্ট্রিমিং অনুরোধ আপনাকে এই নমুনা ব্যবহারের ক্ষেত্রে নিয়ে যায়।

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

• 67
• 79
• 102
• 14.1

উৎস

শেষ করি

আরও অনেক বৈশিষ্ট্য রয়েছে যা সম্প্রতি ওয়েব প্ল্যাটফর্মে ব্যবহার করার জন্য আন্তঃঅপারেবল এবং স্থিতিশীল হয়ে উঠেছে। এই বেসলাইন ফিচার সেটগুলিতে আরও স্পষ্টতা আনতে আমরা WebDX কমিউনিটি গ্রুপের সাথে কাজ করব। চলমান বিবরণের জন্য অনুগ্রহ করে web.dev/baseline দেখুন।

আপনি যদি আপ-টু-ডেট থাকতে চান, আমাদের দল নিবন্ধগুলি প্রকাশ করে যখন একটি বৈশিষ্ট্য ইন্টারঅপারেবল হয়ে যায় এবং ওয়েব প্ল্যাটফর্মে পরীক্ষামূলক বৈশিষ্ট্য থেকে নতুন ইন্টারঅপারেবল পর্যন্ত যা চলছে তার মাসিক আপডেট প্রকাশ করে।

আমরা যা করছি তা আপনাকে সাহায্য করে কিনা বা আপনার যদি বিভিন্ন ধরণের সহায়তার প্রয়োজন হয় তবে আমরা সর্বদা কৌতূহলী থাকি, তাই WebDX কমিউনিটি গ্রুপে আমাদের সাথে যোগাযোগ করুন।