CSS এবং ওয়েব UI-তে সর্বশেষ: I/O 2024 রিক্যাপ

Una Kravets

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

অভিনব ইন্টারেক্টিভ অভিজ্ঞতা

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

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

নামের মতই, স্ক্রোল-চালিত অ্যানিমেশন API আপনাকে স্ক্রোল পর্যবেক্ষক বা অন্যান্য ভারী স্ক্রিপ্টিংয়ের উপর নির্ভর না করে গতিশীল স্ক্রোল-ভিত্তিক অ্যানিমেশন তৈরি করতে দেয়।

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

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

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

ব্রাউজার সমর্থন এবং ব্যবহারকারীর পছন্দগুলি মাথায় রাখা গুরুত্বপূর্ণ, বিশেষ করে অ্যাক্সেসযোগ্যতার প্রয়োজনের জন্য৷ অতএব, ব্রাউজারটি স্ক্রোল-চালিত অ্যানিমেশন সমর্থন করে কিনা তা পরীক্ষা করতে @supports নিয়মটি ব্যবহার করুন এবং ব্যবহারকারীর গতি পছন্দকে সম্মান করতে @media (prefers-reduced-motion: no-preference) এর মতো ব্যবহারকারীর পছন্দের প্রশ্নে আপনার স্ক্রোল-চালিত অ্যানিমেশনটি মুড়ে দিন। . এই চেকগুলি করার পরে আপনি জানেন যে আপনার শৈলী কাজ করবে, এবং অ্যানিমেশন ব্যবহারকারীর জন্য সমস্যাযুক্ত নয়।

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

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

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

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

"আমরা প্রচলিত JS স্ক্রোল ইভেন্টগুলি ব্যবহার করার তুলনায় আমাদের কোডের লাইনের 80% পর্যন্ত কমাতে পেরেছি এবং লক্ষ্য করেছি যে স্ক্রল করার সময় গড় CPU ব্যবহার 50% থেকে 2% কমে গেছে৷ - অ্যান্ডি উইহালিম, সিনিয়র সফ্টওয়্যার ইঞ্জিনিয়ার, টোকোপিডিয়া"

স্ক্রোল প্রভাব ভবিষ্যত

আমরা জানি এই প্রভাবগুলি ওয়েবকে আরও আকর্ষক জায়গা করে তুলবে, এবং আমরা ইতিমধ্যেই ভাবছি পরবর্তী কী হতে পারে৷ এর মধ্যে রয়েছে শুধু নতুন অ্যানিমেশন টাইমলাইন ব্যবহার করার ক্ষমতা নয়, স্ক্রল-ট্রিগারড অ্যানিমেশন নামে একটি অ্যানিমেশন শুরু করার জন্য একটি স্ক্রল পয়েন্ট ব্যবহার করার ক্ষমতাও রয়েছে।

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

আপনি জাভাস্ক্রিপ্ট scrollsnapchanging ইভেন্টের সাথে রিয়েল টাইমে একটি পিকার আপডেট করতে এটি তৈরি করতে পারেন।

এই বিশেষ বৈশিষ্ট্যগুলি বর্তমানে শুধুমাত্র একটি পতাকার পিছনে ক্যানারিতে রয়েছে, তবে তারা প্ল্যাটফর্মে তৈরি করা অসম্ভব বা খুব কঠিন ক্ষমতাগুলি আনলক করে এবং স্ক্রোল-ভিত্তিক ইন্টারঅ্যাকশন সম্ভাবনার ভবিষ্যত হাইলাইট করে।

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

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

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

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

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

আপনার একক-পৃষ্ঠার অ্যাপ্লিকেশনে দৃশ্য ট্রানজিশনগুলিকে দ্রুত সক্ষম করার উপায়টি document.startViewTransition ব্যবহার করে একটি ইন্টারঅ্যাকশন মোড়ানোর মতোই সহজ, এবং নিশ্চিত করা যে প্রতিটি উপাদানের একটি view-transition-name আছে, ইনলাইন বা গতিশীলভাবে জাভাস্ক্রিপ্ট ব্যবহার করে আপনি তৈরি করেছেন DOM নোড।

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

ট্রানজিশন ক্লাস দেখুন

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

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

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

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

আপনি আপনার document.startViewTransition ফাংশনের মধ্যে প্রকারগুলি সেট আপ করতে পারেন, যা এখন একটি বস্তুকে গ্রহণ করে। update হল কলব্যাক ফাংশন যা DOM আপডেট করে এবং types প্রকারের সাথে একটি অ্যারে।

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

মাল্টি-পেজ ভিউ ট্রানজিশন

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

এই নতুন ক্রস-ডকুমেন্ট ফিচার সেটটিতে ওয়েব অভিজ্ঞতা রয়েছে যা একই-অরিজিনের মধ্যে থাকে, যেমন web.dev থেকে web.dev/blog-এ নেভিগেট করা, কিন্তু এতে ক্রস-অরিজিন নেভিগেট করা অন্তর্ভুক্ত নয়, যেমন web.dev থেকে নেভিগেট করা blog.web.dev বা google.com এর মত অন্য ডোমেনে।

একই-ডকুমেন্ট ভিউ ট্রানজিশনের সাথে একটি মূল পার্থক্য হল যে আপনাকে document.startViewTransition() দিয়ে আপনার ট্রানজিশন মোড়ানোর দরকার নেই। পরিবর্তে, CSS @view-transition at-rule ব্যবহার করে ভিউ ট্রানজিশনের সাথে জড়িত উভয় পৃষ্ঠা বেছে নিন।

@view-transition {
  navigation: auto;
}

আরও কাস্টম প্রভাবের জন্য, আপনি নতুন pageswap বা pagereveal ইভেন্ট লিসেনার ব্যবহার করে জাভাস্ক্রিপ্টে হুক করতে পারেন, যা আপনাকে ভিউ ট্রানজিশন অবজেক্টে অ্যাক্সেস দেয়।

pageswap এর মাধ্যমে আপনি পুরানো স্ন্যাপশট নেওয়ার ঠিক আগে বহির্গামী পৃষ্ঠায় কিছু শেষ-মুহূর্ত পরিবর্তন করতে পারেন, এবং pagereveal সহ নতুন পৃষ্ঠাটি শুরু হওয়ার পরে রেন্ডার শুরু হওয়ার আগে কাস্টমাইজ করুন।

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

ভবিষ্যতে, আমরা ভিউ ট্রানজিশন প্রসারিত করার পরিকল্পনা করছি, যার মধ্যে রয়েছে:

• স্কোপড ট্রানজিশন : আপনাকে একটি DOM সাবট্রিতে একটি ট্রানজিশন সীমিত করতে দেয়, বাকি পৃষ্ঠাটিকে ইন্টারেক্টিভ হতে সক্ষম করে এবং একই সময়ে চলমান একাধিক ভিউ ট্রানজিশন সমর্থন করে।
• অঙ্গভঙ্গি-চালিত ভিউ ট্রানজিশন : ওয়েবে আরও নেটিভ-মত অভিজ্ঞতার জন্য ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন ট্রিগার করতে টেনে আনা বা সোয়াইপ অঙ্গভঙ্গি ব্যবহার করুন।
• CSS-এ ন্যাভিগেশন ম্যাচিং : জাভাস্ক্রিপ্টে pageswap এবং pagereveal ইভেন্টগুলি ব্যবহার করার বিকল্প হিসাবে সরাসরি আপনার CSS-এ আপনার ক্রস-ডকুমেন্ট ভিউ ট্রানজিশন কাস্টমাইজ করুন, মাল্টি-পেজ অ্যাপ্লিকেশানগুলির জন্য ভিউ ট্রানজিশন সম্বন্ধে আরও জানতে, কীভাবে সেগুলিকে প্রাক-এর সাথে সবচেয়ে কার্যকরীভাবে সেট আপ করা যায়। রেন্ডারিং, ব্রামুস ভ্যান ড্যামের নিম্নলিখিত আলোচনাটি দেখুন:

ইঞ্জিন-সক্ষম UI উপাদান: জটিল মিথস্ক্রিয়া সরলীকরণ

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

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

একটি ড্রপডাউনে অনেকগুলি অংশ থাকে এবং এতে অনেকগুলি রাজ্য অন্তর্ভুক্ত থাকে যেগুলির জন্য অবশ্যই অ্যাকাউন্ট করা উচিত, যেমন:

• কীবোর্ড বাইন্ডিং (মিথস্ক্রিয়া প্রবেশ/প্রস্থান করতে)
• খারিজ করতে ক্লিক করুন
• সক্রিয় পপওভার ম্যানেজমেন্ট (একটি খোলা হলে অন্যান্য পপওভার বন্ধ করুন)
• ট্যাব ফোকাস ব্যবস্থাপনা
• নির্বাচিত বিকল্প মান ভিজ্যুয়ালাইজ করা
• তীর মিথস্ক্রিয়া শৈলী
• রাজ্য ব্যবস্থাপনা (খোলা/বন্ধ)

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

Popover API

প্রথমে আমরা popover নামক একটি বৈশ্বিক বৈশিষ্ট্য প্রেরণ করেছি, যা আমি ঘোষণা করতে পেরে উত্তেজিত বোধ করছি মাত্র কয়েক সপ্তাহ আগে বেসলাইনে নতুন উপলব্ধ স্থিতিতে পৌঁছেছি।

পপওভার উপাদানগুলি display: none ৷ একটি মৌলিক পপওভার তৈরি করতে, উপাদানটিতে পপওভার অ্যাট্রিবিউট সেট করুন এবং popovertarget ব্যবহার করে একটি বোতামের সাথে এর ID লিঙ্ক করুন। এখন, বোতামটি আহ্বানকারী,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

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

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

এমনকি আপনি এটি উপলব্ধি না করেই আজ এই পপওভার API ব্যবহার করছেন। GitHub তাদের হোমপেজে "নতুন" মেনুতে এবং তাদের পুল অনুরোধ পর্যালোচনা ওভারভিউতে পপওভার প্রয়োগ করেছে। পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য GitHub এর নিজস্ব Keith Cirkel থেকে কিছু উল্লেখযোগ্য সমর্থনে Oddbird দ্বারা নির্মিত পপওভার পলিফিল ব্যবহার করে তারা এই বৈশিষ্ট্যটি ক্রমাগতভাবে উন্নত করেছে।

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

অ্যানিমেটিং এন্ট্রি এবং প্রস্থান প্রভাব

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

একটি কীফ্রেম টাইমলাইনে display এবং content-visibility অ্যানিমেট করার ক্ষমতা।

display মত পৃথক বৈশিষ্ট্যের রূপান্তর সক্ষম করতে allow-discrete কীওয়ার্ড সহ transition-behavior বৈশিষ্ট্য।

display: none থেকে এন্ট্রি ইফেক্ট অ্যানিমেট করার জন্য @starting-style নিয়ম: কোনোটি নয় এবং শীর্ষ-স্তরে ।

একটি অ্যানিমেশন চলাকালীন শীর্ষ-স্তরের আচরণ নিয়ন্ত্রণ করার জন্য ওভারলে বৈশিষ্ট্য।

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

প্রথমে, @starting-style সেট আপ করুন, যাতে ব্রাউজার জানতে পারে কোন স্টাইল থেকে এই উপাদানটিকে DOM-এ অ্যানিমেট করতে হবে। এটি ডায়ালগ এবং ব্যাকড্রপ উভয়ের জন্যই করা হয়। তারপরে, ডায়ালগ এবং ব্যাকড্রপ উভয়ের জন্য খোলা অবস্থায় স্টাইল করুন। একটি ডায়ালগের জন্য, এটি open অ্যাট্রিবিউট ব্যবহার করে এবং একটি পপওভারের জন্য ::popover-open সিউডো-এলিমেন্ট ব্যবহার করে। অবশেষে, অ্যানিমেশন মোড সক্রিয় করতে allow-discrete কীওয়ার্ড ব্যবহার করে opacity , display এবং overlay অ্যানিমেট করুন যেখানে পৃথক বৈশিষ্ট্যগুলি স্থানান্তর করতে পারে।

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

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

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

অ্যাঙ্করিং এলিমেন্টে anchor-name প্রপার্টি (এই ক্ষেত্রে বোতাম), এবং position-anchor প্রোপার্টি (এই ক্ষেত্রে, টুলটিপ) ব্যবহার করে সিএসএস-এ একটি অ্যাঙ্কর পজিশনযুক্ত সম্পর্ক সেট আপ করুন। তারপর, anchor() ফাংশন ব্যবহার করে অ্যাঙ্করের সাপেক্ষে পরম বা স্থির অবস্থান প্রয়োগ করুন। নীচের কোডটি টুলটিপের শীর্ষে বোতামের নীচে অবস্থান করে।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

বিকল্পভাবে, অ্যাঙ্কর ফাংশনে সরাসরি অ্যাঙ্কর-নাম ব্যবহার করুন এবং position-anchor প্রপার্টি এড়িয়ে যান। একাধিক উপাদানে নোঙ্গর করার সময় এটি কার্যকর হতে পারে।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

সবশেষে, justify এবং align বৈশিষ্ট্যগুলির জন্য নতুন anchor-center কীওয়ার্ড ব্যবহার করুন যাতে অবস্থান করা উপাদানটিকে তার অ্যাঙ্করে কেন্দ্র করে।

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

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

এই উদাহরণটি left , right এবং bottom ভৌত বৈশিষ্ট্যগুলি ব্যবহার করে অ্যাঙ্কর অবস্থান সেট আপ করতে অ্যাঙ্কর ফাংশন ব্যবহার করে। আপনি যখন একটি লিঙ্কের উপর হোভার করেন, তখন লক্ষ্য নোঙ্গর পরিবর্তিত হয় এবং ব্রাউজার পজিশনিং প্রয়োগ করতে লক্ষ্য স্থানান্তরিত করে, একই সাথে একটি ঝরঝরে প্রভাব তৈরি করতে রঙকে অ্যানিমেট করে।

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area পজিশনিং

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

প্রথম অ্যাঙ্কর ডেমোর একটি সরলীকৃত সংস্করণ inset-area সহ এইরকম দেখায়:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

position-try-options সহ গতিশীল অ্যাঙ্কর পজিশন

মেনু এবং সাবমেনু নেভিগেশন পপওভার এবং অ্যাঙ্কর পজিশনিং এর সমন্বয়ে তৈরি করা অনেক সহজ। এবং, যখন আপনি আপনার নোঙ্গর করা উপাদানের সাথে একটি ভিউপোর্টের প্রান্তে আঘাত করেন, তখন আপনি ব্রাউজারটিকেও আপনার জন্য অবস্থান পরিবর্তন পরিচালনা করতে দিতে পারেন। আপনি কয়েকটি উপায়ে এটি করতে পারেন। প্রথমটি হল আপনার নিজস্ব পজিশনিং নিয়ম তৈরি করা। এই ক্ষেত্রে, সাবমেনু প্রাথমিকভাবে "স্টোরফ্রন্ট" বোতামের ডানদিকে অবস্থিত। কিন্তু আপনি একটি @position-try ব্লক তৈরি করতে পারেন যখন মেনুর ডানদিকে পর্যাপ্ত স্থান না থাকে, এটিকে --bottom এর একটি কাস্টম শনাক্তকারী প্রদান করে। তারপর, আপনি position-try-options ব্যবহার করে এই @position-try ব্লকটিকে অ্যাঙ্করের সাথে সংযুক্ত করুন।

এখন, ব্রাউজার এই নোঙ্গর করা অবস্থার মধ্যে স্যুইচ করবে, প্রথমে সঠিক অবস্থানের চেষ্টা করবে এবং তারপরে নীচের দিকে সরে যাবে। এবং এটি একটি সুন্দর রূপান্তর দিয়ে করা যেতে পারে।

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

সুস্পষ্ট পজিশনিং লজিকের পাশাপাশি, কিছু কীওয়ার্ড আছে ব্রাউজার প্রদান করে যদি আপনি কিছু মৌলিক ইন্টারঅ্যাকশন চান যেমন ব্লকে আপনার অ্যাঙ্কর ফ্লিপ করা বা ইনলাইন দিকনির্দেশ।

position-try-options: flip-block, flip-inline;

একটি সাধারণ ফ্লিপিং অভিজ্ঞতার জন্য, এই ফ্লিপ কীওয়ার্ড মানগুলির সুবিধা নিন এবং সম্পূর্ণভাবে একটি position-try সংজ্ঞা লেখা এড়িয়ে যান। তাই এখন আপনার কাছে CSS-এর মাত্র কয়েকটি লাইনের সাথে একটি সম্পূর্ণ কার্যকরী অবস্থান-প্রতিক্রিয়াশীল অ্যাঙ্কর পজিশনযুক্ত উপাদান থাকতে পারে।

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

অ্যাঙ্কর পজিশনিং ব্যবহার সম্পর্কে আরও জানুন।

স্তরযুক্ত UI এর ভবিষ্যত

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

এছাড়াও, ক্যানারিতে পরীক্ষা করার জন্য আরও একটি ভবিষ্যত-মুখী সাধারণ আমন্ত্রণকারী ( invoketarget ) উপলব্ধ রয়েছে, দুই তৃতীয় পক্ষের বিকাশকারী, কিথ সার্কেল এবং লুক ওয়ারলোর কাজের জন্য ধন্যবাদ৷ invoketarget ঘোষণামূলক বিকাশকারীর অভিজ্ঞতাকে সমর্থন করে যা popovertarget পপোভার প্রদান করে, <dialog> , <details> , <video> , <input type="file"> এবং আরও অনেক কিছু সহ সমস্ত ইন্টারেক্টিভ উপাদানের জন্য স্বাভাবিক করা হয়।

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

স্টাইলেবল নির্বাচন

popover এবং anchor একসাথে ব্যবহার করে, দলটি অবশেষে একটি কাস্টমাইজযোগ্য নির্বাচন ড্রপডাউন সক্ষম করার বিষয়ে অগ্রগতি করছে। ভালো খবর হলো অনেক অগ্রগতি হয়েছে। খারাপ খবর হল যে এই APIটি এই সময়ে একটি পরীক্ষামূলক অবস্থায় এখনও অনেক বেশি। যাইহোক, আমি আমাদের অগ্রগতির কিছু লাইভ ডেমো এবং আপডেট শেয়ার করতে পেরে উত্তেজিত এবং আশা করি আপনার কিছু প্রতিক্রিয়া পাব। প্রথমত, ব্যবহারকারীদের নতুন, কাস্টমাইজযোগ্য নির্বাচন অভিজ্ঞতায় কীভাবে বেছে নেওয়া যায় সে বিষয়ে অগ্রগতি হয়েছে। এটি করার বর্তমান, কাজ-প্রগতির উপায় হল CSS-এ একটি উপস্থিতি বৈশিষ্ট্য ব্যবহার করা, appearance: base-select । একবার উপস্থিতি সেট হয়ে গেলে, আপনি একটি নতুন, কাস্টমাইজযোগ্য নির্বাচন অভিজ্ঞতা বেছে নেবেন।

select {
  appearance: base-select;
}

appearance: base-select , কিছু নতুন HTML আপডেট আছে। এর মধ্যে রয়েছে কাস্টমাইজেশনের জন্য একটি datalist আপনার বিকল্পগুলি মোড়ানোর ক্ষমতা এবং আপনার বিকল্পগুলিতে চিত্রগুলির মতো নির্বিচারে অ-ইন্টারেক্টিভ সামগ্রী যুক্ত করার ক্ষমতা। আপনার কাছে একটি নতুন উপাদানের অ্যাক্সেসও থাকবে, <selectedoption> , যা বিকল্পগুলির বিষয়বস্তুকে নিজের মধ্যে প্রতিফলিত করবে, যা আপনি নিজের প্রয়োজনে কাস্টমাইজ করতে পারবেন। এই উপাদান সত্যিই সহজ.

ডেমো ভিজ্যুয়াল

লাইভ ডেমো

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

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

ডেমো ভিজ্যুয়াল

লাইভ ডেমো

selectedoption .text {
  display: none;
}

এই API-এর জন্য <select> উপাদান পুনঃব্যবহারের সবচেয়ে বড় সুবিধাগুলির মধ্যে একটি হল পিছনের সামঞ্জস্যতা। এই দেশে নির্বাচন করুন, আপনি সামগ্রীর সহজে ব্যবহারকারী-পার্সিংয়ের বিকল্পগুলিতে পতাকা চিত্র সহ একটি কাস্টমাইজড UI দেখতে পারেন। যেহেতু অ-সমর্থিত ব্রাউজারগুলি তারা বুঝতে পারে না এমন লাইনগুলিকে উপেক্ষা করবে, যেমন কাস্টম বোতাম, ডেটালিস্ট, নির্বাচিত বিকল্প এবং বিকল্পগুলির মধ্যে থাকা চিত্রগুলি, ফলব্যাকটি বর্তমান ডিফল্ট নির্বাচন UI এর মতোই হবে৷

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

এক্সক্লুসিভ অ্যাকর্ডিয়ন

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

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

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid এবং :user-invalid

আরেকটি UI উপাদান উন্নতি হল :user-valid এবং :user-invalid pseudo-classes। সম্প্রতি সমস্ত ব্রাউজারে স্থিতিশীল, :user-valid এবং :user-invalid pseudo-classগুলি :valid এবং :invalid pseudo-class-এর মতই আচরণ করে, কিন্তু একজন ব্যবহারকারী ইনপুটের সাথে উল্লেখযোগ্যভাবে ইন্টারঅ্যাক্ট করার পরেই একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে৷ এর অর্থ হল একটি ফর্ম মানটির সাথে ইন্টারঅ্যাক্ট করা হয়েছে কিনা বা "নোংরা" হয়ে গেছে কিনা তা নির্ধারণ করার জন্য উল্লেখযোগ্যভাবে কম কোডের প্রয়োজন, যা ব্যবহারকারীর প্রতিক্রিয়া প্রদানের জন্য খুব কার্যকর হতে পারে এবং এটি করার জন্য প্রয়োজনীয় অনেক স্ক্রিপ্টিং হ্রাস করে। অতীত

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

ব্যবহারকারী-* ফর্ম যাচাইকরণ ছদ্ম-উপাদানগুলি ব্যবহার সম্পর্কে আরও জানুন।

field-sizing: content

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

textarea, select, input {
  field-sizing: content;
}

ফিল্ড সাইজিং সম্পর্কে আরও জানুন।

<hr> <select> এ

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

স্ক্রিনশট নির্বাচন করুন

লাইভ ডেমো নির্বাচন করুন

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

সিলেক্টে hr ব্যবহার করার বিষয়ে আরও জানুন

মানের-জীবনের উন্নতি

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

বাসা বাঁধছে সামনের দিকে

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

ব্লক লেআউটের জন্য সারিবদ্ধ-সামগ্রী

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

স্ক্রিনশট

লাইভ ডেমো

div {
  align-content: center;
}

পাঠ্য-মোড়ানো: ভারসাম্য এবং সুন্দর

লেআউটের কথা বললে, text-wrap: balance এবং pretty । text-wrap: balance টেক্সটের আরও অভিন্ন ব্লকের জন্য ব্যবহার করা হয়, যখন text-wrap: pretty টেক্সটের শেষ লাইনে সিঙ্গেলটন কমানোর উপর মনোযোগ দেয়।

h1 {
  text-wrap: balance;
}

টেক্সট-র্যাপ: ব্যালেন্স সম্পর্কে আরও জানুন।

আন্তর্জাতিক টাইপোগ্রাফি আপডেট

CJK টেক্সট বৈশিষ্ট্যগুলির জন্য টাইপোগ্রাফিক লেআউট আপডেটগুলি গত বছরে অনেকগুলি চমৎকার আপডেট পেয়েছে, যেমন word-break: auto-phrase বৈশিষ্ট্য যা স্বাভাবিক বাক্যাংশের সীমানায় রেখাটিকে মোড়ানো।

এবং text-spacing-trim , যা আরও দৃশ্যত আনন্দদায়ক ফলাফলের জন্য চাইনিজ, জাপানিজ এবং কোরিয়ান টাইপোগ্রাফির পঠনযোগ্যতা উন্নত করতে বিরামচিহ্নের অক্ষরের মধ্যে কার্নিং প্রয়োগ করে।

আপেক্ষিক রঙ সিনট্যাক্স

রঙের থিমিংয়ের জগতে, আমরা আপেক্ষিক রঙের সিনট্যাক্স সহ একটি বড় আপডেট দেখেছি।

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

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() ফাংশন

light-dark() ফাংশনের পাশাপাশি, থিমিং আরও বেশি গতিশীল এবং সরলীকৃত হয়ে উঠেছে।

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

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

যদি ব্যবহারকারী কোনও হালকা থিম নির্বাচন করে তবে বোতামটির হালকা নীল পটভূমি থাকবে। যদি ব্যবহারকারী একটি গা dark ় থিম নির্বাচন করে তবে বোতামটির গা dark ় নীল পটভূমি থাকবে।

:has() নির্বাচক

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

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

:has() ইতিমধ্যে পলিসিবাজার সহ অনেক সংস্থার জন্য বিশেষভাবে কার্যকর হিসাবে দেখানো হয়েছে, যারা ব্যবহার করেন :has() , যেমন তুলনা বিভাগে রয়েছে, যেখানে স্টাইলটি সামঞ্জস্য হয় যেখানে কোনও পরিকল্পনা থাকলে স্টাইলটি সামঞ্জস্য করে ব্লকের সাথে তুলনা করুন, বা এটি খালি থাকলে।

"এর সাথে: () নির্বাচকের সাথে আমরা ব্যবহারকারীর নির্বাচনের জাভাস্ক্রিপ্ট ভিত্তিক বৈধতা দূর করতে এবং এটিকে একটি সিএসএস সমাধানের সাথে প্রতিস্থাপন করতে সক্ষম হয়েছি যা আমাদের জন্য একযোগে কাজ করছে যা আগের মতো একই অভিজ্ঞতার সাথে আমাদের জন্য নির্বিঘ্নে কাজ করছে।

ধারক অনুসন্ধানগুলি

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

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

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

@property

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

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

উপসংহার

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

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

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

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