এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

CSS মোড়ানো: 2023!, CSS মোড়ানো: 2023!, CSS মোড়ানো: 2023!

CSS মোড়ানো: 2023!

বিষয়বস্তুতে যান:

স্থাপত্য ভিত্তি
ত্রিকোণমিতিক ফাংশন
জটিল nth-* নির্বাচন
ব্যাপ্তি
বাসা বাঁধে

টাইপোগ্রাফি
প্রাথমিক-পত্র
টেক্সট-র্যাপ ব্যালেন্স/সুন্দর

রঙ
রঙ স্তর 4
কালার-মিক্স ফাংশন
আপেক্ষিক রঙ সিনট্যাক্স

প্রতিক্রিয়াশীল নকশা
ধারক প্রশ্ন
শৈলী প্রশ্ন
: নির্বাচক আছে
মিডিয়া ক্যোয়ারী আপডেট করুন
স্ক্রিপ্টিং মিডিয়া ক্যোয়ারী
স্বচ্ছতা মিডিয়া প্রশ্ন

মিথস্ক্রিয়া
রূপান্তর দেখুন
লিনিয়ার-ইজিং ফাংশন
স্ক্রলেন্ড
স্ক্রোল-চালিত অ্যানিমেশন
বিলম্বিত টাইমলাইন সংযুক্তি
বিচ্ছিন্ন সম্পত্তি রূপান্তর
প্রারম্ভিক-শৈলী নিয়ম
ওভারলে অ্যানিমেশন

উপাদান
পপওভার
নির্বাচিত ঘন্টা
ব্যবহারকারী-বৈধ/অবৈধ সিউডো ক্লাস
এক্সক্লুসিভ অ্যাকর্ডিয়ন

বাহ! 2023 CSS এর জন্য একটি বিশাল বছর ছিল!

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

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

স্থাপত্য ভিত্তি

মূল CSS ভাষা এবং ক্ষমতার আপডেট দিয়ে শুরু করা যাক। এগুলি এমন বৈশিষ্ট্য যা আপনি যেভাবে রচনা করেন এবং শৈলীগুলি সংগঠিত করেন তার ভিত্তি এবং বিকাশকারীর হাতে দুর্দান্ত শক্তি নিয়ে আসে৷

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

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

উৎস

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-* নির্বাচন ডেমো

জটিল 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> উপাদানগুলি মেলে না।

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

Reference screenshot for the @scope demo

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

CSS @scope ডেমো

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

সাবগ্রিড স্ক্রিনকাস্ট

সাবগ্রিড লাইভ ডেমো

হেডার, বডি এবং ফুটার তাদের ভাইবোনের গতিশীল আকারের সাথে সারিবদ্ধ।

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

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

টাইপোগ্রাফি

ওয়েব টাইপোগ্রাফি 2023 সালে কয়েকটি মূল আপডেট দেখেছে। একটি বিশেষ করে চমৎকার প্রগতিশীল বর্ধন হল text-wrap সম্পত্তি। এই সম্পত্তি টাইপোগ্রাফিক বিন্যাস সমন্বয় সক্ষম করে, ব্রাউজারে কোন অতিরিক্ত স্ক্রিপ্টিংয়ের প্রয়োজন নেই। বিশ্রী লাইনের দৈর্ঘ্যকে বিদায় বলুন এবং আরও অনুমানযোগ্য টাইপোগ্রাফিকে হ্যালো বলুন!

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

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

উৎস

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

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

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

::first-letter ছদ্ম উপাদানটির জন্য initial-letter মান পরিবর্তন করুন এটিকে শিফট করতে দেখতে।

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

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

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

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

টেক্সট-র্যাপ স্ক্রিনকাস্ট

টেক্সট-র্যাপ লাইভ ডেমো

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

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

রঙ

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

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

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

উৎস

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

উৎস

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

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

রঙ 4 স্ক্রিনকাস্ট

কালার 4 ডেমো

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

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

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

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

উৎস

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

color-mix() স্ক্রিনকাস্ট

color-mix() ডেমো

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

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

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

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

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

আরসিএস স্ক্রিনকাস্ট

RCS লাইভ ডেমো

রং বদলাও, দৃশ্য বদলাও। প্রতিটি বেস কালার থেকে ভিন্ন রূপ তৈরি করতে আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করে।

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

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

প্রতিক্রিয়াশীল ডিজাইন

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

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

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

উৎস

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() ডেমো স্ক্রিনশট

Reference screenshot for the :has() demo

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

CSS :has() ডেমো: কার্ড ছাড়া/ইমেজ সহ

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

:has() স্ক্রিনকাস্ট

:has() ডেমো

CSS :has() ডেমো: ডক

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

Chart of a bounce easing curve with several dots added to it — নীল রঙে মূল বাউন্স কার্ভটি সবুজ রঙে দেখানো মূল পয়েন্টগুলির একটি সেট দ্বারা সরল করা হয়েছে। `linear()` ফাংশন এই বিন্দুগুলি ব্যবহার করে এবং তাদের মধ্যে রৈখিকভাবে ইন্টারপোলেট করে।

লিনিয়ার-সহজ স্ক্রিনকাস্ট

লিনিয়ার-ইজিং ডেমো

CSS linear() ডেমো।

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

স্ক্রোল শেষ

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

উৎস

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

স্ক্রলেন্ড স্ক্রিনকাস্ট

স্ক্রলেন্ড ডেমো

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

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

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

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

উৎস

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

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

এসডিএ স্ক্রিনকাস্ট

SDA ডেমো

CSS স্ক্রোল-চালিত অ্যানিমেশন ডেমো: স্ক্রোল টাইমলাইন

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

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

SDA লাইভ ডেমো

CSS স্ক্রোল-চালিত অ্যানিমেশন ডেমো: টাইমলাইন দেখুন

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

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

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

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

উৎস

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

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

Visualization of a DOM subtree with timeline-scope used on a shared parent — শেয়ার্ড প্যারেন্টে ঘোষিত `timeline-scope` সাথে, স্ক্রলারে ঘোষিত `scroll-timeline` `animation-timeline` হিসাবে ব্যবহার করে এমন উপাদান দ্বারা পাওয়া যেতে পারে

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

লাইভ ডেমো

CSS স্ক্রোল-চালিত অ্যানিমেশন ডেমো: বিলম্বিত টাইমলাইন সংযুক্তি

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

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

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

বিচ্ছিন্ন Anim. স্ক্রিনকাস্ট

বিচ্ছিন্ন Anim. ডেমো

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

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

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

উৎস

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

@স্টার্টিং-স্টাইলের স্ক্রিনকাস্ট

@স্টার্টিং-স্টাইল ডেমো

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

ওভারলে

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

উৎস

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

ওভারলে স্ক্রিনকাস্ট

ওভারলে লাইভ ডেমো

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

উপাদান

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

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

উৎস

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

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

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

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

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

Chrome-এ হালকা এবং গাঢ় থিম সহ বেছে নেওয়া hr-এর স্ক্রিনশট৷

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

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

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

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

উৎস

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

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

: ব্যবহারকারী-* স্ক্রিনকাস্ট

: ব্যবহারকারী-* লাইভ ডেমো

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

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

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

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

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

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

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

উপসংহার

গত কয়েক বছরে এবং বিশেষ করে 2023-এ CSS-এর এমন একটি নবজাগরণ ঘটেছে। আপনি যদি CSS-এ নতুন হয়ে থাকেন বা শুধুমাত্র বেসিক বিষয়ে রিফ্রেশার চান, তাহলে ওয়েবে অফারে অন্যান্য বিনামূল্যের কোর্সের সাথে আমাদের বিনামূল্যে শিখুন CSS কোর্সটি দেখুন .dev

আমরা আপনাকে একটি শুভ ছুটির মরসুম কামনা করি এবং আশা করি আপনি শীঘ্রই আপনার কাজে এই উজ্জ্বল নতুন CSS এবং UI বৈশিষ্ট্যগুলির মধ্যে কিছু অন্তর্ভুক্ত করার সুযোগ পাবেন!

⇾ Chrome UI DevRel টিম,

Una Kravets

Bramus

Adam Argyle

CSS মোড়ানো: 2023!

বিষয়বস্তুতে যান:

স্থাপত্য ভিত্তি
ত্রিকোণমিতিক ফাংশন
জটিল nth-* নির্বাচন
ব্যাপ্তি
বাসা বাঁধে

টাইপোগ্রাফি
প্রাথমিক-পত্র
টেক্সট-র্যাপ ব্যালেন্স/সুন্দর

রঙ
রঙ স্তর 4
কালার-মিক্স ফাংশন
আপেক্ষিক রঙ সিনট্যাক্স

প্রতিক্রিয়াশীল নকশা
ধারক প্রশ্ন
শৈলী প্রশ্ন
: নির্বাচক আছে
মিডিয়া ক্যোয়ারী আপডেট করুন
স্ক্রিপ্টিং মিডিয়া ক্যোয়ারী
স্বচ্ছতা মিডিয়া প্রশ্ন

মিথস্ক্রিয়া
রূপান্তর দেখুন
লিনিয়ার-ইজিং ফাংশন
স্ক্রলেন্ড
স্ক্রোল-চালিত অ্যানিমেশন
বিলম্বিত টাইমলাইন সংযুক্তি
বিচ্ছিন্ন সম্পত্তি রূপান্তর
প্রারম্ভিক-শৈলী নিয়ম
ওভারলে অ্যানিমেশন

উপাদান
পপওভার
নির্বাচিত ঘন্টা
ব্যবহারকারী-বৈধ/অবৈধ সিউডো ক্লাস
এক্সক্লুসিভ অ্যাকর্ডিয়ন

বাহ! 2023 CSS এর জন্য একটি বিশাল বছর ছিল!

স্থাপত্য ভিত্তি

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

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

উৎস

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

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

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

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

জটিল nth-* নির্বাচন ডেমো

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

ব্যাপ্তি

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

উৎস

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

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

@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 সিলেক্টর, কীভাবে সুনির্দিষ্টতা পরিচালনা করা হয়, প্রিলিউড-কম স্কোপগুলি এবং ক্যাসকেড কীভাবে @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 ব্যবহার করে বাইরের গ্রিডের সারি এবং কলামগুলি তার নিজস্ব হিসাবে গ্রহণ করতে পারে।

সাবগ্রিড স্ক্রিনকাস্ট

সাবগ্রিড লাইভ ডেমো

শিরোনাম, দেহ এবং পাদচরণ তাদের ভাইবোনদের গতিশীল আকারের সাথে সামঞ্জস্য করে।

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

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

টাইপোগ্রাফি

ওয়েব টাইপোগ্রাফি 2023 সালে কয়েকটি মূল আপডেট দেখেছিল text-wrap এই সম্পত্তিটি কোনও অতিরিক্ত স্ক্রিপ্টিংয়ের প্রয়োজন ছাড়াই ব্রাউজারে রচিত টাইপোগ্রাফিক লেআউট সামঞ্জস্য সক্ষম করে। বিশ্রী লাইনের দৈর্ঘ্যে বিদায় জানান এবং আরও অনুমানযোগ্য টাইপোগ্রাফিকে হ্যালো!

প্রাথমিক-চিঠি

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

উৎস

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

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

প্রাথমিক-বর্ণের ডেমো

এটি শিফটটি দেখার জন্য ::first-letter সিউডো উপাদানটির জন্য initial-letter মানগুলি পরিবর্তন করুন।

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

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

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

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

পাঠ্য-মোড়ের স্ক্রিনকাস্ট

পাঠ্য-মোড়ানো লাইভ ডেমো

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

পাঠ্য-মোড় সম্পর্কে আরও জানুন: ভারসাম্য ।

রঙ

2023 ছিল ওয়েব প্ল্যাটফর্মের জন্য রঙের বছর। নতুন রঙের স্পেস এবং ফাংশনগুলির সাথে যা গতিশীল রঙ থিমিং সক্ষম করে, আপনার ব্যবহারকারীদের প্রাপ্য, লীলা থিমগুলি তৈরি করা থেকে আপনাকে থামানোর কিছুই নেই এবং এগুলিও কাস্টমাইজযোগ্য করে তোলে!

এইচডি রঙের স্পেস (রঙ স্তর 4)

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

উৎস

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

উৎস

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

সিএসএস এবং রঙ এখন করতে পারে: - ব্যবহারকারীদের স্ক্রিন হার্ডওয়্যার প্রশস্ত গামুট এইচডিআর রঙগুলিতে সক্ষম কিনা তা পরীক্ষা করে দেখুন। - ব্যবহারকারীর ব্রাউজার ওকলচ বা ডিসপ্লে পি 3 এর মতো রঙিন সিনট্যাক্স বুঝতে পারে কিনা তা পরীক্ষা করুন। - ওকলাব, ওকলচ, এইচডাব্লুবি, ডিসপ্লে পি 3, rec.2020, এক্সওয়াইজেড এবং আরও অনেক কিছুতে এইচডিআর রঙ নির্দিষ্ট করুন। - এইচডিআর রঙগুলির সাথে গ্রেডিয়েন্টগুলি তৈরি করুন - বিকল্প রঙের স্পেসগুলিতে ইন্টারপোলেট গ্রেডিয়েন্টগুলি। - color-mix() এর সাথে রঙগুলি মিশ্রিত করুন। - আপেক্ষিক রঙ সিনট্যাক্স সহ রঙের রূপগুলি তৈরি করুন।

রঙ 4 স্ক্রিনকাস্ট

রঙ 4 ডেমো

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

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

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

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

উৎস

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

রঙ-মিশ্রণ () স্ক্রিনকাস্ট

রঙ-মিশ্রণ () ডেমো

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

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

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

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

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

আরসিএস স্ক্রিনকাস্ট

আরসিএস লাইভ ডেমো

রঙ পরিবর্তন করুন, দৃশ্য পরিবর্তন করুন। প্রতিটি বেস রঙ থেকে ভেরিয়েন্ট তৈরি করতে আপেক্ষিক রঙ সিনট্যাক্স ব্যবহার করে।

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

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

প্রতিক্রিয়াশীল ডিজাইন

প্রতিক্রিয়াশীল নকশাটি 2023 সালে বিকশিত হয়েছিল This কনটেইনার কোয়েরিগুলির সংমিশ্রণ এবং :has() তাদের পিতামাতার আকারের উপর ভিত্তি করে তাদের প্রতিক্রিয়াশীল এবং যৌক্তিক স্টাইলিংয়ের পাশাপাশি তাদের কোনও সন্তানের উপস্থিতি বা অবস্থার উপর ভিত্তি করে এমন উপাদানগুলি সমর্থন করে। এর অর্থ আপনি অবশেষে উপাদান-স্তরের লেআউট থেকে পৃষ্ঠা-স্তরের লেআউটটি পৃথক করতে পারেন এবং আপনার উপাদানটি সর্বত্র ব্যবহার করতে একবার যুক্তিটি লিখতে পারেন!

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

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

উৎস

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

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

@কনটাইনার স্ক্রিনকাস্ট

@কনটাইনার ডেমো

ধারক অনুসন্ধানগুলি ব্যবহার সম্পর্কে আরও জানুন।

স্টাইল ধারক অনুসন্ধান

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

উৎস

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

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

স্টাইল কনটেইনার ক্যোয়ারী ওয়েদার কার্ডের জন্য ডেমো স্ক্রিনশট

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

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

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

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

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

উৎস

প্রায় 20 বছর ধরে বিকাশকারীরা সিএসএসে একটি "পিতামাতার নির্বাচক" চেয়েছিলেন। এর সাথে :has() নির্বাচনকারী এটি এখন সম্ভব। উদাহরণস্বরূপ, .card:has(img.hero) .card

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

: () লাইভ ডেমো রয়েছে

সিএসএস :has() ডেমো: চিত্র ছাড়াই/কার্ড

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

: () স্ক্রিনকাস্ট রয়েছে

: আছে () ডেমো

সিএসএস :has() ডেমো: ডক

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

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

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

উৎস

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

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

স্ক্রিনকাস্ট আপডেট করুন

আপডেট ডেমো

সিমুলেট (একটি রেডিও বিকল্প চয়ন করে) একটি আপডেটের গতির মান এবং এটি কীভাবে হাঁসকে প্রভাবিত করে তা দেখুন।

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

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

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

উৎস

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

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

স্ক্রিপ্টিং স্ক্রিনকাস্ট

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

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

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

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

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

উৎস

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

স্বচ্ছতা স্ক্রিনকাস্ট হ্রাস

স্বচ্ছতা ডেমো হ্রাস

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

@মিডিয়া সম্পর্কে আরও জানুন (পছন্দগুলি-হ্রাস-স্বচ্ছলতা) ।

মিথস্ক্রিয়া

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

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

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

উৎস

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

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

ভিটি স্ক্রিনকাস্ট

ভিটি ডেমো

ট্রানজিশন ডেমো দেখুন

ক্রোম 111 এ প্রেরণ করা একক পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্য ভিউ ট্রানজিশন এপিআই। দেখুন রূপান্তর সম্পর্কে আরও জানুন।

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

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

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

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

লিনিয়ার-ইজিং স্ক্রিনকাস্ট

লিনিয়ার-ইজিং ডেমো

সিএসএস linear() ডেমো।

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

স্ক্রোল শেষ

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

উৎস

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

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

স্ক্রোলেন্ড ডেমো

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

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

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

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

উৎস

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

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

এসডিএ স্ক্রিনকাস্ট

এসডিএ ডেমো

সিএসএস স্ক্রোল-চালিত অ্যানিমেশন ডেমো: স্ক্রোল টাইমলাইন

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

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

এসডিএ লাইভ ডেমো

সিএসএস স্ক্রোল-চালিত অ্যানিমেশন ডেমো: টাইমলাইন দেখুন

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

স্ক্রোল-চালিত অ্যানিমেশন সম্পর্কে আরও জানতে এই নিবন্ধটি সমস্ত বিশদ সহ দেখুন বা স্ক্রোল-চালিত-অ্যানিমেশনস.স্টাইল দেখুন যা অনেকগুলি ডেমো অন্তর্ভুক্ত করে।

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

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

উৎস

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

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

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

লাইভ ডেমো

সিএসএস স্ক্রোল-চালিত অ্যানিমেশন ডেমো: মুলতুবি টাইমলাইন সংযুক্তি

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

পৃথক সম্পত্তি অ্যানিমেশন

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

বিচ্ছিন্ন অ্যানিম। স্ক্রিনকাস্ট

বিচ্ছিন্ন অ্যানিম। ডেমো

পৃথক অ্যানিমেশনগুলি স্থানান্তর সম্পর্কে আরও জানুন।

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

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

উৎস

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

@প্রারম্ভিক স্টাইলের স্ক্রিনকাস্ট

@প্রারম্ভিক স্টাইলের ডেমো

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

ওভারলে

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

উৎস

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

ওভারলে স্ক্রিনকাস্ট

ওভারলে লাইভ ডেমো

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

উপাদান

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

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

উৎস

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

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

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

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

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

ক্রোমে হালকা এবং গা dark ় থিমের সাথে নির্বাচন করে এইচআর এর স্ক্রিনশট

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

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

: ব্যবহারকারী-বৈধ এবং অবৈধ সিউডো ক্লাস

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

উৎস

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

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

: ব্যবহারকারী-* স্ক্রিনকাস্ট

: ব্যবহারকারী-* লাইভ ডেমো

ব্যবহারকারী-* ফর্ম বৈধতা সিউডো উপাদানগুলি ব্যবহার করার বিষয়ে আরও জানুন।

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

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

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

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

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

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

উপসংহার

সিএসএসের বিগত কয়েক বছরে এবং বিশেষত ২০২৩ সালের মধ্যে এই জাতীয় নবজাগরণ হয়েছে you're আপনি যদি সিএসএসে নতুন হন বা কেবল বেসিকগুলিতে একটি রিফ্রেশার চান তবে ওয়েবের অফারটিতে অন্যান্য ফ্রি কোর্স সহ আমাদের বিনামূল্যে শিখুন সিএসএস কোর্সটি দেখুন .দেভ।

আমরা আপনাকে একটি শুভ ছুটির মরসুম কামনা করি এবং আশা করি আপনি শীঘ্রই আপনার কাজের সাথে এই উজ্জ্বল নতুন সিএসএস এবং ইউআই বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার সুযোগ পাবেন!

⇾ ক্রোম ইউআই ডিভ্রেল দল,

Una Kravets

Bramus

Adam Argyle

CSS মোড়ানো: 2023!, CSS মোড়ানো: 2023!, CSS মোড়ানো: 2023!

CSS মোড়ানো: 2023!

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

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

নেস্টিং স্ক্রিনকাস্ট

নেস্টিং লাইভ ডেমো

সাবগ্রিড স্ক্রিনকাস্ট

সাবগ্রিড লাইভ ডেমো

টাইপোগ্রাফি

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

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

টেক্সট-র্যাপ স্ক্রিনকাস্ট

টেক্সট-র্যাপ লাইভ ডেমো

রঙ 4 স্ক্রিনকাস্ট

কালার 4 ডেমো

color-mix() স্ক্রিনকাস্ট

color-mix() ডেমো

আরসিএস স্ক্রিনকাস্ট

RCS লাইভ ডেমো

@কন্টেইনার স্ক্রিনকাস্ট

@কন্টেইনার ডেমো

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

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

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

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

:has() স্ক্রিনকাস্ট

:has() ডেমো

স্ক্রিনকাস্ট আপডেট করুন

ডেমো আপডেট করুন

স্ক্রিপ্টিং স্ক্রিনকাস্ট

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

স্বচ্ছতা স্ক্রীনকাস্ট হ্রাস

কম স্বচ্ছতা ডেমো

ভিটি স্ক্রিনকাস্ট

ভিটি ডেমো

লিনিয়ার-সহজ স্ক্রিনকাস্ট

লিনিয়ার-ইজিং ডেমো

স্ক্রলেন্ড স্ক্রিনকাস্ট

স্ক্রলেন্ড ডেমো

এসডিএ স্ক্রিনকাস্ট

SDA ডেমো

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

SDA লাইভ ডেমো

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

লাইভ ডেমো

বিচ্ছিন্ন Anim. স্ক্রিনকাস্ট

বিচ্ছিন্ন Anim. ডেমো

@স্টার্টিং-স্টাইলের স্ক্রিনকাস্ট

@স্টার্টিং-স্টাইল ডেমো

ওভারলে স্ক্রিনকাস্ট

ওভারলে লাইভ ডেমো

পপওভার স্ক্রিনকাস্ট

পপওভার লাইভ ডেমো

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

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

: ব্যবহারকারী-* স্ক্রিনকাস্ট

: ব্যবহারকারী-* লাইভ ডেমো

CSS মোড়ানো: 2023!

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

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

বাসা স্ক্রিনকাস্ট

বাসা লাইভ ডেমো

সাবগ্রিড স্ক্রিনকাস্ট

সাবগ্রিড লাইভ ডেমো

টাইপোগ্রাফি

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

প্রাথমিক-বর্ণের ডেমো

পাঠ্য-মোড়ের স্ক্রিনকাস্ট

পাঠ্য-মোড়ানো লাইভ ডেমো

রঙ 4 স্ক্রিনকাস্ট

রঙ 4 ডেমো

রঙ-মিশ্রণ () স্ক্রিনকাস্ট

রঙ-মিশ্রণ () ডেমো

আরসিএস স্ক্রিনকাস্ট

আরসিএস লাইভ ডেমো

@কনটাইনার স্ক্রিনকাস্ট

@কনটাইনার ডেমো

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

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

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