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

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

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

জটিল এন-তম* নির্বাচন

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

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

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

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

পরিধি

ক্রোম ১১৮-এ @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 ব্যবহার করে, বাইরের গ্রিডের সারি এবং কলামগুলোকে নিজের হিসেবে গ্রহণ করার সুযোগ দেয়।

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

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

প্রথম অক্ষর

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

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

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

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

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

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

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

text-wrap: balance সম্পর্কে আরও জানুন।

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

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

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() মাধ্যমে তা পরিবর্তন করেন। অ্যাবসোলিউট পরিবর্তন হলো এমন একটি পরিবর্তন যেখানে আপনি একটি চ্যানেলের মানকে সম্পূর্ণ নতুন একটি মান দিয়ে প্রতিস্থাপন করেন, যেমন অপাসিটি ৫০% এ সেট করা। এই সিনট্যাক্সটি আপনাকে থিমিং, জাস্ট-ইন-টাইম ভ্যারিয়েন্ট এবং আরও অনেক কিছুর জন্য কার্যকরী টুলস প্রদান করে।

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

কন্টেইনারের আকার কোয়েরি

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

এই ফিচারটি ব্যবহার করতে, প্রথমে আপনি যে এলিমেন্টটি কোয়েরি করছেন সেটিতে কন্টেইনমেন্ট সেট আপ করুন, এবং তারপর, একটি মিডিয়া কোয়েরির মতোই, স্টাইলগুলো প্রয়োগ করার জন্য সাইজ প্যারামিটারসহ @container ব্যবহার করুন। কন্টেইনার কোয়েরির সাথে কন্টেইনার কোয়েরি সাইজও দেওয়া থাকে। নিচের ডেমোতে, কার্ড হেডারের সাইজ নির্ধারণ করতে কন্টেইনার কোয়েরি সাইজ cqi (যা ইনলাইন কন্টেইনারের সাইজ নির্দেশ করে) ব্যবহার করা হয়েছে।

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

স্টাইল কন্টেইনার কোয়েরি

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

স্টাইল কোয়েরি স্ক্রিনশট

স্টাইল কোয়েরি ডেমো

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

ক্রোম ডেভটুলস ব্যবহার করে পরীক্ষার জন্য কোনো পৃষ্ঠায় কীভাবে জাভাস্ক্রিপ্ট চালু ও বন্ধ করতে হয়, তা এখানে জানুন।

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

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

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

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

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

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

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

একটি পেজের ইউজার এক্সপেরিয়েন্সের উপর ভিউ ট্রানজিশনের ব্যাপক প্রভাব রয়েছে। ভিউ ট্রানজিশন এপিআই (View Transitions API) ব্যবহার করে, আপনি আপনার সিঙ্গেল পেজ অ্যাপ্লিকেশনের (Single Page Application) দুটি পেজ স্টেটের মধ্যে ভিজ্যুয়াল ট্রানজিশন তৈরি করতে পারেন। এই ট্রানজিশনগুলো সম্পূর্ণ পেজের পরিবর্তন হতে পারে, অথবা পেজের ছোটখাটো বিষয়ও হতে পারে, যেমন কোনো লিস্টে নতুন আইটেম যোগ করা বা সরিয়ে ফেলা।

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

ক্রোম ১১১-এ সিঙ্গেল পেজ অ্যাপ্লিকেশনের জন্য ভিউ ট্রানজিশনস এপিআই অন্তর্ভুক্ত করা হয়েছে। ভিউ ট্রানজিশনস সম্পর্কে আরও জানুন।

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

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

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

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

স্ক্রোল শেষ

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

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

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

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

স্ক্রল-চালিত অ্যানিমেশন হলো ক্রোম ১১৫ থেকে উপলব্ধ একটি চমৎকার ফিচার। এর মাধ্যমে আপনি একটি বিদ্যমান CSS অ্যানিমেশন অথবা ওয়েব অ্যানিমেশন এপিআই (Web Animations API) দিয়ে তৈরি কোনো অ্যানিমেশনকে একটি স্ক্রলারের স্ক্রল অফসেটের সাথে যুক্ত করতে পারেন। আপনি যখন উপরে-নিচে স্ক্রল করবেন—অথবা একটি হরাইজন্টাল স্ক্রলারে বামে-ডানে স্ক্রল করবেন—তখন সংযুক্ত অ্যানিমেশনটি সরাসরি তার প্রতিক্রিয়ায় সামনে-পেছনে চলাচল করবে।

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

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

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

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

স্থগিত সময়রেখা সংযুক্তি

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

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

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

বিচ্ছিন্ন বৈশিষ্ট্য অ্যানিমেশন

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

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

@starting-style

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

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

ওভারলে

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

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

পপওভার

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

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

সিলেক্টে অনুভূমিক নিয়ম

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

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

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

নির্বাচিত ক্ষেত্রে এইচআর ব্যবহার সম্পর্কে আরও জানুন

ব্যবহারকারী-বৈধ এবং অবৈধ ছদ্ম শ্রেণী

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

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

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

একচেটিয়া অ্যাকর্ডিয়ন

ওয়েবে একটি প্রচলিত UI প্যাটার্ন হলো অ্যাকর্ডিয়ন কম্পোনেন্ট। এই প্যাটার্নটি প্রয়োগ করতে, কয়েকটি <details> এলিমেন্টকে একত্রিত করা হয় এবং প্রায়শই সেগুলোকে দৃশ্যত গ্রুপ করে বোঝানো হয় যে সেগুলো একই বিষয়ের অন্তর্গত।

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

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