CSS এবং UI-এ নতুন কি: I/O 2023 সংস্করণ

Una Kravets

Bramus

Adam Argyle

গত কয়েক মাস ধরে ওয়েব UI-এর জন্য একটি স্বর্ণযুগের সূচনা হয়েছে। নতুন প্ল্যাটফর্ম ক্ষমতাগুলি কঠোর ক্রস-ব্রাউজার গ্রহণের মাধ্যমে এসেছে যা আগের চেয়ে আরও বেশি ওয়েব ক্ষমতা এবং কাস্টমাইজেশন বৈশিষ্ট্যগুলিকে সমর্থন করে।

এখানে ২০টি সবচেয়ে উত্তেজনাপূর্ণ এবং প্রভাবশালী বৈশিষ্ট্য রয়েছে যা সম্প্রতি প্রকাশিত হয়েছে অথবা শীঘ্রই আসছে:

• কন্টেইনার কোয়েরি
• স্টাইল কোয়েরি
• :has() নির্বাচক
• মাইক্রোসিনট্যাক্সের নবমাংশ
• text-wrap: balance
• initial-letter
• গতিশীল ভিউপোর্ট ইউনিট
• প্রশস্ত-স্বরগ্রাম রঙের স্থান
• color-mix()
• বাসা বাঁধা
• ক্যাসকেড স্তর
• বিস্তৃত শৈলী
• ত্রিকোণমিতিক ফাংশন
• স্বতন্ত্র রূপান্তর বৈশিষ্ট্য
• পপওভার
• অ্যাঙ্কর পজিশনিং
• নির্বাচন মেনু
• বিচ্ছিন্ন সম্পত্তি রূপান্তর
• স্ক্রোল-চালিত অ্যানিমেশন
• রূপান্তরগুলি দেখুন

নতুন প্রতিক্রিয়াশীল

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

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

Browser Support

• 105
• 105
• 110
• 16

Source

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

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

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

এই পোস্টে কন্টেইনার কোয়েরি এবং লজিক্যাল কম্পোনেন্ট তৈরি সম্পর্কে আরও জানুন।

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

Browser Support

• 111
• 111
• x
• 18

কন্টেইনার কোয়েরি স্পেসিফিকেশন আপনাকে একটি প্যারেন্ট কন্টেইনারের স্টাইল মানগুলিও জিজ্ঞাসা করতে দেয়। এটি বর্তমানে আংশিকভাবে Chrome 111 এ প্রয়োগ করা হয়েছে, যেখানে আপনি কন্টেইনার স্টাইল প্রয়োগ করতে CSS কাস্টম বৈশিষ্ট্য ব্যবহার করতে পারেন।

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

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

:has()

Browser Support

• 105
• 105
• 121
• 15.4

Source

শক্তিশালী, গতিশীল বৈশিষ্ট্যের কথা বলতে গেলে, :has() সিলেক্টর হল আধুনিক ব্রাউজারে সবচেয়ে শক্তিশালী নতুন CSS ক্ষমতাগুলির মধ্যে একটি। :has() দিয়ে, আপনি স্টাইল প্রয়োগ করতে পারেন পরীক্ষা করে দেখতে যে কোনও প্যারেন্ট এলিমেন্টে নির্দিষ্ট শিশুদের উপস্থিতি রয়েছে কিনা, অথবা সেই শিশুরা কোনও নির্দিষ্ট অবস্থায় আছে কিনা। এর অর্থ, আমাদের এখন মূলত একটি প্যারেন্ট সিলেক্টর রয়েছে।

কন্টেইনার কোয়েরির উদাহরণের উপর ভিত্তি করে, আপনি উপাদানগুলিকে আরও গতিশীল করতে :has() ব্যবহার করতে পারেন। এতে, "তারকা" উপাদান সহ একটি আইটেমের উপর একটি ধূসর ব্যাকগ্রাউন্ড প্রয়োগ করা হয় এবং চেকবক্স সহ একটি আইটেমের উপর একটি নীল ব্যাকগ্রাউন্ড প্রয়োগ করা হয়।

কিন্তু এই API শুধুমাত্র প্যারেন্ট সিলেকশনের মধ্যেই সীমাবদ্ধ নয়। আপনি প্যারেন্টের মধ্যে যেকোনো শিশুকেও স্টাইল করতে পারেন। উদাহরণস্বরূপ, আইটেমটিতে স্টার এলিমেন্ট থাকলে শিরোনামটি বোল্ড হয়। এটি .item:has(.star) .title দিয়ে সম্পন্ন করা হয়। :has() সিলেক্টর ব্যবহার করে আপনি প্যারেন্ট এলিমেন্ট, চাইল্ড এলিমেন্ট এবং এমনকি ভাইবোন এলিমেন্টগুলিতে অ্যাক্সেস পেতে পারেন, যা এটিকে একটি সত্যিই নমনীয় API করে তোলে, যেখানে প্রতিদিন নতুন ব্যবহারের কেস দেখা যায়।

দ্রষ্টব্য: বৃহৎ DOM ট্রিতে রেন্ডারিং পারফরম্যান্সের ধীরগতি রোধ করতে, আমরা আপনাকে এই নির্বাচকটিকে যতটা সম্ভব ঘনিষ্ঠভাবে দেখার পরামর্শ দিচ্ছি। উদাহরণস্বরূপ, রুট html এলিমেন্টে মিল পরীক্ষা করার জন্য :has() ব্যবহার করা একটি ন্যাভ বারে বা একটি ছোট ট্রি সহ একটি কার্ড এলিমেন্টে মিল পরীক্ষা করার চেয়ে ধীর হবে।

আরও জানুন এবং আরও কিছু ডেমো অন্বেষণ করুন, :has() সম্পর্কে এই ব্লগ পোস্টটি দেখুন।

বাক্য গঠনের নবম অংশ

Browser Support

• 111
• 111
• 113
• 9

ওয়েব প্ল্যাটফর্মটিতে এখন আরও উন্নত nth-child নির্বাচন রয়েছে। উন্নত nth-child সিনট্যাক্স একটি নতুন কীওয়ার্ড ("of") দেয়, যা আপনাকে An+B এর বিদ্যমান মাইক্রো সিনট্যাক্স ব্যবহার করতে দেয়, যার মধ্যে আরও নির্দিষ্ট উপসেট অনুসন্ধান করা যায়।

যদি আপনি স্পেশাল ক্লাসে নিয়মিত nth-child ব্যবহার করেন, যেমন :nth-child(2) , তাহলে ব্রাউজারটি সেই উপাদানটি নির্বাচন করবে যার সাথে ক্লাস স্পেশাল প্রয়োগ করা হয়েছে, এবং এটি দ্বিতীয় সন্তানও। এটি :nth-child(2 of .special) বিপরীতে, যা প্রথমে সমস্ত .special উপাদানগুলিকে প্রি-ফিল্টার করবে এবং তারপর সেই তালিকা থেকে দ্বিতীয়টি বেছে নেবে।

nth-of-syntax-এর উপর আমাদের নিবন্ধে এই বৈশিষ্ট্যটি আরও অন্বেষণ করুন।

text-wrap: balance

আমাদের স্টাইলের মধ্যে কেবল সিলেক্টর এবং স্টাইল কোয়েরিই লজিক এম্বেড করতে পারে না; টাইপোগ্রাফি আরেকটি জায়গা। Chrome 114 থেকে, আপনি শিরোনামের জন্য text-wrap ব্যালেন্সিং ব্যবহার করতে পারেন, text-wrap প্রোপার্টিটি value balance সহ ব্যবহার করে।

একটি ডেমো চেষ্টা করুন

টেক্সটের ভারসাম্য বজায় রাখার জন্য, ব্রাউজার কার্যকরভাবে ক্ষুদ্রতম প্রস্থের জন্য একটি বাইনারি অনুসন্ধান করে যার ফলে কোনও অতিরিক্ত লাইন তৈরি হয় না, একটি CSS পিক্সেল (প্রদর্শন পিক্সেল নয়) এ থেমে। বাইনারি অনুসন্ধানের ধাপগুলি আরও কমানোর জন্য ব্রাউজার গড় লাইন প্রস্থের 80% দিয়ে শুরু করে।

একটি ডেমো চেষ্টা করুন

দ্রষ্টব্য: যদিও এটি একটি দুর্দান্ত প্রগতিশীল বর্ধিতকরণ যা আপনি আজই চেষ্টা করে দেখতে পারেন, এটি মনে রাখা গুরুত্বপূর্ণ যে এই APIটি কেবল 4 লাইনের টেক্সট পর্যন্ত কাজ করে, তাই এটি শিরোনাম এবং শিরোনামের জন্য দুর্দান্ত, তবে সম্ভবত আপনি যা খুঁজছেন তা নয়।

এই প্রবন্ধে এটি সম্পর্কে আরও জানুন।

initial-letter

Browser Support

• 110
• 110
• x
• 9

Source

ওয়েব টাইপোগ্রাফির আরেকটি চমৎকার উন্নতি হল initial-letter । এই CSS বৈশিষ্ট্যটি আপনাকে ইনসেট ড্রপ ক্যাপ স্টাইলিংয়ের জন্য আরও ভালো নিয়ন্ত্রণ দেয়।

আপনি :first-letter ছদ্ম উপাদানে initial-letter ব্যবহার করে নিম্নলিখিতগুলি উল্লেখ করতে পারেন: অক্ষরের আকার কতগুলি লাইন দখল করে তার উপর ভিত্তি করে। অক্ষরটির ব্লক-অফসেট, বা "সিঙ্ক", যেখানে অক্ষরটি বসবে তার জন্য।

intial-letter ব্যবহার সম্পর্কে আরও জানুন এখানে ।

গতিশীল ভিউপোর্ট ইউনিট

Browser Support

• 108
• 108
• 101
• 15.4

আজকাল ওয়েব ডেভেলপারদের একটি সাধারণ সমস্যা হল সঠিক এবং সামঞ্জস্যপূর্ণ পূর্ণ-ভিউপোর্ট সাইজিং, বিশেষ করে মোবাইল ডিভাইসে। একজন ডেভেলপার হিসেবে আপনি চান 100vh (ভিউপোর্টের উচ্চতার 100%) মানে "ভিউপোর্টের মতো লম্বা", কিন্তু vh ইউনিট মোবাইলে নেভিগেশন বার প্রত্যাহারের মতো বিষয়গুলির জন্য দায়ী নয়, তাই কখনও কখনও এটি খুব দীর্ঘ হয়ে যায় এবং স্ক্রোলের কারণ হয়।

এই সমস্যা সমাধানের জন্য, এখন আমাদের ওয়েব প্ল্যাটফর্মে নতুন ইউনিট মান রয়েছে, যার মধ্যে রয়েছে: - ছোট ভিউপোর্ট উচ্চতা এবং প্রস্থ (অথবা svh এবং svw ), যা সবচেয়ে ছোট সক্রিয় ভিউপোর্ট আকারকে প্রতিনিধিত্ব করে। - বড় ভিউপোর্ট উচ্চতা এবং প্রস্থ ( lvh এবং lvw ), যা সবচেয়ে বড় আকারকে প্রতিনিধিত্ব করে। - গতিশীল ভিউপোর্ট উচ্চতা এবং প্রস্থ ( dvh এবং dvw )।

যখন অতিরিক্ত গতিশীল ব্রাউজার টুলবার, যেমন উপরে ঠিকানা বা নীচে ট্যাব বার, দৃশ্যমান হয় এবং যখন থাকে না, তখন গতিশীল ভিউপোর্ট ইউনিটের মান পরিবর্তিত হয়।

দ্রষ্টব্য: মনে রাখবেন যে ডায়নামিক ভিউপোর্ট ইউনিটগুলি ভার্চুয়াল কীবোর্ডের উপস্থিতি বিবেচনা করে না। Chrome 108 থেকে আপনি এই আচরণ পরিবর্তন করার জন্য একটি মেটা-ট্যাগ সেট করতে পারেন।

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

প্রশস্ত-স্বরগ্রাম রঙের স্থান

Browser Support

• 111
• 111
• 113
• 15.4

Source

ওয়েব প্ল্যাটফর্মে আরেকটি নতুন গুরুত্বপূর্ণ সংযোজন হল ওয়াইড-গ্যামুট রঙের স্থান। ওয়েব প্ল্যাটফর্মে ওয়াইড-গ্যামুট রঙ উপলব্ধ হওয়ার আগে, আপনি আধুনিক ডিভাইসগুলিতে দৃশ্যমান উজ্জ্বল রঙ সহ একটি ছবি তুলতে পারতেন, কিন্তু আপনি সেই উজ্জ্বল মানগুলির সাথে মেলে এমন একটি বোতাম, টেক্সট রঙ বা ব্যাকগ্রাউন্ড পেতেন না।

রঙের প্রাণবন্ততা এবং এর প্রভাব চিত্রিত করে, প্রশস্ত এবং সংকীর্ণ রঙের পরিসরের মধ্যে রূপান্তরের একটি সিরিজ দেখানো হয়েছে।
নিজে চেষ্টা করে দেখুন।

কিন্তু এখন আমাদের ওয়েব প্ল্যাটফর্মে REC2020, P3, XYZ, LAB, OKLAB, LCH, এবং OKLCH সহ নতুন রঙের স্থানের একটি পরিসর রয়েছে। HD রঙ নির্দেশিকাতে নতুন ওয়েব রঙের স্থান এবং আরও অনেক কিছুর সাথে পরিচিত হন।

এবং আপনি DevTools-এ তাৎক্ষণিকভাবে দেখতে পাবেন কিভাবে রঙের পরিসর প্রসারিত হয়েছে, সেই সাদা রেখাটি srgb পরিসরটি কোথায় শেষ হয় এবং বৃহত্তর-স্বর্গ রঙের পরিসর কোথায় শুরু হয় তা চিহ্নিত করে।

রঙের জন্য আরও অনেক টুলিং উপলব্ধ! দুর্দান্ত গ্রেডিয়েন্ট উন্নতিগুলিও মিস করবেন না। অ্যাডাম আর্গাইল একটি নতুন টুল তৈরি করেছেন যা আপনাকে একটি নতুন ওয়েব কালার পিকার এবং গ্রেডিয়েন্ট বিল্ডার ব্যবহার করে দেখতে সাহায্য করবে, gradient.style এ এটি ব্যবহার করে দেখুন।

রঙ-মিশ্রণ()

Browser Support

• 111
• 111
• 113
• 16.2

Source

বর্ধিত রঙের স্থান সম্প্রসারণ করা হল color-mix() ফাংশন। এই ফাংশনটি দুটি রঙের মান মিশ্রিত করে মিশ্রিত রঙের চ্যানেলের উপর ভিত্তি করে নতুন মান তৈরি করে। আপনি যে রঙের স্থানটিতে মিশ্রিত করবেন তা ফলাফলকে প্রভাবিত করে। oklch এর মতো আরও বেশি উপলব্ধিযোগ্য রঙের স্থানে কাজ করলে srgb এর মতো কিছুর চেয়ে ভিন্ন রঙের পরিসরের মধ্য দিয়ে যাবে।

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

ডেমোটি চেষ্টা করে দেখুন

color-mix() ফাংশনটি দীর্ঘদিন ধরে অনুরোধ করা একটি ক্ষমতা প্রদান করে: অস্বচ্ছ রঙের মান সংরক্ষণ করার পাশাপাশি কিছু স্বচ্ছতা যোগ করার ক্ষমতা। এখন, আপনি বিভিন্ন অস্বচ্ছতায় সেই রঙগুলির বৈচিত্র তৈরি করার সময় আপনার ব্র্যান্ডের রঙের ভেরিয়েবলগুলি ব্যবহার করতে পারেন। এটি করার উপায় হল একটি রঙকে স্বচ্ছের সাথে মিশ্রিত করা। যখন আপনি আপনার ব্র্যান্ডের রঙ নীলকে 10% স্বচ্ছের সাথে মিশ্রিত করেন, তখন আপনি একটি 90% অস্বচ্ছ ব্র্যান্ড রঙ পান। আপনি দেখতে পাচ্ছেন এটি কীভাবে আপনাকে দ্রুত রঙ সিস্টেম তৈরি করতে সক্ষম করে।

আজকে আপনি Chrome DevTools-এ স্টাইলস প্যানে একটি চমৎকার প্রিভিউ ভেন ডায়াগ্রাম আইকন ব্যবহার করে এটি কার্যকরভাবে দেখতে পাবেন।

color-mix সম্পর্কে আমাদের ব্লগ পোস্টে আরও উদাহরণ এবং বিশদ দেখুন অথবা এই color-mix() খেলার মাঠটি ব্যবহার করে দেখুন।

সিএসএস ফাউন্ডেশন

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

বাসা বাঁধা

Browser Support

• 120
• 120
• 117
• 17.2

Source

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

আপনি মিডিয়া কোয়েরি নেস্ট করতে পারেন, যার অর্থ আপনি কনটেইনার কোয়েরি নেস্ট করতে পারেন। নিম্নলিখিত উদাহরণে, যদি কোনও কার্ডের কন্টেইনারে পর্যাপ্ত প্রস্থ থাকে তবে তাকে পোর্ট্রেট লেআউট থেকে ল্যান্ডস্কেপ লেআউটে পরিবর্তন করা হয়:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

যখন কন্টেইনারটিতে 480px বেশি (অথবা সমান) ইনলাইন স্পেস থাকে, তখন flex লেআউট অ্যাডজাস্টমেন্ট করা হয়। শর্ত পূরণ হলে ব্রাউজারটি কেবল সেই নতুন ডিসপ্লে স্টাইলটি প্রয়োগ করবে।

আরও তথ্য এবং উদাহরণের জন্য, CSS নেস্টিং সম্পর্কে আমাদের পোস্টটি দেখুন।

ক্যাসকেড স্তর

Browser Support

• 99
• 99
• 97
• 15.4

Source

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

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

কোডপেনে প্রকল্পটি অন্বেষণ করুন।

ক্যাসকেড স্তরগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও জানুন এই নিবন্ধে ।

স্কোপড সিএসএস

Browser Support

• 118
• 118
• 
• 17.4

Source

CSS স্কোপড স্টাইল ডেভেলপারদের নির্দিষ্ট স্টাইলের সীমানা নির্দিষ্ট করতে দেয়, মূলত CSS-এ নেটিভ নেমস্পেসিং তৈরি করে। আগে, ডেভেলপাররা ক্লাসের নাম পরিবর্তন করার জন্য তৃতীয় পক্ষের স্ক্রিপ্টিং বা স্টাইলের সংঘর্ষ রোধ করার জন্য নির্দিষ্ট নামকরণের নিয়মের উপর নির্ভর করত, কিন্তু শীঘ্রই, আপনি @scope ব্যবহার করতে পারবেন।

এখানে, আমরা একটি .title উপাদানকে একটি .card এর সাথে স্কোপ করছি। এটি সেই title উপাদানটিকে পৃষ্ঠার অন্য কোনও .title উপাদানের সাথে, যেমন একটি ব্লগ পোস্টের শিরোনাম বা অন্য শিরোনামের সাথে দ্বন্দ্ব থেকে রক্ষা করবে।

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

এই লাইভ ডেমোতে আপনি @scope এবং @layer একসাথে স্কোপিং লিমিট দেখতে পাবেন:

@scope সম্পর্কে আরও জানুন css-cascade-6 স্পেসিফিকেশনে ।

ত্রিকোণমিতিক ফাংশন

Browser Support

• 111
• 111
• 108
• 15.4

Source

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

নিচের ডেমোতে, বিন্দুগুলি একটি কেন্দ্রীয় বিন্দুর চারপাশে ঘোরে। প্রতিটি বিন্দুকে তার নিজস্ব কেন্দ্রের চারপাশে ঘোরানোর এবং তারপর বাইরের দিকে সরানোর পরিবর্তে, প্রতিটি বিন্দু X এবং Y অক্ষের উপর স্থানান্তরিত হয়। X এবং Y অক্ষের দূরত্বগুলি যথাক্রমে cos() এবং --angle এর sin() বিবেচনা করে নির্ধারিত হয়।

এই বিষয়ে আরও বিস্তারিত তথ্যের জন্য ত্রিকোণমিতিক ফাংশন সম্পর্কে আমাদের নিবন্ধটি দেখুন।

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

Browser Support

• 104
• 104
• 72
• 14.1

Source

পৃথক ট্রান্সফর্ম ফাংশনের সাথে ডেভেলপারের এরগনোমিক্সের উন্নতি অব্যাহত রয়েছে। শেষবার যখন আমরা I/O ব্যবহার করেছিলাম, তখন থেকে সমস্ত আধুনিক ব্রাউজারে পৃথক ট্রান্সফর্ম স্থিতিশীল ছিল।

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

এখন, আপনি আপনার CSS অ্যানিমেশনে এই সমস্ত বিবরণ পেতে পারেন রূপান্তরের ধরণগুলি আলাদা করে এবং সেগুলি পৃথকভাবে প্রয়োগ করে।

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

.target:hover {
  scale: 2;
}

এর সাহায্যে, অ্যানিমেশনের সময় বিভিন্ন সময়ে বিভিন্ন হারে অনুবাদ, ঘূর্ণন বা স্কেলের পরিবর্তন একই সাথে ঘটতে পারে।

আরও তথ্যের জন্য পৃথক রূপান্তর ফাংশন সম্পর্কে এই পোস্টটি দেখুন।

কাস্টমাইজযোগ্য উপাদান

ওয়েব প্ল্যাটফর্মের মাধ্যমে ডেভেলপারদের কিছু গুরুত্বপূর্ণ চাহিদা পূরণ করার জন্য, আমরা OpenUI কমিউনিটি গ্রুপের সাথে কাজ করছি এবং শুরু করার জন্য তিনটি সমাধান চিহ্নিত করেছি:

1. ইভেন্ট হ্যান্ডলার, একটি ঘোষণামূলক DOM কাঠামো এবং অ্যাক্সেসযোগ্য ডিফল্ট সহ অন্তর্নির্মিত পপআপ কার্যকারিতা।
2. একটি CSS API যা দুটি উপাদানকে একে অপরের সাথে সংযুক্ত করে অ্যাঙ্কর পজিশনিং সক্ষম করে।
3. একটি কাস্টমাইজেবল ড্রপডাউন মেনু উপাদান, যখন আপনি কোনও নির্বাচনের ভিতরে কন্টেন্ট স্টাইল করতে চান।

পপওভার

পপওভার এপিআই উপাদানগুলিকে কিছু অন্তর্নির্মিত ব্রাউজার-সাপোর্ট জাদু দেয় যেমন:

• টপ-লেয়ারের জন্য সাপোর্ট, তাই আপনাকে z-index পরিচালনা করতে হবে না। যখন আপনি একটি পপওভার বা একটি ডায়ালগ খুলবেন, তখন আপনি সেই উপাদানটিকে পৃষ্ঠার উপরে একটি বিশেষ স্তরে প্রচার করছেন।
• auto পপওভারে বিনামূল্যে হালকা-খারিজ আচরণ করা হয়, তাই যখন আপনি কোনও উপাদানের বাইরে ক্লিক করেন, তখন পপওভারটি খারিজ হয়ে যায়, অ্যাক্সেসিবিলিটি ট্রি থেকে সরানো হয় এবং ফোকাস সঠিকভাবে পরিচালিত হয়।
• পপওভারের টার্গেট এবং পপওভারের সংযোগকারী টিস্যুর জন্য ডিফল্ট অ্যাক্সেসিবিলিটি।

এর অর্থ হল এই সমস্ত কার্যকারিতা তৈরি করতে এবং এই সমস্ত অবস্থা ট্র্যাক করতে কম জাভাস্ক্রিপ্ট লিখতে হবে।

পপওভারের জন্য DOM কাঠামোটি ঘোষণামূলক এবং এটি আপনার পপওভার উপাদানটিকে একটি id এবং popover বৈশিষ্ট্য দেওয়ার মতো স্পষ্টভাবে লেখা যেতে পারে। তারপর, আপনি সেই আইডিটিকে সেই উপাদানের সাথে সিঙ্ক করবেন যা পপওভারটি খুলবে, যেমন popovertarget বৈশিষ্ট্য সহ একটি বোতাম:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover হল popover=auto এর সংক্ষিপ্ত রূপ। popover=auto যুক্ত একটি উপাদান খোলার সময় অন্যান্য popovers কে জোর করে বন্ধ করে দেবে, খোলার সময় ফোকাস গ্রহণ করবে এবং হালকাভাবে খারিজ করতে পারবে। বিপরীতে, popover=manual উপাদানগুলি অন্য কোনও ধরণের উপাদানকে জোর করে বন্ধ করে দেয় না, তাৎক্ষণিকভাবে ফোকাস গ্রহণ করে না এবং হালকাভাবে খারিজ করে না। এগুলি একটি টগল বা অন্যান্য ক্লোজ অ্যাকশনের মাধ্যমে বন্ধ করা হয়।

পপওভার সম্পর্কিত সবচেয়ে হালনাগাদ ডকুমেন্টেশন বর্তমানে MDN-এ পাওয়া যাবে।

অ্যাঙ্কর পজিশনিং

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

আপনি anchor() ফাংশন ব্যবহার করে একটি কেন্দ্রীভূত টুলটিপ তৈরি করতে পারেন, anchor থেকে প্রস্থ ব্যবহার করে টুলটিপটিকে anchor এর x অবস্থানের 50% এ স্থাপন করতে পারেন। তারপর, বাকি প্লেসমেন্ট স্টাইলগুলি প্রয়োগ করতে বিদ্যমান পজিশনিং মানগুলি ব্যবহার করুন।

কিন্তু আপনার অবস্থানের উপর ভিত্তি করে যদি পপওভারটি ভিউপোর্টে ফিট না হয় তবে কী হবে?

এই সমস্যার সমাধানের জন্য, অ্যাঙ্কর পজিশনিং API-তে এমন ফলব্যাক পজিশন অন্তর্ভুক্ত রয়েছে যা আপনি কাস্টমাইজ করতে পারেন। নিম্নলিখিত উদাহরণটি "top-then-bottom" নামক একটি ফলব্যাক পজিশন তৈরি করে। ব্রাউজার প্রথমে টুলটিপটি উপরে রাখার চেষ্টা করবে, এবং যদি এটি ভিউপোর্টে ফিট না হয়, তাহলে ব্রাউজারটি এটিকে অ্যাঙ্করিং এলিমেন্টের নীচে, নীচে রাখবে।

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

দ্রষ্টব্য: এখানে আপনি খুব সহজে লিখতে পারেন, যা হয়তো ভার্বোজ, কিন্তু এটি লাইব্রেরি এবং ডিজাইন সিস্টেমের জন্য পজিশনিং লজিক লেখার এবং আপনার জন্য এটি সর্বত্র পুনরায় ব্যবহার করার সুযোগ।

এই ব্লগ পোস্টে অ্যাঙ্কর পজিশনিং সম্পর্কে আরও জানুন।

<selectmenu>

পপওভার এবং অ্যাঙ্কর পজিশনিং উভয়ের সাহায্যে, আপনি সম্পূর্ণরূপে কাস্টমাইজযোগ্য সিলেক্ট মেনু তৈরি করতে পারেন। OpenUI কমিউনিটি গ্রুপ এই মেনুগুলির মৌলিক কাঠামো তদন্ত করছে এবং এর মধ্যে যেকোনো কন্টেন্ট কাস্টমাইজ করার সুযোগ দেওয়ার উপায় খুঁজছে। এই ভিজ্যুয়াল উদাহরণগুলি নিন:

ক্যালেন্ডার ইভেন্টের মধ্যে প্রদর্শিত রঙের সাথে সামঞ্জস্যপূর্ণ রঙিন বিন্দু সহ, সবচেয়ে বাম-সর্বাধিক selectmenu উদাহরণটি তৈরি করতে, আপনি এটি নিম্নরূপ লিখতে পারেন:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

বিচ্ছিন্ন সম্পত্তি রূপান্তর

এই সমস্ত কিছু যাতে পপওভারগুলিকে মসৃণভাবে ভিতরে এবং বাইরে স্থানান্তরিত করতে পারে, তার জন্য ওয়েবের কিছু উপায় প্রয়োজন যাতে বিচ্ছিন্ন বৈশিষ্ট্যগুলিকে অ্যানিমেট করা যায়। এগুলি এমন বৈশিষ্ট্য যা সাধারণত অতীতে অ্যানিমেটেবল ছিল না, যেমন উপরের স্তরে এবং থেকে অ্যানিমেট করা এবং display: none ।

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

নিচের popover ডেমোটি, open state-এর জন্য :popover-open এবং before-open state-এর জন্য @starting-style ব্যবহার করে popovers-কে ইন এবং আউট অ্যানিমেট করে, এবং after-open-is-closed state-এর জন্য সরাসরি এলিমেন্টে একটি ট্রান্সফর্ম ভ্যালু প্রয়োগ করে। display-এর সাথে এই সমস্ত কাজ করার জন্য, এটিকে transition প্রোপার্টিতে যোগ করতে হবে, যেমন:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

মিথস্ক্রিয়া

যা আমাদের ইন্টারঅ্যাকশনে নিয়ে আসে, ওয়েব UI বৈশিষ্ট্যগুলির এই সফরের শেষ স্টপ।

আমরা ইতিমধ্যেই ডিসক্রিট প্রোপার্টি অ্যানিমেট করার কথা বলেছি, কিন্তু স্ক্রোল-চালিত অ্যানিমেশন এবং ভিউ ট্রানজিশনের আশেপাশে Chrome-এ কিছু সত্যিই উত্তেজনাপূর্ণ APIও অবতরণ করছে।

স্ক্রোল-চালিত অ্যানিমেশন

Browser Support

• 115
• 115
• 
• 26

Source

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

এই API জাভাস্ক্রিপ্ট ক্লাস এবং CSS বৈশিষ্ট্যের একটি সেট সমর্থন করে যা আপনাকে সহজেই ঘোষণামূলক স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে দেয়।

scroll এর মাধ্যমে CSS Animation চালানোর জন্য নতুন scroll-timeline , view-timeline , এবং animation-timeline প্রোপার্টি ব্যবহার করুন। একটি JavaScript Web Animations API চালানোর জন্য, Element.animate() এ timeline বিকল্প হিসেবে ScrollTimeline অথবা ViewTimeline ইনস্ট্যান্সটি পাস করুন।

এই নতুন API গুলি বিদ্যমান ওয়েব অ্যানিমেশন এবং CSS অ্যানিমেশন API গুলির সাথে একত্রে কাজ করে, যার অর্থ হল তারা এই API গুলির সুবিধাগুলি থেকে উপকৃত হয়। এর মধ্যে রয়েছে এই অ্যানিমেশনগুলিকে মূল থ্রেড থেকে চালানোর ক্ষমতা। হ্যাঁ, সঠিকভাবে পড়ুন: আপনি এখন কেবল কয়েকটি লাইন অতিরিক্ত কোডের সাহায্যে স্ক্রোল করে মূল থ্রেড থেকে চালানোর মাধ্যমে সিল্কি মসৃণ অ্যানিমেশন পেতে পারেন। কী পছন্দ নয়?!

এই স্ক্রোল-চালিত অ্যানিমেশনগুলি কীভাবে তৈরি করবেন সে সম্পর্কে একটি বিস্তৃত গভীর নির্দেশিকার জন্য, অনুগ্রহ করে স্ক্রোল-চালিত অ্যানিমেশন সম্পর্কে এই নিবন্ধটি পড়ুন।

রূপান্তরগুলি দেখুন

Browser Support

• 111
• 111
• 144
• 18

Source

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

ভিউ ট্রানজিশনগুলি একটি প্রগতিশীল বর্ধন হিসাবে ব্যবহার করা যেতে পারে: আপনার কোডটি নিন যা যেকোনো পদ্ধতিতে DOM আপডেট করে এবং এটিকে ভিউ ট্রানজিশন API-তে মোড়ানো হয় যেখানে এই বৈশিষ্ট্যটি সমর্থন করে না এমন ব্রাউজারগুলির জন্য একটি ফলব্যাক থাকে।

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

রূপান্তরটি কেমন হওয়া উচিত তা CSS এর মাধ্যমে নিয়ন্ত্রিত হয়।

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

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

ভিউ ট্রানজিশন বর্তমানে Chrome 111 এর সিঙ্গেল-পেজ অ্যাপস (SPAs) এর সাথে কাজ করে। মাল্টিপল-পেজ অ্যাপ সাপোর্ট নিয়ে কাজ করা হচ্ছে। আরও তথ্যের জন্য, আমাদের সম্পূর্ণ ভিউ ট্রানজিশন গাইডটি দেখুন যা আপনাকে সবকিছু বুঝতে সাহায্য করবে।

উপসংহার

CSS এবং HTML-এর সর্বশেষ ল্যান্ডিং সম্পর্কে developer.chrome.com- এ আপডেট থাকুন এবং আরও ওয়েব ল্যান্ডিংয়ের জন্য I/O ভিডিওগুলি দেখুন।