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

Chrome 111 ত্রিকোণমিতিক ফাংশন sin() , cos() , tan() , asin() , acos() , atan() , এবং atan2() এর জন্য সমর্থন যোগ করেছে, যা এগুলিকে সমস্ত প্রধান ইঞ্জিন জুড়ে উপলব্ধ করে। এই ফাংশনগুলি অ্যানিমেশন এবং লেআউট উদ্দেশ্যে খুব কার্যকর। উদাহরণস্বরূপ, একটি নির্বাচিত কেন্দ্রের চারপাশে একটি বৃত্তে উপাদানগুলি স্থাপন করা এখন অনেক সহজ।

CSS-এ ত্রিকোণমিতিক ফাংশন সম্পর্কে আরও জানুন।

জটিল nth-* নির্বাচন

:nth-child() ছদ্ম-শ্রেণির নির্বাচকের সাহায্যে DOM-এর উপাদানগুলিকে তাদের সূচী অনুসারে নির্বাচন করা সম্ভব। An+B মাইক্রোসিনট্যাক্স ব্যবহার করে আপনি কোন উপাদান নির্বাচন করতে চান তার উপর সূক্ষ্ম নিয়ন্ত্রণ পাবেন।

ডিফল্টরূপে :nth-*() ছদ্মগুলি সমস্ত চাইল্ড উপাদানগুলিকে বিবেচনা করে। Chrome 111-এর হিসাবে আপনি, ঐচ্ছিকভাবে, একটি নির্বাচক তালিকা পাস করতে পারেন :nth-child() এবং :nth-last-child() ৷ এইভাবে আপনি An+B কাজ করার আগে বাচ্চাদের তালিকা প্রিফিল্টার করতে পারেন।

নিম্নলিখিত ডেমোতে, of .small ব্যবহার করে 3n+1 লজিক শুধুমাত্র ছোট পুতুলগুলিতে প্রিফিল্টার করে প্রয়োগ করা হয়েছে। ব্যবহৃত নির্বাচককে গতিশীলভাবে পরিবর্তন করতে ড্রপডাউনগুলি ব্যবহার করুন।

জটিল nth-* নির্বাচন সম্পর্কে আরও জানুন।

ব্যাপ্তি

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

একটি স্কোপড সাবট্রি একটি স্কোপিং রুট (উপরের সীমানা) এবং একটি ঐচ্ছিক স্কোপিং সীমা (নিম্ন সীমানা) দ্বারা সংজ্ঞায়িত করা হয়।

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

একটি স্কোপ ব্লকের ভিতরে স্থাপিত শৈলীর নিয়মগুলি শুধুমাত্র খোদাই করা সাবট্রির মধ্যে থাকা উপাদানগুলিকে লক্ষ্য করবে। উদাহরণস্বরূপ, নিম্নলিখিত স্কোপড স্টাইল নিয়মটি শুধুমাত্র <img> উপাদানগুলিকে লক্ষ্য করে যেগুলি .card উপাদান এবং [data-component] নির্বাচক দ্বারা মেলে যে কোনও নেস্টেড উপাদানের মধ্যে বসে।

@scope (.card) to ([data-component]) {
  img { … }
}

নিম্নলিখিত ডেমোতে, প্রয়োগকৃত স্কোপিং সীমার কারণে ক্যারোজেল উপাদানের <img> উপাদানগুলি মেলে না।

স্কোপ ডেমো স্ক্রিনশট

স্কোপ লাইভ ডেমো

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

বাসা বাঁধে

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

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

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

নেস্টিং সম্পর্কে আরও জানুন।

সাবগ্রিড

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

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

সাবগ্রিড সম্পর্কে আরও জানুন।

প্রাথমিক-পত্র

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

প্রাথমিক-অক্ষরের স্ক্রিনশট

প্রারম্ভিক-অক্ষর ডেমো

প্রাথমিক-অক্ষর সম্পর্কে আরও জানুন।

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

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

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

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

এইচডি কালার স্পেস (কালার লেভেল 4)

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

CSS এবং রঙ এখন করতে পারেন: - ব্যবহারকারীদের স্ক্রীন হার্ডওয়্যার ব্যাপক স্বরগ্রাম HDR রঙে সক্ষম কিনা তা পরীক্ষা করুন। - ব্যবহারকারীর ব্রাউজার Oklch বা Display P3 এর মতো রঙের সিনট্যাক্স বোঝে কিনা তা পরীক্ষা করুন। - Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, এবং আরও অনেক কিছুতে HDR রং নির্দিষ্ট করুন। - HDR রং দিয়ে গ্রেডিয়েন্ট তৈরি করুন, - বিকল্প রঙের জায়গায় গ্রেডিয়েন্ট ইন্টারপোলেট করুন। - color-mix() এর সাথে রং মিশ্রিত করুন। - আপেক্ষিক রঙ সিনট্যাক্স সহ রঙের বৈকল্পিক তৈরি করুন।

রঙ 4 এবং রঙের স্থান সম্পর্কে আরও জানুন।

রঙ-মিশ্রণ ফাংশন

রঙ মেশানো একটি ক্লাসিক কাজ এবং 2023 সালে CSS এটিও করতে পারে। আপনি শুধুমাত্র একটি রঙে সাদা বা কালো মিশ্রিত করতে পারেন না, তবে স্বচ্ছতাও করতে পারেন এবং আপনার পছন্দের যেকোনো রঙের জায়গায় এই সব করতে পারেন। এটি একই সাথে একটি মৌলিক রঙের বৈশিষ্ট্য এবং একটি উন্নত রঙের বৈশিষ্ট্য।

আপনি একটি গ্রেডিয়েন্ট থেকে সময়ের মধ্যে একটি মুহূর্ত হিসাবে color-mix() ভাবতে পারেন। যেখানে একটি গ্রেডিয়েন্ট নীল থেকে সাদাতে যাওয়ার জন্য সমস্ত পদক্ষেপগুলি দেখায়, color-mix() শুধুমাত্র একটি ধাপ দেখায়। আপনি যখন রঙের স্থানগুলিকে বিবেচনায় নেওয়া শুরু করেন এবং ফলাফলের সাথে মিশ্রিত রঙের স্থান কতটা আলাদা হতে পারে তা শিখতে শুরু করলে জিনিসগুলি উন্নত হয়।

কালার-মিক্স() সম্পর্কে আরও জানুন।

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

আপেক্ষিক রঙের সিনট্যাক্স (RCS) রঙের বৈকল্পিক তৈরির জন্য color-mix() এর একটি পরিপূরক পদ্ধতি। এটি color-mix() এর চেয়ে কিছুটা বেশি শক্তিশালী তবে রঙের সাথে কাজ করার জন্য একটি ভিন্ন কৌশলও। রঙ হালকা করার জন্য color-mix() সাদা রঙে মিশে যেতে পারে, যেখানে RCS লাইটনেস চ্যানেলে সুনির্দিষ্ট অ্যাক্সেস দেয় এবং প্রোগ্রামগতভাবে লাইটনেস কমাতে বা বাড়াতে চ্যানেলে calc() ব্যবহার করার ক্ষমতা দেয়।

RCS আপনাকে একটি রঙের সাথে আপেক্ষিক এবং পরম ম্যানিপুলেশন করতে দেয়। একটি আপেক্ষিক পরিবর্তন হল এমন একটি যেখানে আপনি স্যাচুরেশন বা হালকাতার বর্তমান মান নেন এবং এটিকে calc() দিয়ে পরিবর্তন করেন। একটি সম্পূর্ণ পরিবর্তন হল যেখানে আপনি একটি চ্যানেলের মান সম্পূর্ণ নতুন দিয়ে প্রতিস্থাপন করেন, যেমন অপাসিটি 50% এ সেট করা। এই সিনট্যাক্স আপনাকে থিমিংয়ের জন্য অর্থপূর্ণ সরঞ্জাম দেয়, শুধু সময়ের বৈকল্পিক এবং আরও অনেক কিছু।

আপেক্ষিক রঙ সিনট্যাক্স সম্পর্কে আরও জানুন।

আকার ধারক প্রশ্ন

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

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

কন্টেইনার কোয়েরি ব্যবহার সম্পর্কে আরও জানুন।

শৈলী ধারক প্রশ্ন

স্টাইল কোয়েরিগুলি Chrome 111-এ আংশিক বাস্তবায়নের সাথে ল্যান্ড করেছে। বর্তমানে স্টাইল কোয়েরি সহ, আপনি @container style() ব্যবহার করার সময় একটি মূল উপাদানে কাস্টম বৈশিষ্ট্যের মান জিজ্ঞাসা করতে পারেন। উদাহরণস্বরূপ, যদি একটি কাস্টম সম্পত্তি মান বিদ্যমান থাকে, বা একটি নির্দিষ্ট মান সেট করা হয়, যেমন @container style(--rain: true) জিজ্ঞাসা করুন।

শৈলী ক্যোয়ারী স্ক্রিনশট

শৈলী ক্যোয়ারী ডেমো

যদিও এটি CSS-এ ক্লাসের নাম ব্যবহার করার মতো শোনাচ্ছে, স্টাইল কোয়েরির কিছু সুবিধা রয়েছে। প্রথমটি হল স্টাইল কোয়েরি সহ, আপনি সিউডো স্টেটের জন্য প্রয়োজন অনুসারে সিএসএস-এ মান আপডেট করতে পারেন। এছাড়াও, বাস্তবায়নের ভবিষ্যত সংস্করণগুলিতে, আপনি প্রয়োগ করা শৈলী নির্ধারণ করার জন্য মানগুলির পরিসর অনুসন্ধান করতে সক্ষম হবেন, যেমন style(60 <= --weather <= 70) , এবং স্টাইল সম্পত্তি-মান জোড়ার উপর ভিত্তি করে যেমন style(font-style: italic) ।

শৈলী প্রশ্ন ব্যবহার সম্পর্কে আরও জানুন।

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

প্রায় 20 বছর ধরে বিকাশকারীরা CSS-এ একজন "অভিভাবক নির্বাচক" চেয়েছিলেন। Chrome 105 এ পাঠানো :has() নির্বাচকের সাহায্যে এটি এখন সম্ভব। উদাহরণস্বরূপ, .card:has(img.hero) ব্যবহার করে .card উপাদানগুলি নির্বাচন করবে যেখানে শিশু হিসাবে একটি নায়কের ছবি রয়েছে।

:has() ডেমো স্ক্রিনশট

:has() লাইভ ডেমো

কারণ :has() একটি আপেক্ষিক নির্বাচক তালিকা তার যুক্তি হিসাবে গ্রহণ করে, আপনি মূল উপাদানের চেয়ে অনেক বেশি নির্বাচন করতে পারেন। বিভিন্ন CSS কম্বিনেটর ব্যবহার করে, শুধুমাত্র DOM ট্রি পর্যন্ত যাওয়াই সম্ভব নয়, পাশাপাশি সাইডওয়ে সিলেকশনও করা সম্ভব। উদাহরণস্বরূপ, li:has(+ li:hover) <li> উপাদানটি নির্বাচন করবে যা বর্তমানে হোভার করা <li> উপাদানের পূর্বে রয়েছে।

CSS :has() নির্বাচক সম্পর্কে আরও জানুন।

মিডিয়া ক্যোয়ারী আপডেট করুন

update মিডিয়া ক্যোয়ারী আপনাকে একটি ডিভাইসের রিফ্রেশ হারের সাথে UI মানিয়ে নেওয়ার একটি উপায় দেয়৷ বৈশিষ্ট্যটি fast , slow , বা none মান রিপোর্ট করতে পারে যা বিভিন্ন ডিভাইসের ক্ষমতার সাথে সম্পর্কিত।

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

@media (আপডেট) সম্পর্কে আরও জানুন।

স্ক্রিপ্টিং মিডিয়া ক্যোয়ারী

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

এখানে Chrome DevTools-এর মাধ্যমে পরীক্ষার জন্য একটি পৃষ্ঠায় জাভাস্ক্রিপ্ট কীভাবে সক্রিয় এবং নিষ্ক্রিয় করতে হয় তা শিখুন।

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

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

হ্রাস-স্বচ্ছতা মিডিয়া ক্যোয়ারী

অ-অস্বচ্ছ ইন্টারফেস মাথাব্যথার কারণ হতে পারে বা বিভিন্ন ধরণের দৃষ্টি ঘাটতির জন্য একটি চাক্ষুষ সংগ্রাম হতে পারে। এই কারণেই Windows, macOS এবং iOS-এর সিস্টেম পছন্দ রয়েছে যা UI থেকে স্বচ্ছতা কমাতে বা অপসারণ করতে পারে। prefers-reduced-transparency জন্য এই মিডিয়া ক্যোয়ারী অন্যান্য পছন্দের মিডিয়া ক্যোয়ারীগুলির সাথে ভালভাবে ফিট করে, যা ব্যবহারকারীদের জন্য সামঞ্জস্য করার পাশাপাশি আপনাকে সৃজনশীল হতে দেয়।

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

@media (পছন্দ-হ্রাস-স্বচ্ছতা) সম্পর্কে আরও জানুন।

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

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

ভিউ ট্রানজিশন এপিআই এর মূল অংশে রয়েছে document.startViewTranstion ফাংশন। এমন একটি ফাংশনে পাস করুন যা DOM-কে নতুন অবস্থায় আপডেট করে এবং API আপনার জন্য সবকিছুর যত্ন নেয়। এটি একটি আগে এবং পরে স্ন্যাপশট গ্রহণ করে, তারপর উভয়ের মধ্যে স্থানান্তর করে এটি করে। CSS ব্যবহার করে আপনি কী ক্যাপচার করা হবে তা নিয়ন্ত্রণ করতে পারেন এবং ঐচ্ছিকভাবে কাস্টমাইজ করতে পারেন কীভাবে এই স্ন্যাপশটগুলি অ্যানিমেটেড করা উচিত।

Chrome 111-এ পাঠানো একক পৃষ্ঠা অ্যাপ্লিকেশনের জন্য View Transitions API. ভিউ ট্রানজিশন সম্পর্কে আরও জানুন৷

লিনিয়ার-ইজিং ফাংশন

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

linear() এর আগে, যা Chrome 113-এ পাঠানো হয়েছিল, CSS-এ বাউন্স বা স্প্রিং ইফেক্ট তৈরি করা অসম্ভব ছিল। linear() এর জন্য ধন্যবাদ এই সহজকরণগুলিকে কয়েকটি বিন্দুতে সরলীকরণ করে, তারপর এই বিন্দুগুলির মধ্যে রৈখিকভাবে ইন্টারপোলেট করে আনুমানিক করা সম্ভব।

linear() সম্পর্কে আরও জানুন। linear() কার্ভ তৈরি করতে, লিনিয়ার ইজিং জেনারেটর ব্যবহার করুন।

স্ক্রোল শেষ

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

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

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

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

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

একটি স্ক্রলটাইমলাইনের সাহায্যে আপনি একটি স্ক্রলারের সামগ্রিক অগ্রগতি ট্র্যাক করতে পারেন, যেমনটি নিম্নলিখিত ডেমোতে প্রদর্শিত হয়েছে। আপনি পৃষ্ঠার শেষে স্ক্রোল করার সাথে সাথে, পাঠ্যটি অক্ষর অনুসারে নিজেকে প্রকাশ করে।

একটি ভিউটাইমলাইনের সাহায্যে আপনি একটি উপাদান ট্র্যাক করতে পারেন যখন এটি স্ক্রলপোর্ট অতিক্রম করে। এটি একইভাবে কাজ করে যেভাবে IntersectionObserver একটি উপাদানকে ট্র্যাক করে। নিম্নলিখিত ডেমোতে, প্রতিটি ছবি স্ক্রলপোর্টে প্রবেশ করার মুহূর্ত থেকে কেন্দ্রে না থাকা পর্যন্ত নিজেকে প্রকাশ করে।

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

স্ক্রোল-চালিত অ্যানিমেশন সম্পর্কে আরও জানতে সমস্ত বিবরণ সহ এই নিবন্ধটি দেখুন বা scroll-driven-animations.style দেখুন যাতে অনেকগুলি ডেমো রয়েছে৷

বিলম্বিত টাইমলাইন সংযুক্তি

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

অ্যানিমেটেড উপাদানটিকে একটি অ-পূর্বপুরুষের একটি নামযুক্ত স্ক্রোল-টাইমলাইন খুঁজে পেতে অনুমতি দিতে একটি ভাগ করা পিতামাতার timeline-scope বৈশিষ্ট্য ব্যবহার করুন৷ এটি সংজ্ঞায়িত scroll-timeline বা view-timeline সেই নামের সাথে সংযুক্ত করার অনুমতি দেয়, এটিকে একটি বিস্তৃত সুযোগ দেয়। এটির সাথে, সেই ভাগ করা পিতামাতার যে কোনও সন্তান সেই নামের সাথে টাইমলাইন ব্যবহার করতে পারে।

timeline-scope সম্পর্কে আরও জানুন।

বিচ্ছিন্ন সম্পত্তি অ্যানিমেশন

2023 সালে আরেকটি নতুন ক্ষমতা হল বিচ্ছিন্ন অ্যানিমেশানগুলিকে অ্যানিমেট করার ক্ষমতা, যেমন display: none । Chrome 116 থেকে, আপনি কীফ্রেম নিয়মে display এবং content-visibility ব্যবহার করতে পারেন। আপনি 0% পয়েন্টের পরিবর্তে 50% পয়েন্টে যেকোন পৃথক সম্পত্তি স্থানান্তর করতে পারেন। এটি allow-discrete কীওয়ার্ড ব্যবহার করে transition-behavior সম্পত্তির মাধ্যমে বা সংক্ষেপে transition সম্পত্তিতে অর্জন করা হয়।

বিচ্ছিন্ন অ্যানিমেশনগুলি পরিবর্তন করার বিষয়ে আরও জানুন৷

@স্টার্টিং-স্টাইল

@starting-style সিএসএস নিয়মটি display: none । এই নিয়মটি একটি উপাদানকে "আগে খোলা" শৈলী দেওয়ার একটি উপায় প্রদান করে যা পৃষ্ঠায় উপাদানটি খোলার আগে ব্রাউজারটি দেখতে পারে। এটি এন্ট্রি অ্যানিমেশনের জন্য এবং পপওভার বা ডায়ালগের মতো উপাদানগুলিতে অ্যানিমেট করার জন্য খুব দরকারী। যে কোনো সময় আপনি একটি উপাদান তৈরি করছেন এবং এটিকে অ্যানিমেট করার ক্ষমতা দিতে চান তার জন্যও এটি কার্যকর হতে পারে৷ নিম্নলিখিত উদাহরণটি নিন যা একটি popover অ্যাট্রিবিউটকে অ্যানিমেট করে (পরবর্তী বিভাগটি দেখুন) দৃশ্যে এবং উপরের স্তরের বাইরে থেকে মসৃণভাবে ভিউপোর্ট

@স্টার্টিং-স্টাইল এবং অন্যান্য এন্ট্রি অ্যানিমেশন সম্পর্কে আরও জানুন।

ওভারলে

নতুন CSS overlay প্রপার্টি আপনার ট্রানজিশনে যোগ করা যেতে পারে টপ-লেয়ার শৈলী- যেমন popover এবং dialog সহ উপাদানগুলিকে সক্রিয় করতে - টপ-লেয়ার থেকে মসৃণভাবে অ্যানিমেট করতে। আপনি ওভারলে ট্রানজিশন না করলে, আপনার উপাদান অবিলম্বে ক্লিপ করা, রূপান্তরিত এবং কভার আপ হয়ে যাবে এবং আপনি পরিবর্তনটি ঘটতে দেখতে পাবেন না। একইভাবে, overlay ::backdrop টপ-লেয়ার এলিমেন্টে যোগ করার সময় মসৃণভাবে অ্যানিমেট করতে সক্ষম করে।

ওভারলে এবং অন্যান্য প্রস্থান অ্যানিমেশন সম্পর্কে আরও জানুন।

পপওভার

Popover API আপনাকে এমন উপাদান তৈরি করতে সাহায্য করে যা বাকি পৃষ্ঠার উপরে থাকে। এর মধ্যে মেনু, নির্বাচন এবং টুলটিপ অন্তর্ভুক্ত থাকতে পারে। যে উপাদানটি পপ আপ হয় তার সাথে popover অ্যাট্রিবিউট এবং একটি id যোগ করে এবং popovertarget="my-popover" ব্যবহার করে একটি ইনভোকিং বোতামে এর id অ্যাট্রিবিউট সংযুক্ত করে আপনি একটি সাধারণ পপওভার তৈরি করতে পারেন। Popover API সমর্থন করে:

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

নির্বাচন অনুভূমিক নিয়ম

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

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

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

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

:ব্যবহারকারী-বৈধ এবং অবৈধ ছদ্ম ক্লাস

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

এই নতুন নির্বাচকদের সাথে, ব্যবহারকারীর পরিবর্তিত ইনপুট ট্র্যাক রাখতে রাষ্ট্রীয় কোড লেখার আর প্রয়োজন নেই।

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

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

ওয়েবে একটি সাধারণ UI প্যাটার্ন হল একটি অ্যাকর্ডিয়ন উপাদান। এই প্যাটার্নটি বাস্তবায়ন করার জন্য, আপনি কয়েকটি <details> উপাদান একত্রিত করেন, প্রায়শই দৃশ্যত তাদের গোষ্ঠীবদ্ধ করে নির্দেশ করে যে তারা একত্রে রয়েছে।

Chrome 120-এ নতুন হল <details> উপাদানগুলিতে name বৈশিষ্ট্যের জন্য সমর্থন। যখন এই বৈশিষ্ট্যটি ব্যবহার করা হয়, একাধিক <details> উপাদান যেগুলির একই name মান রয়েছে একটি শব্দার্থিক গোষ্ঠী গঠন করে। গ্রুপে সর্বাধিক একটি উপাদান একবারে খোলা হতে পারে: আপনি যখন গ্রুপ থেকে <details> উপাদানগুলির একটি খুলবেন, পূর্বে খোলা একটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যাবে। এই ধরনের অ্যাকর্ডিয়নকে বলা হয় এক্সক্লুসিভ অ্যাকর্ডিয়ন ।

যে <details> উপাদানগুলি একটি একচেটিয়া অ্যাকর্ডিয়নের অংশ সেগুলি অগত্যা ভাইবোন হওয়ার দরকার নেই৷ তারা নথি জুড়ে ছড়িয়ে ছিটিয়ে থাকতে পারে।