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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

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

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

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

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

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

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

কন্টেইনার কোয়েরি স্পেসিফিকেশন আপনাকে একটি প্যারেন্ট কন্টেইনারের স্টাইল ভ্যালুগুলো কোয়েরি করার সুযোগও দেয়। এটি বর্তমানে ক্রোম ১১১-এ আংশিকভাবে প্রয়োগ করা হয়েছে, যেখানে আপনি কন্টেইনার স্টাইল প্রয়োগ করতে 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()

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

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

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

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

এন-তম সিনট্যাক্স

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

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

আমাদের nth-of সিনট্যাক্স সম্পর্কিত আর্টিকেলে এই ফিচারটি সম্পর্কে আরও বিস্তারিত জানুন।

text-wrap: balance

সিলেক্টর এবং স্টাইল কোয়েরিই একমাত্র জায়গা নয় যেখানে আমরা আমাদের স্টাইলের মধ্যে লজিক যুক্ত করতে পারি; টাইপোগ্রাফিও এর মধ্যে একটি। ক্রোম ১১৪ থেকে, আপনি ` balance ভ্যালু সহ text-wrap প্রপার্টি ব্যবহার করে হেডিংয়ের জন্য `text-wrap balanceing` ব্যবহার করতে পারেন।

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

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

initial-letter

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

আপনি :first-letter সিউডো এলিমেন্টে initial-letter ব্যবহার করে নিম্নলিখিত বিষয়গুলো নির্দিষ্ট করেন: অক্ষরটি কতগুলো লাইন জুড়ে থাকবে তার উপর ভিত্তি করে এর আকার। অক্ষরটির ব্লক-অফসেট বা “সিঙ্ক”, অর্থাৎ অক্ষরটি কোথায় বসবে।

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

ডাইনামিক ভিউপোর্ট ইউনিট

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

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

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

এই নতুন ইউনিটগুলো সম্পর্কে আরও তথ্যের জন্য, “বৃহৎ, ক্ষুদ্র এবং ডাইনামিক ভিউপোর্ট ইউনিটসমূহ” পড়ুন।

প্রশস্ত গামুট রঙের স্থান

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

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

এবং আপনি ডেভটুলস-এ তাৎক্ষণিকভাবে দেখতে পাবেন যে রঙের পরিসর কীভাবে প্রসারিত হয়েছে, যেখানে ঐ সাদা রেখাটি নির্দেশ করে দেয় যে এসআরজিবি (srgb) পরিসর কোথায় শেষ হয় এবং বিস্তৃত-গ্যামুট (wider-gamut) রঙের পরিসর কোথায় শুরু হয়।

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

রঙ-মিশ্রণ()

এক্সপান্ডেড কালার স্পেসের একটি বর্ধিত রূপ হলো 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() ফাংশনটি একটি বহু-প্রত্যাশিত সুবিধা প্রদান করে: অস্বচ্ছ রঙের মান অক্ষুণ্ণ রেখে তাতে কিছুটা স্বচ্ছতা যোগ করার ক্ষমতা। এখন, আপনি আপনার ব্র্যান্ডের রঙের ভ্যারিয়েবলগুলো ব্যবহার করে বিভিন্ন অস্বচ্ছতার সেই রঙগুলোরই বিভিন্ন রূপ তৈরি করতে পারবেন। এটি করার উপায় হলো একটি রঙের সাথে স্বচ্ছ কিছু মেশানো। যখন আপনি আপনার ব্র্যান্ডের রঙ নীলকে ১০% স্বচ্ছ কিছুর সাথে মেশাবেন, তখন আপনি একটি ৯০% অস্বচ্ছ ব্র্যান্ডের রঙ পাবেন। আপনি দেখতেই পাচ্ছেন, কীভাবে এটি আপনাকে দ্রুত রঙের সিস্টেম তৈরি করতে সক্ষম করে।

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

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

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

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

বাসা বাঁধা

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

.card {}
.card:hover {}

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

  }
}

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

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

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

যখন কন্টেইনারে 480px বা তার বেশি ইনলাইন স্পেস উপলব্ধ থাকে, তখন লেআউটটি flex -এ পরিবর্তিত হয়। শর্ত পূরণ হলে ব্রাউজারটি স্বয়ংক্রিয়ভাবে সেই নতুন ডিসপ্লে স্টাইলটি প্রয়োগ করে।

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

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

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

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

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

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

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

এখানে, আমরা একটি .title এলিমেন্টকে একটি .card মধ্যে সীমাবদ্ধ করছি। এর ফলে ওই title এলিমেন্টটি পেজের অন্য কোনো .title এলিমেন্টের (যেমন ব্লগ পোস্টের শিরোনাম বা অন্য কোনো হেডিং) সাথে সাংঘর্ষিক হবে না।

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

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

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

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

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

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

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

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

স্বতন্ত্র ট্রান্সফর্ম ফাংশনগুলোর মাধ্যমে ডেভেলপারদের কাজের সুবিধা ক্রমাগত উন্নত হচ্ছে। শেষবার যখন আমরা ইনপুট/আউটপুট (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 অ্যাট্রিবিউট দেওয়ার মতোই সহজভাবে লেখা যায়। তারপর, আপনি সেই id-টিকে সেই এলিমেন্টের সাথে সিঙ্ক করেন যা পপওভারটি খুলবে, যেমন 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 যুক্ত কোনো এলিমেন্ট খুললে তা অন্য পপওভারগুলোকে ফোর্স-ক্লোজ করে দেয়, খুললেই ফোকাস পায় এবং লাইট-ডিসমিস করা যায়। অন্যদিকে, popover=manual এলিমেন্টগুলো অন্য কোনো ধরনের এলিমেন্টকে ফোর্স-ক্লোজ করে না, সাথে সাথে ফোকাস পায় না এবং লাইট-ডিসমিসও হয় না। এগুলো একটি টগল বা অন্য কোনো ক্লোজ অ্যাকশনের মাধ্যমে বন্ধ হয়।

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

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

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

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

কিন্তু আপনার স্থাপন করার পদ্ধতির উপর ভিত্তি করে যদি পপওভারটি ভিউপোর্টে ঠিকমতো না বসে, তাহলে কী হবে?

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

.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>

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

ক্যালেন্ডার ইভেন্টের মধ্যে যে রঙ দেখানো হবে, সেই রঙের সাথে সামঞ্জস্যপূর্ণ রঙিন বিন্দুসহ বাম দিকের 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 , খোলার আগের অবস্থার জন্য @starting-style এবং খোলার পর বন্ধ হওয়ার অবস্থার জন্য সরাসরি এলিমেন্টটিতে একটি ট্রান্সফর্ম ভ্যালু প্রয়োগ করা হয়। ডিসপ্লে-এর সাথে এই সবকিছু কাজ করানোর জন্য, এটিকে 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;
}

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

আর এভাবেই আমরা ইন্টারঅ্যাকশনের প্রসঙ্গে আসি, যা ওয়েব ইউআই ফিচারগুলোর এই সফরের শেষ গন্তব্য।

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

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

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

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

স্ক্রলের মাধ্যমে CSS অ্যানিমেশন চালাতে নতুন scroll-timeline , view-timeline , এবং animation-timeline প্রোপার্টিগুলো ব্যবহার করুন। জাভাস্ক্রিপ্ট ওয়েব অ্যানিমেশন এপিআই (API) চালাতে, Element.animate() ফাংশনের timeline অপশন হিসেবে একটি ScrollTimeline বা ViewTimeline ইনস্ট্যান্স পাস করুন।

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

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

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

ভিউ ট্রানজিশন এপিআই ব্যবহার করে এক ধাপেই 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;
}

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

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

উপসংহার

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