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

Una Kravets

Bramus

Adam Argyle

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

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

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

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

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

ধারক প্রশ্ন

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

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

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

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

শৈলী প্রশ্ন

কন্টেইনার ক্যোয়ারী স্পেসিফিকেশন আপনাকে প্যারেন্ট কন্টেইনারের শৈলীর মান অনুসন্ধান করতে দেয়। এটি বর্তমানে 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()

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

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

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

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

বাক্য গঠনের nth

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

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

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

text-wrap: balance

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

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

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

initial-letter

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

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

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

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

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

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

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

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

ওয়াইড-গামুট রঙের স্থান

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

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

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

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

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

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

CSS ফাউন্ডেশন

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

বাসা বাঁধে

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

.card {}
.card:hover {}

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

  }
}

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

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

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

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

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

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

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

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

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

স্কোপড CSS

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

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

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

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

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

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

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

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

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

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

বিকাশকারী ergonomics পৃথক রূপান্তর ফাংশন সঙ্গে উন্নতি অব্যাহত. যেহেতু শেষবার আমরা 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. একটি কাস্টমাইজযোগ্য ড্রপডাউন মেনু উপাদান, যখন আপনি একটি নির্বাচনের ভিতরে সামগ্রী স্টাইল করতে চান।

পপওভার

পপওভার API উপাদানগুলিকে কিছু অন্তর্নির্মিত ব্রাউজার-সমর্থন জাদু দেয় যেমন:

• শীর্ষ-স্তরের জন্য সমর্থন, তাই আপনাকে 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 সহ একটি উপাদান খোলা হলে অন্যান্য পপোভারগুলিকে জোর করে বন্ধ করবে, খোলা হলে ফোকাস গ্রহণ করবে এবং হালকা-খারিজ করতে পারবে। বিপরীতভাবে, popover=manual উপাদানগুলি অন্য কোনো উপাদানের ধরনকে জোর করে বন্ধ করে না, অবিলম্বে ফোকাস গ্রহণ করে না এবং হালকা-খারিজ করে না। তারা একটি টগল বা অন্যান্য ঘনিষ্ঠ কর্ম মাধ্যমে বন্ধ.

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

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

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

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

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

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

.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 , আগে-ওপেন স্টেটের জন্য @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;
}

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

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

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

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

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

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

স্ক্রোল করে একটি CSS অ্যানিমেশন চালাতে নতুন scroll-timeline , view-timeline এবং animation-timeline বৈশিষ্ট্য ব্যবহার করুন। একটি JavaScript ওয়েব অ্যানিমেশন API চালাতে, Element.animate() -এ timeline বিকল্প হিসাবে একটি ScrollTimeline বা ViewTimeline উদাহরণ পাস করুন

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

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

রূপান্তর দেখুন

ভিউ ট্রানজিশন এপিআই দুই রাজ্যের মধ্যে একটি অ্যানিমেটেড ট্রানজিশন তৈরি করার সময় একক ধাপে 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;
}

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

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

উপসংহার

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