ভাই সিএসএস প্রোগ্রামিং ল্যাঙ্গুয়েজ না এইটা আমরা সবাই জানি ! কিন্তু আপনি কি জানেন ২০২৪ সালে সিএসএস দিয়ে ও ডায়নামিক কাজ করা সম্ভব? হ্যাঁ, আপনি ঠিকই শুনেছেন সিএসএস দিয়ে ও এখন আপনি প্রোগ্রামিং করতে পারবেন। কিন্তু ভাই কেমনে, একটু কষ্ট করে এই পুরো আর্টিকেল পড়েন তাহলেই বুঝতে পারবেন।

সিএসএস এর মধ্যে ৯টি প্রপার্টি এসেছে যার ব্যবহার জানলে আপনি ও অভাক হয়ে যাবেন। তাহলে চলুন দেখি সেই প্রপার্টিগুলো কি কি এবং তাদের কাজ কি আমাদের তারা কিভাবে হেল্প করবে !

1.Nesting

আমার কাছে যেটা সবচেয়ে বেশি ভালো লেগেছে এবং আমার মনে হয় যে এই জিনিসটার অপেক্ষায় ছিলাম আমরা। SCSS এর সাথে তো আপনি পরিচিত ! আমরা SCSS এ যে জিনিসটা সবচেয়ে বেশি ভালোবাসি সেটা হচ্ছে Nesting. বেশিরভাগ মানুষ এই Nesting এর জন্যই SCSS ব্যবহার করে থাকে। কিন্তু এখন সিএসএস নিয়ে আসলো আমাদের জন্য দারুন সুসংবাদ যে আমাদের Nesting ব্যাবহার করার SCSS এ যেতে হবে না। আমরা আমাদের row সিএসএস এর মধ্যেই Nesting এর কাজ করতে পারবো।

Nesting Code Example

HTML:

<div class="container">
    <h1 class="headingText">This is heading text</h1>
</div>

CSS:

.container {
  background-color: #f0f0f0;
  padding: 10px;

  /* এখানে "&" দ্বারা .container ক্লাসকে বুঝানো হয়ে থাকে। 
      কিন্তু আপনি চাইলে এই "&" চিহ্নটি না দিয়ে শুধু ক্লাস নাম দিয়েও পারবেন। */
  & .headingText {
    color: #333;
  }
}

browser support: 80%

2.Inset

আমরা সিএসএস এর মধ্যে যে "top:0; left:0; right:0; bottom:0;" লিখি এইগুলো লিখতে কিন্তু আমাদের ৪টি লাইনের প্রয়োজন হয় কিন্তু ২০২৪ এ এসে সিএসএস আমাদের জানালো ভাই তুমি এতো করেছো এতদিন আর কষ্ট করোনা আমরা তোমার জন্য নিয়ে আসছি একটি প্রপার্টি যেটা তুমি "margin" এর মতো আমরা একটি প্রপার্টি এর মধ্যে top, left, right, bottom এর সবগুলো ভেলু দিতে পারবো। Inset আপনি ব্যবহার করবেন যেভাবে আপনি margin ব্যবহার করেন ঠিক সেইভাবে। যেমন ধরেন আপনি margin এ একটি ভেলু দিলে top, right, left, bottom সব জায়গায় ওই ভেলু সেট হয়ে যেতো Inset এ ও ঠিক তেমনি ব্যবহার করতে পারবেন। কি দারুন তাই না ? হ্যাঁ, এই প্রপার্টি ও আমার কাছে অনেক ভালো লেগেছে।

Inset Code Example

.box::after {
  content:"";
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  padding: 20px;
/* এখানে প্রথম ভেলু top এর জন্য দ্বিতীয় ভেলু right এর জন্য 
    তৃতীয় ভেলু bottom এর জন্য এবং চতুর্থ ভেলু left এর জন্য */
  inset: 10px 30px 5px 100px;
}

browser support: 94%

3.:is()

শুরুতেই বলেছিলাম যে ২০২৪ এ এসে সিএসএস হয়ে গেছে প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং আমরা এখন সিএসএস এর মধ্যে ডাইনামিক স্টাইল করতে পারবো এবং সেটার একটি উদাহরণ হলো :is() যেটা দ্বারা আমরা কন্ডিশনালি স্টাইল সেট করতে পারবো। এটি সম্পূর্ণ জাভাস্কিপ্টের if এর মতো কাজ করে। নিচে একটি উদাহরণ দেখা যাকঃ

if (.headingText, .paraText){
    color: red;
   }

:is() এর মধ্যে আমরা মুলত কন্ডিশন আকারে আমাদের ক্লাসের নাম দিতে পারবো এবং বলতে পারবো যে যদি আমার .card ( যেটা পেরেন্ট ) এর মধ্যে কোনো .headinText এবং .paraText নামে ক্লাস থেকে থাকে তাহলে সেগুলোকে ধরো এবং তুমি সেগুলোকে স্টাইল করো যে স্টাইল গুলো আমি তোমার মধ্যে দিবো।

:is() Code Example

HTML:

<div class="card">
    <h1 class="headingText">This is a heading.</h1>
    <p class="paraText">This is a paragraph.</p>
</div>

CSS:

.card :is(.headingText, .paraText) {
  color: #3498db;
}

browser support: 96%

4.@Container Queries

এই প্রপার্টিটি আমাদের রেস্পন্সিভে সাহায্য করবে। আমরা রেস্পন্সিভ করার জন্য মিডিয়া কুয়েরি ব্যবহার করি। এবং এতে করে আমাদের রেস্পন্সিভ করার জন্য max-width বা min-width নিয়ে কাজ করতে হয়। কিন্তু আমাদের রেস্পন্সিভ media query কাজ করে কিভাবে? আমাদের রেস্পন্সিভ কাজ করে স্কিন সাইজের উপর ভিত্তি করে। আমরা media query তে যে max-width বা min-width এর একটা ভেলু দেই যখন স্কিন সাইজটি ওই ভেলু ক্রস করে তখনই আমাদের দেওয়া রেস্পন্সিভ স্টাইলগুলো এপ্লাই হয়।

কিন্তু Container Query আমাদের সাহায্য করবে আমাদের যে প্যারেন্ট এলিমেন্ট রয়েছে সেটার width এর উপর ভিত্তি করে রেস্পন্সিভ করে দেওয়ার। কিন্তু কিভাবে ? আমরা Container Query এর মাধ্যমে একটি Container তৈরি করতে পারি এবং সেই Container এর name, width, height etc ও দিতে পারি। এখন আমরা রেস্পন্সিভ করার জন্য @Container লিখে আমাদের Container টির নাম দিবো এবং ( ) এর মধ্যে max-width বা min-width দিতে পারবো media query এর মতো। তারপর আমরা যেভাবে media query তে রেস্পন্সিভ স্টাইল করতাম সেভাবে স্টাইল করে নিবো, কিন্তু এখানে ব্রেকপয়েন্টটি আমাদের স্কিন সাইজের সাথে মিলাবে না আমাদের Container এর width এর সাথে মিলাবে।

@Container Query Code Example

HTML:

<div class="card">
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
</div>

CSS:

.card {
  container-name: card; /* container name */
  container-type: inline-size;  /* container size */
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@container card (max-width: 600px) {
  .card p {
    font-size: 12px;
  }
}

browser support: 67%

5.:has( )

has মানে তো বুঝতেই পারছেন এবং এটাও মনে হয় বুঝে গেছেন যে :has( ) এর কি কাজ !! :has( ) ও কিছুটা আমাদের :is( ) এর মতো কাজ। :has( ) এর মধ্যে আমরা সেইমভাবে কন্ডিশন দিতে পারবো এবং আমাদের স্টাইল করে নিতে পারবো যেটা হবে ডাইনামিক ( যেটা করতে আমাদের জাভাস্কিপ্টের প্রয়োজন পড়তো )।

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

:has() Code Example

HTML:

<form>
  <input type="search" />
  <button type="submit">submit</button>
</form>

CSS:

form:has(input:focus){
  background-color: red;
}

browser support: 89%

6.Aspect Ratio

আমাদের যখন কোনো একটি বক্সকে squre করতে হয় তখন আমরা কি করি, আমরা সেই বক্সের width এবং height সমান ভাবে দেই এবং সেটাকে squre করি। কিন্তু যখন আমরা ফিক্সড (px) width বাদ দিয়ে (%) দিয়ে width এবং height সেট করবো তখন কিন্তু আমাদের বক্সটি আর squre থাকবে না। কারণ আমাদের স্কিনের width এবং height সমান থাকে না কিন্তু বক্সের width এবং height নিবে আমাদের স্কিনের width এবং height থেকে।

এই জায়গায় আমরা ব্যবহার করতে পারবো aspect-ratio প্রপার্টিটি। এর মধ্যে আমি একটি ভেলু দিতে পারবেন আবার দুইটি ভেলুও দিতে পারবেন এবং আপনি আপনার ইচ্ছা অনুযায়ী বক্সকে ফ্রেইম করতে পারবেন। আমরা যখন aspect-ratio ব্যাবহার করবো তখন আমাদের height দেওয়া লাগবে না আমরা শুধু width বলে দিবো height aspect-ratio নিজে ক্যালকুলেট করে নিবে।

aspect-ratio Code Example

HTML:

<div class="card">
    <h1>This is a heading.</h1>
    <p>This is a paragraph.</p>
</div>

CSS:

/* আমরা যদি ভেলু হিসেবে 1 দেই তাহলে সে বুঝবে যে width 
যতটুকু জায়গা নিচ্ছে height কে ও তততুকু জায়গা সেট করে দিতে হবে। */
.card {
  width: 50%;
  aspect-ratio: 1;
  background-color: blue;
}

/* কিন্তু এখানে আপনি আপনার মনের মতো করে ফ্রেম করে নিতে পারবেন ভেলু 
পরিবর্তন করার মাধ্যমে। এখানে আপনি যখন দুইটি ভেলু দিবেন তখন প্রথমটি হবে 
width এবং দ্বিতীয়টি হবে height. */
.card {
  width: 800px;
  aspect-ratio: 16 / 2;
  background-color: blue;
}

browser support: 93%

7.Color Mix

color mix এর মাধ্যমে আমরা দুইটি কালারকে মিক্স করতে পারবো। এইটি ব্যবহার করা খুবই সহজ এবং আমাদের হয়তো অনেক সময় প্রয়োজন হয় যে কালার মিক্স করার তখন আমরা এটি ব্যবহার করতে পারবো।

Color Mix Code Example

CSS:

.card {
  width: 100%;
  height: 100%;
  background-color: color-mix(#000, #fff);
}

browser support: 80%

8.Clamp

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

ক্লেম্প ফাংশন মুলত তিনটি ভেলু নেয়, প্রথমটি হচ্ছে min-size দ্বিতীয়টি হচ্ছে screen-width এবং তৃতীয়টি হচ্ছে max-size. min-size এর মধ্যে আমরা বলে দিবো যে আমাদের টেক্সটের সাইজ কতো হবে সর্বনিম্ন এবং max এর মধ্যে বলে দিবো যে আমাদের টেক্সটের সাইজ কতো হবে সর্বোচ্চ আর screen-width এর মধ্যে যে সাইজ বলে দিবো যখন যেটা ছোট হবে তখন আমাদের min-size টেক্সটের সাইজ হিসেবে সেট হয়ে যাবে এবং যখন screen-width বড় হয়ে যাবে তখন max-size টেক্সটের সাইজ হিসেবে সেট হয়ে যাবে।

Clamp Code Example

CSS:

.headingText {
  font-size: clamp(2rem, 20vw, 6rem);
}

browser support: 95%

9.Text Wrap Balance

এর দ্বারা আমরা আমাদের টেক্সটকে ব্যাল্যান্স করতে পারবো। আমরা টেক্সট ব্যাল্যান্স করার জন্য text-center ব্যবহার করে থাকি কিন্তু এটি আমাদের টেক্সটকে সুন্দরভাবে ব্যাল্যান্স করতে পারে না, আমাদের টেক্সটের লাইন কখনো ছোট হয়ে যায় তো কখনো বড়। এই প্রবলেমটি আমরা text wrap balance দিয়ে সল্ভ করতে পারি। এটি আমাদের টেক্সটকে খুব সুন্দর করে ব্যাল্যান্স করে দিবে আমাদের প্যারেন্টের width অনুযায়ী।

Text Wrap Balance Code Example

CSS:

.headingText {
  text-wrap: balance;
}

browser support: 67%