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 ভিডিওগুলি দেখুন৷

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 পরিসর শেষ হয় এবং যেখানে বিস্তৃত-গামুট রঙের পরিসর শুরু হয় তা বর্ণনা করে।

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

রঙ-মিশ্রণ()

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

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% অস্বচ্ছ ব্র্যান্ডের রঙ পাবেন। আপনি দেখতে পারেন যে এটি কীভাবে আপনাকে দ্রুত রঙ সিস্টেম তৈরি করতে সক্ষম করে।

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

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

CSS ফাউন্ডেশন

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

বাসা বাঁধে

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

.card {}
.card:hover {}

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

  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

সিএসএস-ক্যাসকেড -6 স্পেসিফিকেশনটিতে @scope সম্পর্কে আরও জানুন।

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

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

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

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

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

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

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

.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 */
}

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

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

.target:hover {
  scale: 2;
}

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

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

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

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

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

পপওভার

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

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

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

পপওভারের জন্য ডিওএম কাঠামো ঘোষিত এবং আপনার পপওভার উপাদানকে একটি 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 উপাদানগুলি অন্য কোনও উপাদান প্রকারকে জোর করে না, অবিলম্বে ফোকাস গ্রহণ করে না এবং হালকা-বিভ্রান্ত করবেন না। তারা একটি টগল বা অন্যান্য ঘনিষ্ঠ ক্রিয়া মাধ্যমে বন্ধ।

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

অ্যাঙ্কর অবস্থান

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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));
}

রূপান্তরটি দেখতে কেমন হওয়া উচিত তা সিএসএসের মাধ্যমে নিয়ন্ত্রণ করা হয়

@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;
}

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

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

উপসংহার

সিএসএস এবং এইচটিএমএল -এর সর্বশেষতম সমস্ত অবতরণকে ঠিক এখানে বিকাশকারী.ক্রোম.কম এ চালিয়ে যান এবং আরও ওয়েব অবতরণের জন্য আই/ও ভিডিওগুলি দেখুন।