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

Una Kravets

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

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

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

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

ব্রাউজার সমর্থন

• 115
• 115
• 
• x

উৎস

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

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

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

ব্রাউজার সমর্থন

• 111
• 111
• x
• 18

উৎস

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

Airbnb- এ দেখা একটি একই-ডকুমেন্ট ভিউ ট্রানজিশন।

ম্যাক্সওয়েল বারভিয়ানের পোর্টফোলিও, ভিউগুলির মধ্যে ভিউ ট্রানজিশন দেখায়৷

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

আপনার একক-পৃষ্ঠার অ্যাপ্লিকেশনে দৃশ্য ট্রানজিশনগুলিকে দ্রুত সক্ষম করার উপায়টি 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;
}

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

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

ব্রাউজার সমর্থন

• 125
• 125
• x
• 

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

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

ব্রাউজার সমর্থন

• 125
• 125
• x
• 18

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

পেজিনেশন ডেমোর রেকর্ডিং। প্রকারগুলি নির্ধারণ করে কোন অ্যানিমেশন ব্যবহার করতে হবে৷ সক্রিয় রূপান্তর প্রকারের জন্য শৈলীগুলি স্টাইল শীটে পৃথক করা হয়েছে।

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

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

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

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

ব্রাউজার সমর্থন

• 126
• 126
• x
• 

এই নতুন ক্রস-ডকুমেন্ট ফিচার সেটটিতে ওয়েব অভিজ্ঞতা রয়েছে যা একই-অরিজিনের মধ্যে থাকে, যেমন 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 নামক একটি বৈশ্বিক বৈশিষ্ট্য প্রেরণ করেছি, যা আমি ঘোষণা করতে পেরে উত্তেজিত বোধ করছি মাত্র কয়েক সপ্তাহ আগে বেসলাইনে নতুন উপলব্ধ স্থিতিতে পৌঁছেছি।

ব্রাউজার সমর্থন

• 114
• 114
• 125
• 17

উৎস

পপওভার উপাদানগুলি 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 কী বা ডবল টগলিং চাপলে পপওভার বন্ধ হয়ে যাবে এবং ফোকাস ফিরে আসবে।
• ডিফল্ট কম্পোনেন্ট বাইন্ডিং। : ব্রাউজার শব্দার্থগতভাবে একটি পপওভারকে তার ট্রিগারের সাথে সংযুক্ত করে।

গুরুত্বপূর্ণ: পপওভার অ্যাট্রিবিউটে অন্তর্নিহিতভাবে কোনো শব্দার্থিক অর্থ থাকে না, তাই পপওভার উপাদানটিকে আরও প্রাসঙ্গিক অর্থ প্রদান করতে আপনাকে এখনও সঠিক HTML বা ARIA ব্যবহার করতে হবে। উপরন্তু, পপওভার পৃষ্ঠার বাকি অংশটিকে অ-ইন্টারেক্টিভ বা ফোকাস ট্র্যাপ করতে জড় করে না। আপনি যদি এই ধরনের অভিজ্ঞতা চান, একটি <dialog> উপাদান সম্ভবত আরও উপযুক্ত।

GitHub হোমপেজে মেনু।

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

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

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

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

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

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

ব্রাউজার সমর্থন

• 117
• 117
• 129
• 17.4

উৎস

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

ব্রাউজার সমর্থন

• 117
• 117
• 129
• 17.5

উৎস

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

ব্রাউজার সমর্থন

• 117
• 117
• x
• x

উৎস

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

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

লাইভ ডেমো

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 থেকে উপলব্ধ।

ব্রাউজার সমর্থন

• 125
• 125
• x
• x

উৎস

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

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

লাইভ ডেমো

অ্যাঙ্করিং এলিমেন্টে 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;
}

দ্রষ্টব্য: মনে রাখবেন, এটি এই পর্যায়ে একটি পরীক্ষামূলক API এবং তাই এই সিনট্যাক্স পরিবর্তন হতে পারে।

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 টিম ফোকাস করছে৷ প্রথম অতিরিক্ত উপাদান আপডেট হল একচেটিয়া অ্যাকর্ডিয়ন তৈরি করার ক্ষমতা, যেখানে অ্যাকর্ডিয়নের আইটেমগুলির মধ্যে একটি একবারে খোলা যেতে পারে।

ব্রাউজার সমর্থন

• 120
• 120
• 130
• 17.2

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

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

<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-এর মতই আচরণ করে, কিন্তু একজন ব্যবহারকারী ইনপুটের সাথে উল্লেখযোগ্যভাবে ইন্টারঅ্যাক্ট করার পরেই একটি ফর্ম নিয়ন্ত্রণের সাথে মেলে৷ এর অর্থ হল একটি ফর্ম মানটির সাথে ইন্টারঅ্যাক্ট করা হয়েছে কিনা বা "নোংরা" হয়ে গেছে কিনা তা নির্ধারণ করার জন্য উল্লেখযোগ্যভাবে কম কোডের প্রয়োজন, যা ব্যবহারকারীর প্রতিক্রিয়া প্রদানের জন্য খুব কার্যকর হতে পারে এবং এটি করার জন্য প্রয়োজনীয় অনেক স্ক্রিপ্টিং হ্রাস করে। অতীত

ব্রাউজার সমর্থন

• 119
• 119
• ৮৮
• 16.5

উৎস

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

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 টেক্সটেরিয়াগুলির জন্য বিশেষভাবে সুবিধাজনক হতে পারে, কারণ আপনি আর নির্দিষ্ট মাপের সমাধান করছেন না যেখানে আপনি একটি খুব ছোট ইনপুট বাক্সে আপনার প্রম্পটের আগের অংশগুলিতে কী লিখেছেন তা দেখতে আপনাকে স্ক্রোল করতে হবে।

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

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 অনুভব করে এবং আমি অতীতে যা ব্যবহার করেছি তার মতো।

ব্রাউজার সমর্থন

• 120
• 120
• 117
• 17.2

উৎস

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

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

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

ব্রাউজার সমর্থন

• 123
• 123
• 125
• 17.4

স্ক্রিনশট

লাইভ ডেমো

div {
  align-content: center;
}

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

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

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

নিম্নলিখিত ডেমোতে আপনি স্লাইডার টেনে তুলনা করতে পারেন, একটি শিরোনাম এবং একটি অনুচ্ছেদে balance এবং pretty প্রভাব। ডেমোটিকে অন্য ভাষায় অনুবাদ করার চেষ্টা করুন!

h1 {
  text-wrap: balance;
}

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

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

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

ব্রাউজার সমর্থন

• 119
• 119
• x
• x

word-break: normal এবং word-break: auto-phrase

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

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

যখন বিরাম চিহ্নগুলি একটি সারিতে উপস্থিত হয়, তখন CJK পিরিয়ডের ডান-অর্ধেক সরানো উচিত।

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

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

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

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

নিম্নলিখিত ডেমোতে আপনি স্লাইডার টেনে তুলনা করতে পারেন, একটি শিরোনাম এবং একটি অনুচ্ছেদে balance এবং pretty প্রভাব। ডেমোটিকে অন্য ভাষায় অনুবাদ করার চেষ্টা করুন!

: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() ফাংশনের পাশাপাশি, থিমিং অনেক বেশি গতিশীল এবং সরলীকৃত হয়েছে।

ব্রাউজার সমর্থন

• 123
• 123
• 120
• 17.5

উৎস

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

light-dark() এর ভিজ্যুয়ালাইজেশন। আরো জন্য ডেমো দেখুন.

html {
  color-scheme: light dark;
}

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

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

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

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

ব্রাউজার সমর্থন

• 105
• 105
• 121
• 15.4

উৎস

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

has() এর ডেমো টোকোপিডিয়াতে তুলনামূলক ব্লক স্টাইল করতে ব্যবহৃত হচ্ছে।

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

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

ধারক প্রশ্ন

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

ব্রাউজার সমর্থন

• 105
• 105
• 110
• 16

উৎস

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

Angular.dev সাইট হেডার কার্ডে কন্টেইনার কোয়েরি দেখায়।

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

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

কৌণিক হেডার কার্ড কন্টেইনার ক্যোয়ারী পুনরায় তৈরি করা হচ্ছে।

@property

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

ব্রাউজার সমর্থন

• 85
• 85
• 128
• 16.4

উৎস

ডেমো স্ক্রিনকাস্ট

লাইভ ডেমো

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

উপসংহার

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

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

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

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