CSS 2022 এর অবস্থা

আজ এবং আগামীকালের ওয়েব স্টাইলিং বৈশিষ্ট্য, যেমনটি Google IO 2022-এ দেখা গেছে, এবং কিছু অতিরিক্ত সুবিধাও।

Adam Argyle

২০২২ সালটি CSS-এর অন্যতম সেরা বছর হতে চলেছে, বৈশিষ্ট্য এবং সহযোগিতামূলক ব্রাউজার বৈশিষ্ট্য প্রকাশের ক্ষেত্রে, ১৪টি বৈশিষ্ট্য বাস্তবায়নের একটি সহযোগিতামূলক লক্ষ্য নিয়ে!

সংক্ষিপ্ত বিবরণ

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

সুচিপত্র

আগ্রহের বিষয়গুলিতে যেতে নীচের তালিকাটি ব্যবহার করুন:

ব্রাউজারের সামঞ্জস্য

এতগুলি CSS বৈশিষ্ট্য একসাথে প্রকাশের একটি প্রধান কারণ হল Interop 2022 এর প্রচেষ্টা। Interop প্রচেষ্টা অধ্যয়ন করার আগে, Compat 2021 এর প্রচেষ্টাগুলি দেখা গুরুত্বপূর্ণ।

প্রতিযোগিতা ২০২১

জরিপের মাধ্যমে ডেভেলপারদের প্রতিক্রিয়ার উপর ভিত্তি করে ২০২১ সালের লক্ষ্য ছিল বর্তমান বৈশিষ্ট্যগুলিকে স্থিতিশীল করা, পরীক্ষা স্যুট উন্নত করা এবং পাঁচটি বৈশিষ্ট্যের জন্য ব্রাউজারের পাসিং স্কোর বৃদ্ধি করা:

1. sticky পজিশনিং
2. aspect-ratio আকার নির্ধারণ
3. flex লেআউট
4. grid লেআউট
5. transform পজিশনিং এবং অ্যানিমেশন

পরীক্ষার ফলাফল সর্বত্র বৃদ্ধি পেয়েছে, যা উন্নত স্থিতিশীলতা এবং নির্ভরযোগ্যতা প্রদর্শন করেছে। এখানকার দলগুলিকে অনেক অভিনন্দন!

ইন্টারপ ২০২২

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

1. @layer
2. রঙের স্থান এবং ফাংশন
3. কন্টেনমেন্ট
4. <dialog>
5. ফর্ম সামঞ্জস্য
6. স্ক্রোলিং
7. সাবগ্রিড
8. টাইপোগ্রাফি
9. ভিউপোর্ট ইউনিট
10. ওয়েব কম্প্যাট

এটি একটি উত্তেজনাপূর্ণ এবং উচ্চাকাঙ্ক্ষী তালিকা যা প্রকাশিত হওয়ার জন্য আমি অধীর আগ্রহে অপেক্ষা করতে পারছি না।

২০২২ সালের জন্য তাজা

অবাক হওয়ার কিছু নেই যে, ইন্টারপ ২০২২ এর কাজের ফলে CSS ২০২২ এর অবস্থা নাটকীয়ভাবে প্রভাবিত হয়েছে।

ক্যাসকেড স্তর

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

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

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

কোন স্টাইলগুলি কোন স্তর থেকে আসছে তা কল্পনা করার জন্য Chrome DevTools সহায়ক:

রিসোর্স

• CSS ক্যাসকেড ৫ স্পেসিফিকেশন
• ক্যাসকেড লেয়ার ব্যাখ্যাকারী
• MDN-তে স্তরগুলি ক্যাসকেড করুন
• উনা ক্রাভেটস : ক্যাসকেড স্তর
• আহমেদ শাদীদ : হ্যালো, সিএসএস ক্যাসকেড স্তরসমূহ

সাবগ্রিড

subgrid এর আগে, অন্য গ্রিডের ভিতরের একটি গ্রিড তার প্যারেন্ট সেল বা গ্রিড লাইনের সাথে নিজেকে সারিবদ্ধ করতে পারত না। প্রতিটি গ্রিড লেআউট অনন্য ছিল। অনেক ডিজাইনার তাদের পুরো ডিজাইনের উপর একটি একক গ্রিড স্থাপন করতেন এবং এর মধ্যে থাকা আইটেমগুলিকে ক্রমাগত সারিবদ্ধ করতেন, যা CSS-এ করা যেত না।

subgrid পরে, একটি গ্রিডের একটি শিশু তার পিতামাতার কলাম বা সারিগুলিকে নিজের হিসাবে গ্রহণ করতে পারে এবং নিজেকে বা শিশুদেরকে তাদের সাথে সারিবদ্ধ করতে পারে!

নিম্নলিখিত ডেমোতে, বডি এলিমেন্টটি তিনটি কলামের একটি ক্লাসিক গ্রিড তৈরি করে: মাঝের কলামটিকে বলা হয় main , এবং বাম এবং ডান কলামগুলি তাদের লাইনগুলিকে fullbleed নামে নামকরণ করে। তারপর, বডির প্রতিটি এলিমেন্ট, <nav> এবং <main> , grid-template-columns: subgrid সেট করে বডি থেকে নামকরণ করা লাইনগুলি গ্রহণ করে।

​​body {
  display: grid;
  grid-template-columns:
    [fullbleed-start]
    auto [main-start] min(90%, 60ch) [main-end] auto
    [fullbleed-end]
  ;
}

body > * {
  display: grid;
  grid-template-columns: subgrid;
}

সবশেষে, <nav> অথবা <main> এর শিশুরা fullbleed এবং main কলাম এবং লাইন ব্যবহার করে নিজেদের সারিবদ্ধ বা আকার দিতে পারে।

.main-content {
  grid-column: main;
}

.fullbleed {
  grid-column: fullbleed;
}

Devtools আপনাকে লাইন এবং সাবগ্রিড দেখতে সাহায্য করতে পারে (শুধুমাত্র Firefox এই মুহূর্তে)। নিচের ছবিতে, প্যারেন্ট গ্রিড এবং সাবগ্রিডগুলি ওভারলে করা হয়েছে। এটি এখন ডিজাইনাররা লেআউট সম্পর্কে যেভাবে ভাবছিলেন তার অনুরূপ।

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

রিসোর্স

• সাবগ্রিড স্পেসিফিকেশন
• MDN-তে সাবগ্রিড
• ব্রামাস : ব্যবহারিক সিএসএস সাবগ্রিড ভিডিও টিউটোরিয়াল

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

@container এর আগে, একটি ওয়েবপেজের উপাদানগুলি কেবল পুরো ভিউপোর্টের আকারের উপর নির্ভর করতে পারত। এটি ম্যাক্রো লেআউটের জন্য দুর্দান্ত, কিন্তু মাইক্রো লেআউটের জন্য, যেখানে তাদের বাইরের কন্টেইনারটি পুরো ভিউপোর্ট নয়, লেআউটের পক্ষে সেই অনুযায়ী সামঞ্জস্য করা অসম্ভব।

@container এর পরে, উপাদানগুলি একটি মূল কন্টেইনারের আকার বা স্টাইলের সাথে সাড়া দিতে পারে! একমাত্র সতর্কতা হল কন্টেইনারগুলিকে অবশ্যই নিজেদেরকে সম্ভাব্য কোয়েরি লক্ষ্য হিসাবে ঘোষণা করতে হবে, যা একটি বৃহৎ সুবিধার জন্য একটি ছোট প্রয়োজনীয়তা।

/* establish a container */
.day {
  container-type: inline-size;
  container-name: calendar-day;
}

এই স্টাইলগুলিই পরবর্তী ভিডিওতে সোম, মঙ্গল, বুধ, বৃহস্পতি এবং শুক্র কলামগুলিকে ইভেন্ট উপাদানগুলির দ্বারা জিজ্ঞাসা করতে সক্ষম করে তোলে।

calendar-day কন্টেইনারের আকার অনুসন্ধানের জন্য, তারপর লেআউট এবং ফন্টের আকার সামঞ্জস্য করার জন্য এখানে CSS দেওয়া হল:

@container calendar-day (max-width: 200px) {
  .date {
    display: block;
  }

  .date-num {
    font-size: 2.5rem;
    display: block;
  }
}

এখানে আরেকটি উদাহরণ দেওয়া হল: একটি বইয়ের উপাদান কলামের যে জায়গায় টেনে আনা হয়েছে, সেখানে উপলব্ধ জায়গার সাথে নিজেকে খাপ খাইয়ে নেয়:

নতুন প্রতিক্রিয়াশীল হিসেবে পরিস্থিতি মূল্যায়নে উনা সঠিক। @container ব্যবহার করার সময় অনেক উত্তেজনাপূর্ণ এবং অর্থপূর্ণ ডিজাইনের সিদ্ধান্ত নিতে হয়।

রিসোর্স

• কন্টেইনার কোয়েরি স্পেসিফিকেশন
• কন্টেইনার কোয়েরি ব্যাখ্যাকারী
• MDN-তে কন্টেইনার কোয়েরি
• web.dev-এ নতুন রেসপন্সিভ
• উনার ক্যালেন্ডার ডেমো
• অসাধারণ কন্টেইনার কোয়েরি সংগ্রহ
• web.dev-এ আমরা কীভাবে Designcember তৈরি করেছি
• আহমেদ শাদীদ : সিএসএস কন্টেইনার কোয়েরিগুলিকে স্বাগত জানান

accent-color

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

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

/* tint everything */
:root {
  accent-color: hotpink;
}

/* tint one element */
progress {
  accent-color: indigo;
}

accent-color সম্পর্কে আরও জানতে, web.dev-এ আমার পোস্টটি দেখুন যেখানে আমি এই দরকারী CSS বৈশিষ্ট্যের আরও অনেক দিক অন্বেষণ করেছি।

রিসোর্স

• অ্যাকসেন্ট-কালার স্পেসিফিকেশন
• MDN-তে অ্যাকসেন্ট-রঙ
• web.dev-এ অ্যাকসেন্ট-কালার
• ব্রামাস : সিএসএস অ্যাকসেন্ট-রঙের সাহায্যে টিন্ট ইউজার-ইন্টারফেস নিয়ন্ত্রণ

রঙের স্তর ৪ এবং ৫

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

যদিও ২০২২ সালে নয়—CSS-এ বেশ কিছু নতুন রঙের ফাংশন এবং স্পেস রয়েছে: - এমন রঙ যা ডিসপ্লের HD রঙের ক্ষমতার সাথে সঙ্গতিপূর্ণ। - এমন রঙের স্পেস যা একটি অভিপ্রায় অনুসারে কাজ করে, যেমন উপলব্ধিমূলক অভিন্নতা। - গ্রেডিয়েন্টের জন্য রঙের স্পেস যা ইন্টারপোলেশনের ফলাফলকে আমূল পরিবর্তন করে। - রঙের ফাংশন যা আপনাকে মিশ্রিত করতে এবং বৈপরীত্য করতে সাহায্য করে এবং আপনি কোন জায়গায় কাজ করবেন তা বেছে নেয়।

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

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

@media (dynamic-range: high) {
  .neon-pink {
    --neon-glow: color(display-p3 1 0 1);
  }
}

@supports (color: lab(0% 0 0)) {
  .neon-pink {
    --neon-glow: lab(150% 160 0);
  }
}

hwb()

HWB হল রঙ, সাদাভাব এবং কালোভাব। এটি রঙ প্রকাশের একটি মানব-বান্ধব উপায় হিসেবে নিজেকে উপস্থাপন করে, কারণ এটি কেবল একটি রঙ এবং হালকা বা গাঢ় করার জন্য সাদা বা কালোর পরিমাণ। যেসব শিল্পী সাদা বা কালোর সাথে রঙ মিশ্রিত করেন তারা এই রঙের বাক্য গঠন সংযোজনের প্রশংসা করতে পারেন।

এই রঙের ফাংশনটি ব্যবহার করলে sRGB রঙের স্থান থেকে রঙ পাওয়া যাবে, যা HSL এবং RGB-এর মতোই। ২০২২ সালের নতুনত্বের দিক থেকে, এটি আপনাকে নতুন রঙ দেবে না, তবে এটি বাক্য গঠন এবং মানসিক মডেলের ভক্তদের জন্য কিছু কাজ সহজ করে তুলতে পারে।

রিসোর্স

• HWB স্পেসিফিকেশন
• MDN-তে HWB
• স্টেফান জুডিস : hwb() – মানুষের জন্য একটি রঙের স্বরলিপি?

রঙের স্থান

রঙগুলি যেভাবে উপস্থাপন করা হয় তা একটি রঙের স্থান দিয়ে করা হয়। প্রতিটি রঙের স্থান রঙের সাথে কাজ করার জন্য বিভিন্ন বৈশিষ্ট্য এবং বিনিময় প্রদান করে। কেউ কেউ সমস্ত উজ্জ্বল রঙ একসাথে প্যাক করতে পারে; কেউ কেউ তাদের হালকাতার উপর ভিত্তি করে প্রথমে সেগুলিকে সারিবদ্ধ করতে পারে।

২০২২ সালের CSS ১০টি নতুন রঙের স্থান অফার করবে, প্রতিটিতে অনন্য বৈশিষ্ট্য থাকবে যা ডিজাইনার এবং ডেভেলপারদের রঙ প্রদর্শন, বাছাই এবং মিশ্রিত করতে সহায়তা করবে। পূর্বে, রঙের সাথে কাজ করার জন্য sRGBই একমাত্র বিকল্প ছিল, কিন্তু এখন CSS নতুন সম্ভাবনা এবং একটি নতুন ডিফল্ট রঙের স্থান, LCH, উন্মোচন করে।

color-mix()

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

color-mix() এর পরে, ডেভেলপার এবং ডিজাইনাররা ব্রাউজারে তাদের অন্যান্য স্টাইলের সাথে, বিল্ড প্রক্রিয়া না চালিয়ে বা জাভাস্ক্রিপ্ট ব্যবহার না করেই রঙ মিশ্রিত করতে পারেন। অতিরিক্তভাবে, তারা কোন রঙের স্থানটি মিশ্রিত করতে হবে তা নির্দিষ্ট করতে পারেন, অথবা LCH এর ডিফল্ট মিক্সিং রঙের স্থান ব্যবহার করতে পারেন।

প্রায়শই, একটি ব্র্যান্ডের রঙকে ভিত্তি হিসেবে ব্যবহার করা হয় এবং এর থেকে বিভিন্ন রূপ তৈরি করা হয়, যেমন হোভার স্টাইলের জন্য হালকা বা গাঢ় রঙ। color-mix() এর ক্ষেত্রে এটি কেমন দেখায় তা এখানে দেওয়া হল:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(var(--brand) 25%, black);
  --lighter: color-mix(var(--brand) 25%, white);
}

এবং যদি আপনি ঐ রঙগুলিকে অন্য রঙের জায়গায় মিশ্রিত করতে চান, যেমন srgb, তাহলে এটি পরিবর্তন করুন:

.color-mix-example {
  --brand: #0af;

  --darker: color-mix(in srgb, var(--brand) 25%, black);
  --lighter: color-mix(in srgb, var(--brand) 25%, white);
}

এখানে color-mix() ব্যবহার করে একটি থিমিং ডেমো দেওয়া হল। ব্র্যান্ডের রঙ পরিবর্তন করে দেখুন এবং থিমের আপডেট দেখুন:

২০২২ সালে আপনার স্টাইলশিটে বিভিন্ন রঙের জায়গায় রঙ মিশিয়ে উপভোগ করুন!

রিসোর্স

• color-mix() স্পেসিফিকেশন
• MDN-তে color-mix()
• থিমিং ডেমো
• আরেকটি থিমিং ডেমো
• ফ্যাবিও জিওলিটো : আসন্ন এই সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করে একটি রঙিন থিম তৈরি করুন

color-contrast()

color-contrast() ব্যবহার করার আগে, স্টাইলশিট লেখকদের আগে থেকেই অ্যাক্সেসযোগ্য রঙগুলি জানতে হত। প্রায়শই একটি প্যালেট রঙের সোয়াচে কালো বা সাদা টেক্সট দেখাত, যা রঙ সিস্টেমের ব্যবহারকারীকে নির্দেশ করত যে সেই সোয়াচের সাথে সঠিকভাবে কন্ট্রাস্ট করার জন্য কোন টেক্সট রঙের প্রয়োজন।

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

এখানে একটি HWB কালার প্যালেট সেট ডেমোর স্ক্রিনশট দেওয়া হল যেখানে সোয়াচ রঙের উপর ভিত্তি করে ব্রাউজার স্বয়ংক্রিয়ভাবে টেক্সটের রঙ বেছে নেয়:

সিনট্যাক্সের মূল বিষয়গুলি এইরকম দেখায়, যেখানে ধূসর রঙ ফাংশনে পাঠানো হয় এবং ব্রাউজার নির্ধারণ করে যে কালো না সাদা রঙে সবচেয়ে বেশি বৈসাদৃশ্য আছে কিনা:

color: color-contrast(gray);

ফাংশনটিকে রঙের তালিকার সাথেও কাস্টমাইজ করা যেতে পারে, যেখান থেকে এটি নির্বাচন থেকে সর্বোচ্চ বিপরীত রঙটি বেছে নেবে:

color: color-contrast(gray vs indigo, rebeccapurple, hotpink);

পরিশেষে, যদি তালিকা থেকে সর্বোচ্চ বৈপরীত্য রঙটি না বেছে নেওয়াই ভালো হয়, তাহলে একটি লক্ষ্য বৈপরীত্য অনুপাত প্রদান করা যেতে পারে, এবং এটি পাস করার জন্য প্রথম রঙটি বেছে নেওয়া হয়:

color: color-contrast(
  var(--bg-blue-1)
  vs
  var(--text-lightest), var(--text-light), var(--text-subdued)
  to AA /* 4.5 could also be passed */
);

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

রিসোর্স

• রঙ-বিপরীতে() স্পেসিফিকেশন
• MDN-তে color-contrast()
• ডেমো

আপেক্ষিক রঙের বাক্য গঠন

আপেক্ষিক রঙের সিনট্যাক্সের আগে, রঙের হিসাব করতে এবং সমন্বয় করতে, রঙের চ্যানেলগুলিকে পৃথকভাবে কাস্টম বৈশিষ্ট্যে স্থাপন করতে হত। এই সীমাবদ্ধতা HSL কে রঙ পরিচালনার জন্য প্রাথমিক রঙের ফাংশনে পরিণত করেছিল কারণ calc() দিয়ে রঙ, স্যাচুরেশন বা হালকাতা সবকিছুই সহজে সামঞ্জস্য করা যেত।

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

নিম্নলিখিত সিনট্যাক্স উদাহরণে, একটি বেস হেক্স প্রদান করা হয়েছে এবং এর সাথে সাপেক্ষে দুটি নতুন রঙ তৈরি করা হয়েছে। প্রথম রঙ --absolute-change বেস রঙ থেকে LCH তে একটি নতুন রঙ তৈরি করে, তারপর বেস রঙের হালকাতা 75% দিয়ে প্রতিস্থাপন করে, ক্রোমা ( c ) এবং হিউ ( h ) বজায় রাখে। দ্বিতীয় রঙ --relative-change বেস রঙ থেকে LCH তে একটি নতুন রঙ তৈরি করে, কিন্তু এবার ক্রোমা ( c ) 20% কমিয়ে দেয়।

.relative-color-syntax {
  --color: #0af;
  --absolute-change: lch(from var(--color) 75% c h);
  --relative-change: lch(from var(--color) l calc(c-20%) h);
}

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

নিচের ডেমোতে আমি বেস রঙের হালকা এবং গাঢ় রূপ তৈরি করতে আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করেছি এবং লেবেলগুলিতে সঠিক বৈসাদৃশ্য নিশ্চিত করতে color-contrast() ব্যবহার করেছি:

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

:root {
  --_color-base: #339af0;

  --color-0:  lch(from var(--_color-base) 98% 10 h);
  --color-1:  lch(from var(--_color-base) 93% 20 h);
  --color-2:  lch(from var(--_color-base) 85% 40 h);
  --color-3:  lch(from var(--_color-base) 75% 46 h);
  --color-4:  lch(from var(--_color-base) 66% 51 h);
  --color-5:  lch(from var(--_color-base) 61% 52 h);
  --color-6:  lch(from var(--_color-base) 55% 57 h);
  --color-7:  lch(from var(--_color-base) 49% 58 h);
  --color-8:  lch(from var(--_color-base) 43% 55 h);
  --color-9:  lch(from var(--_color-base) 39% 52 h);
  --color-10: lch(from var(--_color-base) 32% 48 h);
  --color-11: lch(from var(--_color-base) 25% 45 h);
  --color-12: lch(from var(--_color-base) 17% 40 h);
  --color-13: lch(from var(--_color-base) 10% 30 h);
  --color-14: lch(from var(--_color-base) 5% 20 h);
  --color-15: lch(from var(--_color-base) 1% 5 h);
}

আশা করি এখন পর্যন্ত আপনি দেখতে পাচ্ছেন কিভাবে রঙের স্থান এবং বিভিন্ন রঙের ফাংশনগুলি তাদের শক্তি এবং দুর্বলতার উপর ভিত্তি করে বিভিন্ন উদ্দেশ্যে ব্যবহার করা যেতে পারে।

রিসোর্স

• আপেক্ষিক রঙের সিনট্যাক্স স্পেসিফিকেশন
• আপেক্ষিক রঙের বাক্য গঠন ব্যবহার করে রঙ প্যালেট তৈরি করা
• আপেক্ষিক রঙের বাক্য গঠনের মাধ্যমে রঙের বৈকল্পিক তৈরি করা

গ্রেডিয়েন্ট রঙের স্থান

গ্রেডিয়েন্ট কালার স্পেসের আগে, sRGB ডিফল্ট কালার স্পেস ছিল। sRGB সাধারণত নির্ভরযোগ্য, তবে এর কিছু দুর্বলতা রয়েছে যেমন গ্রে ডেড জোন ।

গ্রেডিয়েন্ট কালার স্পেসের পরে, ব্রাউজারকে বলুন কালার ইন্টারপোলেশনের জন্য কোন কালার স্পেস ব্যবহার করতে হবে। এটি ডেভেলপার এবং ডিজাইনারদের তাদের পছন্দের গ্রেডিয়েন্ট বেছে নেওয়ার ক্ষমতা দেয়। ডিফল্ট কালার স্পেসও sRGB এর পরিবর্তে LCH তে পরিবর্তিত হয়।

সিনট্যাক্স সংযোজন গ্রেডিয়েন্ট দিকনির্দেশনার পরে করা হয়, in new ব্যবহার করে এবং ঐচ্ছিক:

background-image: linear-gradient(
  to right in hsl,
  black, white
);

background-image: linear-gradient(
  to right in lch,
  black, white
);

এখানে কালো থেকে সাদা পর্যন্ত একটি মৌলিক এবং অপরিহার্য গ্রেডিয়েন্ট দেওয়া হল। প্রতিটি রঙের জায়গায় ফলাফলের পরিসর দেখুন। কিছু রঙ অন্যদের তুলনায় আগে গাঢ় কালো রঙে পৌঁছায়, কিছু রঙ অনেক দেরিতে সাদা রঙে পরিণত হয়।

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

আরও গভীর অনুসন্ধান, উদাহরণ এবং মন্তব্যের জন্য, এই টুইটার থ্রেডটি পড়ুন।

রিসোর্স

• গ্রেডিয়েন্ট ইন্টারপোলেশন স্পেসিফিকেশন
• স্পেসে গ্রেডিয়েন্ট তুলনা করার ডেমো
• গ্রেডিয়েন্ট তুলনা করার জন্য পর্যবেক্ষণযোগ্য নোটবুক

inert

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

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

এর একটি ভালো উদাহরণ হল জাভাস্ক্রিপ্ট alert() ফাংশন:

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

এটি কীভাবে কাজ করে তা দেখানোর জন্য এখানে একটি ছোট কোড নমুনা দেওয়া হল:

<body>
  <div class="modal">
    <h2>Modal Title</h2>
    <p>...<p>
    <button>Save</button>
    <button>Discard</button>
  </div>
  <main inert>
    <!-- cannot be keyboard focused or clicked -->
  </main>
</body>

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

রিসোর্স

• জড় স্পেসিফিকেশন
• MDN-তে নিষ্ক্রিয়
• ক্রোম ডেভেলপার: ইনার্টের সাথে পরিচয় করিয়ে দেওয়া হচ্ছে

COLRv1 ফন্ট

COLRv1 ফন্টের আগে, ওয়েবে OT-SVG ফন্ট ছিল, যা গ্রেডিয়েন্ট এবং অন্তর্নির্মিত রঙ এবং প্রভাব সহ ফন্টগুলির জন্য একটি উন্মুক্ত ফর্ম্যাট ছিল। যদিও এগুলি খুব বড় হতে পারে, এবং যদিও তারা পাঠ্য সম্পাদনা করার অনুমতি দেয়, কাস্টমাইজেশনের জন্য খুব বেশি সুযোগ ছিল না।

COLRv1 ফন্টের পরে, ওয়েবে ছোট ফুটপ্রিন্ট, ভেক্টর-স্কেলেবল, রিপজিশনেবল, গ্রেডিয়েন্ট-ফিচারিং এবং ব্লেন্ড-মোড চালিত ফন্ট রয়েছে যা প্রতিটি ব্যবহারের ক্ষেত্রে ফন্ট কাস্টমাইজ করার জন্য বা একটি ব্র্যান্ডের সাথে মেলে প্যারামিটার গ্রহণ করে।

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

এই ফর্ম্যাটের মাধ্যমে আইকন ফন্টগুলি কিছু অসাধারণ কাজ করতে পারে, কাস্টম ডুও-টোন কালার প্যালেট এবং আরও অনেক কিছু প্রদান করে। COLRv1 ফন্ট লোড করা ঠিক অন্য যেকোনো ফন্ট ফাইলের মতোই:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

COLRv1 ফন্ট কাস্টমাইজ করার জন্য @font-palette-values ​​ব্যবহার করা হয়, যা একটি বিশেষ CSS at-rule যা পরবর্তীতে রেফারেন্সের জন্য একটি বান্ডেলে কাস্টমাইজেশন বিকল্পগুলির একটি সেটকে গ্রুপ এবং নামকরণ করে। লক্ষ্য করুন কিভাবে আপনি একটি কাস্টম নাম ঠিক একটি কাস্টম প্রোপার্টির মতো নির্দিষ্ট করেন, -- দিয়ে শুরু করে:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

কাস্টমাইজেশনের জন্য --colorized নামটি ব্যবহার করে, শেষ ধাপ হল প্যালেটটি এমন একটি উপাদানে প্রয়োগ করা যা রঙের ফন্ট পরিবার ব্যবহার করছে:

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 hotpink, 1 cyan, 2 white;
}

.spicy {
  font-family: "Bungee Spice";
  font-palette: --colorized;
}

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

রিসোর্স

• Github-এ Colrv1 স্পেসিফিকেশন
• ক্রোম ডেভেলপার: Colrv1 ফন্ট
• BlinkOn বিকাশকারী ব্যাখ্যাকারী ভিডিও

ভিউপোর্ট ইউনিট

নতুন ভিউপোর্ট ভেরিয়েন্টের আগে, ওয়েবে ভিউপোর্ট ফিট করার জন্য ফিজিক্যাল ইউনিট দেওয়া হত। উচ্চতা, প্রস্থ, ক্ষুদ্রতম আকার (vmin) এবং বৃহত্তম দিকের (vmax) জন্য একটি ইউনিট ছিল। এগুলি অনেক কিছুর জন্য ভালোভাবে কাজ করেছিল, কিন্তু মোবাইল ব্রাউজারগুলি একটি জটিলতা তৈরি করেছিল।

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

.original-viewport-units {
  height: 100vh;
  width: 100vw;
  --size: 100vmin;
  --size: 100vmax;
}

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

নতুন ভিউপোর্ট ভেরিয়েন্টের সাথে উপলব্ধ সমস্ত নতুন ভিউপোর্ট ইউনিট বিকল্পগুলির একটি সম্পূর্ণ তালিকা এখানে দেওয়া হল:

​​.new-height-viewport-units {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  height: 100lvh;
  block-size: 100vb;
  block-size: 100dvb;
  block-size: 100svb;
  block-size: 100lvb;
}

.new-width-viewport-units {
  width: 100vw;
  width: 100dvw;
  width: 100svw;
  width: 100lvw;
  inline-size: 100vi;
  inline-size: 100dvi;
  inline-size: 100svi;
  inline-size: 100lvi;
}

.new-min-viewport-units {
  --size: 100vmin;
  --size: 100dvmin;
  --size: 100svmin;
  --size: 100lvmin;
}

.new-max-viewport-units {
  --size: 100vmax;
  --size: 100dvmax;
  --size: 100svmax;
  --size: 100lvmax;
}

আশা করি, এগুলো ডেভেলপার এবং ডিজাইনারদের তাদের ভিউপোর্ট রেসপন্সিভ ডিজাইন অর্জনের জন্য প্রয়োজনীয় নমনীয়তা প্রদান করবে।

রিসোর্স

• ভিউপোর্ট আপেক্ষিক ইউনিট স্পেসিফিকেশন
• ব্রামাস : বৃহৎ, ক্ষুদ্র এবং গতিশীল ভিউপোর্ট

:has()

:has() এর আগে, একটি নির্বাচকের বিষয় সর্বদা শেষে থাকত। উদাহরণস্বরূপ, এই নির্বাচকের বিষয় হল একটি তালিকা আইটেম: ul > li । ছদ্ম নির্বাচকরা নির্বাচককে পরিবর্তন করতে পারে কিন্তু তারা বিষয় পরিবর্তন করে না: ul > li:hover অথবা ul > li:not(.selected) ।

:has() এর পরে, element tree-এর উপরে থাকা একটি subject শিশুদের সম্পর্কে একটি প্রশ্ন প্রদান করার সময় subject হিসেবেই থাকতে পারে: ul:has(> li) । এটা বোঝা সহজ যে :has() কীভাবে "parent selector" এর একটি সাধারণ নাম পেয়েছে, কারণ এই ক্ষেত্রে selector-এর subject এখন parent।

এখানে একটি মৌলিক সিনট্যাক্স উদাহরণ দেওয়া হল যেখানে .parent ক্লাসটি সাবজেক্ট হিসেবেই থেকে যায় কিন্তু শুধুমাত্র তখনই নির্বাচিত হয় যদি একটি child এলিমেন্টে .child ক্লাস থাকে:

.parent:has(.child) {...}

এখানে একটি উদাহরণ দেওয়া হল যেখানে <section> এলিমেন্ট হল subject, কিন্তু নির্বাচক শুধুমাত্র তখনই মিলবে যদি শিশুদের মধ্যে একটিতে :focus-visible : থাকে।

section:has(*:focus-visible) {...}

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

a:has(> img) {...}

এই সব উদাহরণই এমন যেখানে :has() শুধুমাত্র একজন প্যারেন্ট সিলেক্টরের মতো দেখায়। <figure> এলিমেন্টের ভিতরের ছবির ব্যবহারের ধরণ এবং চিত্রে <figcaption> থাকলে ছবির স্টাইল সামঞ্জস্য করার পদ্ধতি বিবেচনা করুন। নিম্নলিখিত উদাহরণে, figcaptions সহ চিত্রগুলি নির্বাচন করা হয় এবং তারপরে সেই প্রসঙ্গের মধ্যে থাকা চিত্রগুলি। :has() ব্যবহার করা হয় এবং বিষয় পরিবর্তন করে না, কারণ আমরা যে বিষয়টিকে লক্ষ্য করছি তা চিত্র নয়:

figure:has(figcaption) img {...}

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

@supports এবং এর selector() ফাংশনের মাধ্যমে সাপোর্ট চেক করা সহজ করা হয়েছে, যা ব্রাউজারটি ব্যবহারের আগে সিনট্যাক্স বোঝে কিনা তা পরীক্ষা করে:

@supports (selector(:has(works))) {
  /* safe to use :has() */
}

রিসোর্স

• :has() স্পেসিফিকেশন
• MDN-তে :has()
• CSS :has() নির্বাচক কেবল "প্যারেন্ট নির্বাচক" এর চেয়ে অনেক বেশি কিছু।

২০২২ এবং তার পরেও

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

পরবর্তী বিভাগগুলি থেকে প্রাপ্ত ফলাফলটি স্বস্তির হওয়া উচিত যে তালিকাভুক্ত সমস্যাগুলির সমাধান খুঁজছেন অনেক কোম্পানির অনেকেই - এই সমাধানগুলি 2023 সালে প্রকাশিত হবে না এমন নয়।

আলগাভাবে টাইপ করা কাস্টম বৈশিষ্ট্য

CSS কাস্টম প্রোপার্টি অসাধারণ। এগুলো একটি নামযুক্ত ভেরিয়েবলের ভেতরে সব ধরণের জিনিস সংরক্ষণ করার সুযোগ দেয়, যা পরবর্তীতে বর্ধিত করা, গণনা করা, ভাগ করা এবং আরও অনেক কিছু করা যেতে পারে। আসলে, এগুলো এত নমনীয় যে, কম নমনীয় কিছু থাকলে ভালো হতো।

এমন একটি দৃশ্যকল্প বিবেচনা করুন যেখানে একটি box-shadow তার মানগুলির জন্য কাস্টম বৈশিষ্ট্য ব্যবহার করে:

box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);

এই সব কাজ করে যতক্ষণ না কোনও বৈশিষ্ট্য এমন একটি মানতে পরিবর্তিত হয় যা CSS সেখানে গ্রহণ করে না, যেমন --x: red । নেস্টেড ভেরিয়েবলগুলির মধ্যে যদি কোনও একটি অনুপস্থিত থাকে বা একটি অবৈধ মান টাইপে সেট করা থাকে তবে সম্পূর্ণ ছায়া ভেঙে যায়।

এখানেই @property আসে: --x একটি টাইপ করা কাস্টম প্রপার্টি হতে পারে, আর আলগা এবং নমনীয় নয়, তবে কিছু নির্দিষ্ট সীমানা সহ নিরাপদ:

@property --x {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

Now, when the box-shadow uses var(--x) and later --x: red is attempted, red will be ignored as it's not a <length> . This means the shadow continues to work, even though an invalid value was given to one of its custom properties. Instead of failing, it reverts to its initial-value of 0px .

অ্যানিমেশন

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

এই ডেমো উদাহরণটি বিবেচনা করুন, যেখানে একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করে একটি ওভারলে-এর একটি অংশ তৈরি করা হয়, যা স্পটলাইট ফোকাস এফেক্ট তৈরি করে। জাভাস্ক্রিপ্ট alt/opt কী টিপলে মাউস x এবং y সেট করে, এবং তারপর ফোকাল-সাইজকে 25% এর মতো একটি ছোট মান পরিবর্তন করে, যা মাউস অবস্থানে স্পটলাইট ফোকাস সার্কেল তৈরি করে:

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );
}

যদিও গ্রেডিয়েন্টগুলিকে অ্যানিমেটেড করা যায় না। এগুলি এতটাই নমনীয় এবং জটিল যে ব্রাউজারটি তাদের অ্যানিমেট করার জন্য "শুধুমাত্র" কিছু করতে পারে না। তবে @property ব্যবহার করে, একটি বৈশিষ্ট্য আলাদাভাবে টাইপ এবং অ্যানিমেটেড করা যেতে পারে, যার জন্য ব্রাউজার সহজেই উদ্দেশ্য বুঝতে পারে।

এই ফোকাস ইফেক্ট ব্যবহার করে এমন ভিডিও গেমগুলি সর্বদা বৃত্তটিকে অ্যানিমেট করে, একটি বড় বৃত্ত থেকে একটি পিনহোল বৃত্তে। আমাদের ডেমোতে @property কীভাবে ব্যবহার করবেন তা এখানে দেওয়া হল যাতে ব্রাউজারটি গ্রেডিয়েন্ট মাস্ককে অ্যানিমেট করে:

@property --focal-size {
  syntax: '<length-percentage>';
  initial-value: 100%;
  inherits: false;
}

.focus-effect {
  --focal-size: 100%;
  --mouse-x: center;
  --mouse-y: center;

  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 0%,
    transparent var(--focal-size),
    black 0%
  );

  transition: --focal-size .3s ease;
}

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

@property আরও অনেক কিছু করতে পারে, কিন্তু এই ছোট ছোট সক্ষমতা অনেক দূর যেতে পারে।

রিসোর্স

• @প্রপার্টি স্পেসিফিকেশন
• MDN-তে @property
• @property on web.dev
• জুম ফোকাস ডেমো
• সিএসএস কৌশল: @property এবং এর অ্যানিমেটিং ক্ষমতা অন্বেষণ করা

min-width অথবা max-width ছিল

মিডিয়া কোয়েরি রেঞ্জের আগে, একটি CSS মিডিয়া কোয়েরি min-width এবং max-width ব্যবহার করে শর্তের উপর এবং অধীনে স্পষ্টভাবে প্রকাশ করে। এটি দেখতে এরকম হতে পারে:

@media (min-width: 320px) {
  …
}

মিডিয়া কোয়েরি রেঞ্জের পরে, একই মিডিয়া কোয়েরিটি এইরকম দেখতে পারে:

@media (width >= 320px) {
  …
}

min-width এবং max-width উভয় ব্যবহার করে একটি CSS মিডিয়া কোয়েরি দেখতে এরকম হতে পারে:

@media (min-width: 320px) and (max-width: 1280px) {
  …
}

মিডিয়া কোয়েরি রেঞ্জের পরে, একই মিডিয়া কোয়েরিটি এইরকম দেখতে পারে:

@media (320px <= width <= 1280px) {
  …
}

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

রিসোর্স

• মিডিয়া কোয়েরি রেঞ্জ সিনট্যাক্স স্পেসিফিকেশন
• MDN-তে মিডিয়া কোয়েরি রেঞ্জ সিনট্যাক্স
• মিডিয়া কোয়েরি রেঞ্জ সিনট্যাক্স পোস্টসিএসএস প্লাগইন

কোনও মিডিয়া কোয়েরি ভেরিয়েবল নেই

@custom-media এর আগে, মিডিয়া কোয়েরিগুলিকে বারবার পুনরাবৃত্তি করতে হত, অথবা বিল্ড টাইমে স্ট্যাটিক ভেরিয়েবলের উপর ভিত্তি করে সঠিক আউটপুট তৈরি করতে প্রিপ্রসেসরের উপর নির্ভর করতে হত।

@custom-media পরে, CSS মিডিয়া কোয়েরিগুলিকে এলিয়াসিং এবং সেগুলির রেফারেন্সিং করার অনুমতি দেয়, ঠিক যেমন একটি কাস্টম প্রোপার্টি।

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

@custom-media --OSdark  (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);

@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse   (hover) and (pointer: fine);

@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);

এখন যেহেতু এগুলো সংজ্ঞায়িত করা হয়েছে, আমি এগুলোর একটি এভাবে ব্যবহার করতে পারি:

@media (--OSdark) {
  :root {
    …
  }
}

আমার CSS কাস্টম প্রপার্টি লাইব্রেরি Open Props- এর মধ্যে আমি যে কাস্টম মিডিয়া কোয়েরিগুলি ব্যবহার করি তার একটি সম্পূর্ণ তালিকা খুঁজুন।

রিসোর্স

• কাস্টম মিডিয়া কোয়েরি স্পেসিফিকেশন
• কাস্টম মিডিয়া কোয়েরি পোস্টসিএসএস প্লাগইন

নেস্টিং সিলেক্টরগুলো খুব সুন্দর।

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

@nest এর পরে, পুনরাবৃত্তি আর থাকবে না। প্রিপ্রসেসর-সক্ষম নেস্টিংয়ের প্রায় প্রতিটি বৈশিষ্ট্য CSS-এ অন্তর্নির্মিতভাবে উপলব্ধ করা হবে।

article {
  color: darkgray;
}

article > a {
  color: var(--link-color);
}

/* with @nest becomes */

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

What's most important about nesting to me, besides not repeating article in the nested selector, is the styling context remains within one style block. Instead of bouncing from one selector, and its styles, to another selector with styles (example 1), the reader can remain within the context of an article and see the article owns links inside of it. The relationship and style intent are bundled together, so article gets to appear to own its own styles.

The ownership could also be thought of as centralization. Instead of looking around a stylesheet for relevant styles, they can all be found nested together within a context. This works with parent to child relationships, but also with child to parent relationships.

Consider a component child that wants to adjust itself when in a different parent context, as opposed to the parent owning the style and changing a child:

/* parent owns this, adjusting children */
section:focus-within > article {
  border: 1px solid hotpink;
}

/* with @nest becomes */

/* article owns this, adjusting itself when inside a section:focus-within */
article {
  @nest section:focus-within > & {
     border: 1px solid hotpink;
  }
}

@nest helps overall with healthier style organization, centralization, and ownership. Components can group and own their own styles, instead of having them spread amongst other style blocks. It may seem small in these examples, but it can have very large impacts, for both convenience and legibility.

রিসোর্স

• @nest specification
• @nest PostCSS plugin
• Bramus : The future of CSS: Nesting Selectors

Scoping styles is really hard

Before @scope , many strategies existed because styles in CSS cascade, inherit, and are globally scoped by default. These features of CSS are very convenient for many things, but for complex sites and applications, with potentially many different styles of components, the global space and nature of the cascade can make styles feel like they're leaking.

After @scope , not only can styles be scoped to only within a context, like a class, they can also articulate where the styles end and do not continue to cascade or inherit.

In the following example, BEM naming convention scoping can be reversed into the actual intent. The BEM selector is attempting to scope the color of a header element to a .card container with naming conventions. This requires that the header has this classname on it, completing the goal. With @scope , no naming conventions are required in order to complete the same goal without marking up the header element:

.card__header {
  color: var(--text);
}

/* with @scope becomes */

@scope (.card) {
  header {
    color: var(--text);
  }
}

Here's another example, less component-specific and more about the global scope nature of CSS. Dark and light themes have to coexist inside a stylesheet, where order matters in determining a winning style. Usually this means dark theme styles come after the light theme; this establishes light as the default and dark as the optional style. Avoid the ordering and scope battling with @scope :

​​@scope (.light-theme) {
  a { color: purple; }
}

@scope (.dark-theme) {
  a { color: plum; }
}

To complete the story here, @scope also allows the establishing of where the style scope ends. This can't be done with any naming convention or preprocessor; it's special and only something CSS built-in to the browser can do. In the following example, img and .content styles are exclusively applied when a child of a .media-block is a sibling or parent of .content :

@scope (.media-block) to (.content) {
  img {
    border-radius: 50%;
  }

  .content {
    padding: 1em;
  }
}

রিসোর্স

• @scope specification
• @scope explainer

No CSS way for a masonry layout

Before CSS masonry with grid, JavaScript was the best way to achieve a masonry layout, as any of the CSS methods with columns or flexbox would inaccurately represent the content order.

After CSS masonry with grid, no JavaScript libraries will be required and the content order will be correct.

The preceding demo is achieved with the following CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

It's comforting to know that this is on the radar as a missing layout strategy, plus you can try it today in Firefox .

রিসোর্স

• Masonry layout specification
• Masonry layout on MDN
• Smashing Magazine: Native CSS Masonry Layout with CSS Grid

CSS can't help users reduce data

Before the prefers-reduced-data media query, JavaScript and a server could change their behavior based on a user's operating system or browser "data saver" option, but CSS could not.

After the prefers-reduced-data media query, CSS can join the user experience enhancement and play its part in saving data.

@media (prefers-reduced-data: reduce) {
  picture, video {
    display: none;
  }
}

The preceding CSS is used in this media scroll component and the savings can be huge. Depending on how large the visiting viewport is, the more savings to be had on page load. Saving continues as users interact with the media scrollers. The images all have loading="lazy" attributes on them and that, combined with CSS hiding the element entirely, means a network request for the image is never made.

For my testing, on a medium sized viewport, 40 requests and 700kb of resources were initially loaded. As a user scrolls the media selection, more requests and resources are loaded. With CSS and the reduced data media query, 10 requests and 172kb of resources are loaded. That's half a megabyte of savings and the user hasn't even scrolled any of the media, at which point there are no additional requests made.

There are more advantages to this reduced data experience than just data savings. More titles can be seen and there's no distracting cover images to steal attention. Many users browse in a data saver mode because they pay per megabyte of data—it's really nice to see CSS able to help out here.

রিসোর্স

• prefers-reduced-data specification
• prefers-reduced-data on MDN
• prefers-reduced-data in a GUI Challenge
• Smashing Magazine: Improving Core Web Vitals, A Smashing Magazine Case Study

Scroll snap features are too limited

Before these scroll snap proposals, writing your own JavaScript to manage a carousel, slider, or gallery could quickly get complex, with all the observers and state management. Also, if not careful, the natural scrolling speeds could get normalized by script, making user interaction feel a bit unnatural and potentially clunky.

New APIs

snapChanging()

As soon as the browser has released a snap child, this event fires. This allows UI to reflect the lack of a snap child and the indeterminate snap state of the scroller, as it's now being used and will land somewhere new.

document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
  console.log('Snap is changing', event.snappedTargetsList);
});

snapChanged()

As soon as the browser has snapped to a new child and the scroller is rested, this event fires. This lets any UI that depends on the snapped child to update and reflect the connection.

document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
  console.log('Snap changed', event.snappedTargetsList);
});

scroll-start

Scrolling doesn't always begin at the start. Consider swipeable components where swiping left or right triggers different events, or a search bar that on page load is initially hidden until you scroll to the top. This CSS property lets developers specify that a scroller should begin at a specific point.

:root { --nav-height: 100px }

.snap-scroll-y {
  scroll-start-y: var(--nav-height);
}

:snap-target

This CSS selector will match elements in a scroll snap container that are currently snapped by the browser.

.card {
  --shadow-distance: 5px;
  box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
  transition: box-shadow 350ms ease;
}

.card:snapped {
  --shadow-distance: 30px;
}

After these scroll snap proposals, making a slider, carousel, or gallery is much easier as the browser now offers conveniences for the task, eliminating observers and scroll orchestration code in favor of using built-in APIs.

It's still very early days for these CSS and JS features, but be on the lookout for polyfills that can help adoption, and testing, of them soon.

রিসোর্স

• Scroll Snap 2 draft specification
• Scroll Snap 2 explainers
• Snap demos

Cycling between known states

Before toggle() , only states built into the browser already could be leveraged for styling and interaction. The checkbox input, for example, has :checked , an internally managed browser state for the input that CSS is able to use for changing the element visually.

After toggle() , custom states can be created on any element for CSS to change and use for styling. It allows groups, cycling, directed toggling, and more.

In the following example, the same effect of a list item strikethrough on complete is achieved but without any checkbox elements:

<ul class='ingredients'>
   <li>1 banana
   <li>1 cup blueberries
  ...
</ul>

And the relevant CSS toggle() styles:

li {
  toggle-root: check self;
}

li:toggle(check) {
  text-decoration: line-through;
}

If you're familiar with state machines, you may notice how much crossover there is with toggle() . This feature will let developers build more of their state into CSS, hopefully resulting in clearer and more semantic ways of orchestrating interaction and state.

রিসোর্স

• toggle() draft specification
• Bramus : The Future of CSS: CSS Toggles

Customizing select elements

Before <selectmenu> , CSS didn't have the ability to customize <option> elements with rich HTML or change much about the display of a list of options. This led developers to load external libraries that recreated much of the functionality of a <select> , which ended up being a lot of work.

After <selectmenu> , developers can provide rich HTML for options elements and style them as much as they need, while still meeting accessibility requirements and providing semantic HTML.

In the following example, taken from the <selectmenu> explainer page , a new select menu is created with some basic options:

<selectmenu>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</selectmenu>

CSS can target and style the element's parts:

.my-select-menu::part(button) {
  color: white;
  background-color: red;
  padding: 5px;
  border-radius: 5px;
}

.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

You can try the <selectmenu> element on Chromium in Canary with the web experiments flag enabled. Watch out in 2023 and beyond for customizable select menu elements.

রিসোর্স

• Selectmenu specification
• Selectmenu demo

Anchoring an element to another

Before anchor() , position absolute and relative were position strategies provided for developers to have child elements move around within a parent element.

After anchor() , developers can position elements to other elements, regardless of them being a child or not. It also allows developers to specify which edge to position against, and other niceties for creating position relationships between elements.

The explainer has a few great examples and code samples provided, if you're interested in learning more.

রিসোর্স

• anchor() explainer