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

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

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

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

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

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

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

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

ব্যাপ্তি

Chrome 118 @scope এর জন্য সমর্থন যোগ করেছে, এটি একটি at-rule যা আপনাকে ডকুমেন্টের একটি নির্দিষ্ট সাবট্রির সাথে স্কোপ সিলেক্টর মেলাতে দেয়। স্কোপড স্টাইলিং এর মাধ্যমে, আপনি কোন উপাদানগুলি নির্বাচন করবেন সে সম্পর্কে খুব সুনির্দিষ্ট হতে পারেন, অতিরিক্ত-নির্দিষ্ট সিলেক্টর না লিখে বা 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 */
}

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

বাসা বাঁধার বিষয়ে আরও জানুন।

সাবগ্রিড

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

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

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

প্রাথমিক-অক্ষর

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

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

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

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

টেক্সট-র‍্যাপ: ভারসাম্যপূর্ণ এবং সুন্দর

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

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

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

এইচডি রঙের স্থান (রঙের স্তর ৪)

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

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

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

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

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

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

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

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

প্রায় ২০ বছর ধরে ডেভেলপাররা 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 এর মান রিপোর্ট করতে পারে যা বিভিন্ন ডিভাইসের ক্ষমতার সাথে সম্পর্কিত।

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-transparency) সম্পর্কে আরও জানুন।

রূপান্তরগুলি দেখুন

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

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

সিঙ্গেল পেজ অ্যাপ্লিকেশনের জন্য ভিউ ট্রানজিশন API Chrome 111 এ পাঠানো হয়েছে। ভিউ ট্রানজিশন সম্পর্কে আরও জানুন।

রৈখিক-সহজকরণ ফাংশন

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

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

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

স্ক্রোল এন্ড

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

বিচ্ছিন্ন অ্যানিমেশন রূপান্তর সম্পর্কে আরও জানুন।

@শুরু-শৈলী

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

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

ওভারলে

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

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

পপওভার

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

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

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

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

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

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

select-এ hr ব্যবহার সম্পর্কে আরও জানুন।

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

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

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

user-* ফর্ম ভ্যালিডেশন সিউডো এলিমেন্ট ব্যবহার সম্পর্কে আরও জানুন।

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

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

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

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

Trigonometric functions

Chrome 111 added support for the trigonometric functions sin() , cos() , tan() , asin() , acos() , atan() , and atan2() , making them available across all major engines. These functions come in very handy for animation and layout purposes. For example, it's now much easier to lay out elements on a circle around a chosen center.

Learn more about the trigonometric functions in CSS .

Complex nth-* selection

With the :nth-child() pseudo-class selector it's possible to select elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select.

By default the :nth-*() pseudos take all child elements into account. As of Chrome 111 you can, optionally, pass a selector list into :nth-child() and :nth-last-child() . That way you can prefilter the list of children before An+B does its thing.

In the following demo, the 3n+1 logic is applied only to the small dolls by prefiltering them out using of .small . Use the dropdowns to dynamically change the used selector.

Learn more about complex nth-* selections .

ব্যাপ্তি

Chrome 118 added support for @scope , an at-rule that lets you scope selector matching to a specific subtree of the document. With scoped styling, you can be very specific about which elements you select without having to write overly-specific selectors or tightly coupling them to the DOM structure.

A scoped subtree is defined by a scoping root (the upper boundary) and an optional scoping limit (the lower boundary).

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

Style rules placed inside a scope block will only target elements within the carved out subtree. For example, the following scoped style rule only targets <img> elements that sit between .card element and any nested component matched by the [data-component] selector.

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

In the following demo, the <img> elements in the carousel component are not matched because of the applied scoping limit.

Scope Demo Screenshot

Scope Live Demo

Find out more about @scope in the article "How to use @scope to limit the reach of your selectors" . In this article you'll learn about the :scope selector, how specificity gets handled, prelude-less scopes, and how the cascade is affected by @scope .

Nesting

Before nesting, every selector needed to be explicitly declared, separately from one another. This leads to repetition, stylesheet bulk and a scattered authoring experience. Now, selectors can be continued with related style rules grouped within.

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

Nesting can reduce the weight of a stylesheet, reduce the overhead of repeating selectors, and centralize component styles. The syntax initially released with a limitation that required usage of & in various places, but since has been lifted with a nesting relaxed syntax update .

Learn more about nesting .

Subgrid

CSS subgrid enables you to create more complex grids with better alignment between child layouts. It allows a grid that's inside another grid, to adopt the rows and columns of the outer grid as its own, by using subgrid as a value for grid rows or columns.

Subgrid is especially useful for aligning siblings to each other's dynamic contents. This frees copywriters, UX writers, and translators from attempting to create project copy that "fits" into the layout. With subgrid, the layout can be adjusted to fit the content.

Learn more about subgrid .

Initial-letter

Landing at the start of the year in Chrome 110, the initial-letter property is a small yet powerful CSS feature which sets styling for the placement of initial letters. You can position letters in either a dropped or raised state. The property accepts two arguments: the first for how deeply to drop the letter into the corresponding paragraph, and second for how much to raise the letter above it. You can even do a combination of both, such as in the following demo.

Initial-letter Screenshot

Initial-letter Demo

Learn more about initial-letter .

text-wrap: balance and pretty

As a developer, you don't know the final size, font size, or even language of a headline or paragraph. All the variables needed for an effective and aesthetic treatment of text wrapping, are in the browser. Since the browser does know all the factors, like font size, language, and allocated area, it makes it a great candidate for handling advanced and high quality text layout.

This is where two new text wrapping techniques come in, one called balance and the other pretty . The balance value seeks to create a harmonious block of text while pretty seeks to prevent orphans and ensure healthy hyphenation. Both of these tasks have traditionally been done by hand, and it's amazing to give the job to the browser and have it work for any translated language.

Learn more about text-wrap: balance .

HD Color Spaces (Color Level 4)

From the hardware to the software, the CSS to the blinking lights; it can take a lot of work for our computers to try and represent colors as good as our human eyes can see. In 2023, we have new colors, more colors, new color spaces, color functions and new capabilities.

CSS and color can now: - Check if the users screen hardware is capable of wide gamut HDR colors. - Check if the user's browser understands color syntax like Oklch or Display P3. - Specify HDR colors in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, and more. - Create gradients with HDR colors, - Interpolate gradients in alternative color spaces. - Mix colors with color-mix() . - Create color variants with relative color syntax.

Learn more about Color 4 and color spaces .

color-mix function

Mixing color is a classic task and in 2023 CSS can do it too. You can not only mix white or black to a color, but also transparency, and do all this in any color space of your choosing. It's simultaneously a basic color feature and an advanced color feature.

You can think of color-mix() as a moment in time from a gradient. Where a gradient shows all the steps it takes to go from blue to white, color-mix() shows just one step. Things get advanced once you begin to take color spaces into account and learn just how different the mixing color space can be to the results.

Learn more about color-mix() .

Relative color syntax

Relative color syntax (RCS) is a complementary method to color-mix() for creating color variants. It's slightly more powerful than color-mix() but also a different strategy for working with color. color-mix() may mix in the color white to lighten a color, where RCS gives precise access to the lightness channel and the ability to use calc() on the channel to reduce or increase lightness programmatically.

RCS allows you to perform relative and absolute manipulations to a color. A relative change is one where you take the current value of saturation or lightness and modify it with calc() . An absolute change is one where you replace a channel value with an entirely new one, like setting opacity to 50%. This syntax gives you meaningful tools for theming, just in time variants, and more.

Learn more about relative color syntax .

Size container queries

Rather than using the viewport's global size information to apply CSS styles, container queries support the querying of a parent element within the page. This means components can be styled in a dynamic way across multiple layouts and in multiple views. Container queries for size became stable in all modern browsers on Valentine's Day this year (February 14th).

To use this feature, first set up containment on the element you are querying, and then, similar to a media query, use @container with the size parameters to apply the styles. Along with container queries you get container query sizes. In the following demo, the container query size cqi (representing the size of the inline container), is used to size the card header.

Learn more about using container queries .

Style container queries

Style queries landed with partial implementation in Chrome 111. With style queries currently, you can query the value of custom properties on a parent element when using @container style() . For example, query if a custom property value exists, or is set to a certain value, such as @container style(--rain: true) .

Style query screenshot

Style query demo

While this sounds similar to using class names in CSS, style queries have some advantages. The first is that with style queries, you can update the value in CSS as needed for pseudo states. Also, in future versions of the implementation, you'll be able to query ranges of values to determine the style applied, such as style(60 <= --weather <= 70) , and style based on property-value pairs such as style(font-style: italic) .

Learn more about using style queries .

:has() selector

For almost 20 years developers asked for a "parent selector" in CSS. With the :has() selector that shipped in Chrome 105 this is now possible. For example, using .card:has(img.hero) will select the .card elements that have a hero image as a child.

:has() Demo Screenshot

:has() Live Demo

Because :has() accepts a relative selector list as its argument, you can select much more than the parent element. Using various CSS combinators, it's possible to not only go up the DOM tree, but also do sideway selections. For example, li:has(+ li:hover) will select the <li> element that precedes the currently hovered <li> element.

Learn more about the CSS :has() selector .

Update media query

The update media query gives you a way to adapt UI to the refresh rate of a device. The feature can report a value of fast , slow , or none which relates to the capabilities of different devices.

Most of the devices you design for are likely to have a fast refresh rate. This includes desktops and most mobile devices. eReaders and devices such as low powered payment systems, may have a slow refresh rate. Knowing that the device can't handle animation or frequent updates, means that you can save battery usage or faulty view updates.

Learn more about @media (update) .

Scripting media query

The scripting media query can be used to check whether or not JavaScript is available. This is very nice for progressive enhancement. Before this media query, a strategy for detecting if JavaScript was available was to place a nojs class in the HTML, and remove it with JavaScript. These scripts can be removed as CSS now has a way to detect JavaScript and adjust accordingly.

Learn how to enable and disable JavaScript on a page for testing via Chrome DevTools here .

Consider a theme switch on a website, the scripting media query can assist in making the switch work against the system preference since no JavaScript is available. Or consider a switch component—if JavaScript is available then the switch can be swiped with a gesture instead of just toggled on and off. Lots of great opportunities to upgrade UX if scripting is available while providing a meaningful foundation experience if scripting is disabled.

Learn more about script .

Reduced-transparency media query

Non-opaque interfaces can cause headaches or be a visual struggle for various types of vision deficiencies. This is why Windows, macOS, and iOS have system preferences that can reduce or remove transparency from the UI. This media query for prefers-reduced-transparency fits in well with the other preference media queries, which allow you to be creative while also adjusting for users.

In some cases, you can provide an alternative layout which doesn't have content overlaying other content. In other cases, the opacity of a color can be adjusted to be opaque or nearly opaque. The following blog post has more inspiring demos that adapt to the user preference, give them a look if you're curious about times when this media query is valuable.

Learn more about @media (prefers-reduced-transparency) .

View transitions

View transitions have a huge impact on the user experience of a page. With the View Transitions API, ​​you can create visual transitions between two page states of your Single Page Application. These transitions can be full page transitions, or smaller things on a page such as adding or removing a new item to a list.

At the core of the View Transitions API is the document.startViewTranstion function. Pass in a function that updates the DOM to the new state, and the API takes care of everything for you. It does this by taking a before and after snapshot, then transitioning between the two. Using CSS you can control what gets captured and optionally customize how these snapshots should be animated.

The View Transitions API for Single Page Applications shipped in Chrome 111. Learn more about View Transitions .

Linear-easing function

Don't let the name of this function fool you. The linear() function (not to be confused with the linear keyword) allows you to create complex easing functions in a simple manner, with the compromise of losing some precision.

Before linear() , which shipped in Chrome 113, it was impossible to create bounce or spring effects in CSS. Thanks to linear() it is possible to approximate these easings by simplifying them to a series of points, then linearly interpolating between these points.

Learn more about linear() . To create linear() curves, use the linear easing generator .

Scroll End

Many interfaces include scroll interactions, and sometimes the interface needs to synchronize information relevant to the current scroll position, or fetch data based on current state. Before the scrollend event, you had to use an inaccurate timeout method that could fire while the user's finger was still on the screen. With the scrollend event, you have a perfectly timed scrollend event that understands whether a user is still mid gesture or not.

This was important for the browser to own because JavaScript cannot track a fingers presence on the screen during a scroll, the information is just simply not available. Chunks of inaccurate scroll end attempting code can now be deleted and replaced with a browser owned high precision event.

Learn more about scrollend .

Scroll-driven animations

Scroll-driven animations are an exciting feature available from Chrome 115. These allow you to take an existing CSS animation or an animation built with the Web Animations API , and couple it to the scroll offset of a scroller. As you scroll up and down–or left and right in a horizontal scroller–the linked animation will scrub forwards and backwards in direct response.

With a ScrollTimeline you can track the overall progress of a scroller, as demonstrated in the following demo. As you scroll to the end of the page, the text reveals itself character by character.

With a ViewTimeline you can track an element as it crosses the scrollport. This works similarly to how IntersectionObserver tracks an element. In the following demo, each image reveals itself from the moment it enters the scrollport until it is at the center.

Because scroll-driven animations work with CSS animations and the Web Animations API, you can benefit from all the advantages these APIs bring. That includes the ability to have these animations run off the main thread. You can now have silky smooth animations, driven by scroll, running off the main thread with just a few lines of extra code–what's not to like?

To learn more about scroll-driven animations check out this article with all the details or visit scroll-driven-animations.style which includes many demos.

Deferred timeline attachment

When applying a scroll-driven animation through CSS, the lookup mechanism to find the controlling scroller always walks up the DOM tree making it limited to scroll ancestors only. Very often though, the element that needs to be animated is not a child of the scroller but an element located in an entirely different subtree.

To allow the animated element to find a named scroll-timeline of a non-ancestor use the timeline-scope property on a shared parent. This allows the defined scroll-timeline or view-timeline with that name to attach to it, giving it a broader scope. With this in place, any child of that shared parent can use the timeline with that name.

Learn more about timeline-scope .

Discrete property animations

Another new capability in 2023 is the ability to animate discrete animations, such as animating to and from display: none . From Chrome 116, you can use display and content-visibility in keyframe rules. You can also transition any discrete property at the 50% point rather than at the 0% point. This is achieved with the transition-behavior property using the allow-discrete keyword, or in the transition property as a shorthand.

Learn more about transitioning discrete animations .

@starting-style

The @starting-style CSS rule builds on new web capabilities for animating to and from display: none . This rule provides a way to give an element a "before-open" style that the browser can look up before the element is open on the page. This is very useful for entry animations, and for animating in elements such as a popover or dialog. It can also be useful for any time you are creating an element and want to give it the ability to animate in. Take the following example which animates a popover attribute (see next section) into view and into the top layer smoothly from outside of the viewport.

Learn more about @starting-style and other entry animations.

ওভারলে

The new CSS overlay property can be added to your transition to enable elements with top-layer styles—such as popover and dialog —to animate out of the top-layer smoothly. If you don't transition overlay, your element will immediately go back to being clipped, transformed, and covered up, and you won't see the transition happen. Similarly, overlay enables ::backdrop to animate out smoothly when added to a top-layer element.

Learn more about overlay and other exit animations.

পপওভার

The Popover API helps you build elements which lay on top of the rest of the page. These could include menus, selection, and tooltips. You can create a simple popover by adding the popover attribute and an id to the element which pops up, and connecting its id attribute to an invoking button using popovertarget="my-popover" . The Popover API supports:

• Promotion to the top layer. Popovers will appear on a separate layer above the rest of the page, so you don't have to play around with z-index.
• Light-dismiss functionality. Clicking outside of the popover area will close the popover and return focus.
• Default focus management. Opening the popover makes the next tab stop inside the popover.
• Accessible keyboard bindings. Hitting the esc key or double toggling will close the popover and return focus.
• Accessible component bindings. Connecting a popover element to a popover trigger semantically.

Horizontal rules in select

Another small change to HTML which landed in Chrome and Safari this year, is the ability to add horizontal rule elements ( <hr> tags) into <select> elements to help visually break up your content. Previously, putting an <hr> tag into a select simply would not render. But this year, both Safari and Chrome support this feature, enabling better separation of content within <select> elements.

Select Screenshot

Select Live Demo

Learn more about using using hr in select

:user-valid and invalid pseudo classes

Stable in all browsers this year, the :user-valid and :user-invalid behave similarly to the :valid and :invalid pseudo-classes, but match a form control only after a user has significantly interacted with the input. A form control that is required and empty will match :invalid even if a user has not started interacting with the page. The same control will not match :user-invalid until the user has changed the input and left it in an invalid state.

With these new selectors, there's no longer a need to write stateful code to keep track of input a user has changed.

Learn more about using user-* form validation pseudo elements .

Exclusive accordion

A common UI pattern on the web is an accordion component. To implement this pattern, you combine a few <details> elements, often visually grouping them to indicate that they belong together.

New in Chrome 120 is support for the name attribute on <details> elements. When this attribute is used, multiple <details> elements that have the same name value form a semantic group. At most one element in the group can be open at once: when you open one of the <details> elements from the group, the previously open one will automatically close. This type of accordion is called an exclusive accordion .

The <details> elements that are part of an exclusive accordion don't necessarily need to be siblings. They can be scattered across the document.