2024 সালে প্রতিটি ফ্রন্ট-এন্ড ডেভেলপারের 5টি CSS স্নিপেট জানা উচিত

টুলবেল্টের যোগ্য, শক্তিশালী এবং স্থিতিশীল সিএসএস যা আপনি আজই ব্যবহার করতে পারেন।

Adam Argyle

আমি মনে করি প্রত্যেক ফ্রন্ট-এন্ড ডেভেলপারের জানা উচিত যে :has() শুধু একটি 'প্যারেন্ট সিলেক্টর' নয়, subgrid কীভাবে কাজ করে ও কেন ব্যবহৃত হয়, বিল্ট-ইন CSS সিনট্যাক্স ব্যবহার করে কীভাবে নেস্ট করতে হয়, ব্রাউজারকে কীভাবে হেডলাইন টেক্সট র‍্যাপিংয়ের ভারসাম্য বজায় রাখতে দেওয়া যায় এবং কীভাবে কন্টেইনার কোয়েরি ইউনিট ব্যবহার করতে হয়।

এই পোস্টটি গত বছরের '২০২৩ সালে প্রত্যেক ফ্রন্ট-এন্ড ডেভেলপারের জানা উচিত এমন ৬টি সিএসএস স্নিপেট' -এর ধারাবাহিকতা।

CSS:has(.potential-beyond-being-a-parent-selector)

২০২৩ সালের শেষে সমস্ত প্রধান ব্রাউজারে :has() চালু হয়ে গেছে! এই নতুন সিলেক্টরটিকে ছোট এবং নিরীহ মনে হলেও, এটি যে কত ধরনের ব্যবহারের সুযোগ তৈরি করতে পারে তা জানলে আপনি অবাক হবেন: গেমস, রিঅ্যাকটিভিটি, কন্টেন্ট অ্যাওয়ার লেআউট, স্মার্ট কম্পোনেন্ট এবং আরও অনেক কিছু, যা Jhey-এর এই আর্টিকেলে বিস্তারিতভাবে আলোচনা করা হয়েছে ।

প্যারেন্ট সিলেক্টর হিসেবে :has() ব্যবহারের কয়েকটি উদাহরণ এখানে দেওয়া হলো। এর এমন নামকরণের কারণ হলো, সাধারণত একটি সিলেক্টরের সাবজেক্ট শেষে থাকে, যেমন ul li , যেখানে li হলো সাবজেক্ট এবং এটি স্টাইলগুলো পায়। :has() এর সাহায্যে, সিলেক্টরের শুরুতে থাকা এলিমেন্টটি সাবজেক্ট হতে পারে। নিচের উদাহরণে, যদি ভিতরে .icon ক্লাসের কোনো এলিমেন্ট থাকে, তাহলে বাটনটির মধ্যে একটি ফাঁকা জায়গা দেখা যায়। ভিতরে কোনো ছবি থাকলে কার্ডটির ওরিয়েন্টেশন পরিবর্তিত হয়।

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

একটি লেআউটে আইটেমের সংখ্যার উপর ভিত্তি করে সেটিকে পরিবর্তন করার সিলেক্টরটি দীর্ঘদিন ধরে কাঙ্ক্ষিত ছিল। এখন :has() এর মাধ্যমে এটি সম্ভব, কারণ এটি চাইল্ড আইটেমের সংখ্যা জানার সময় কন্টেইনারটিকে সাবজেক্ট হিসেবে রাখতে পারে।

main:has(> :nth-child(5)) {…}

আরেকটি উচ্চ-স্তরের উদাহরণ হলো, পৃষ্ঠার কোনো একটি নির্দিষ্ট চেকবক্স সক্রিয় করা হলে পুরো ডকুমেন্টের স্টাইল পরিবর্তন করা:

html:has(#dark-mode:checked) {…}

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

এর কোনো ইনপুট অবৈধ হলে এটি একটি ফর্ম এরর এলিমেন্ট দেখায়:

form:has(:user-invalid) .error {
  display: block;
}

যখন কোনো সাইডন্যাভের ক্লাস .--is-open , তখন এটি মূল কন্টেন্ট এরিয়াকে স্লাইড করে বের করে আনে।

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

এখানে একটি মজার ডেমো দেওয়া হলো, যেখানে প্যারেন্ট সিলেক্টর হিসেবে :has() , কোয়ান্টিটি কোয়েরির সাথে :has() , এবং কন্টেইনার কোয়েরি ব্যবহার করে একটি গ্রিড লেআউট তৈরি করা হয়েছে, যা পোর্ট্রেট বা ল্যান্ডস্কেপ ওরিয়েন্টেশনে ১ থেকে ১২টি এলিমেন্টকে সুন্দরভাবে প্রদর্শন করতে সক্ষম:

একটি সাবগ্রিড তৈরি করুন

বহু বছর ধরে ফ্রন্ট-এন্ড ওয়েব কমিউনিটি অত্যন্ত জনপ্রিয় ও শক্তিশালী CSS গ্রিড লেআউট ইঞ্জিনটিকে আরও পূর্ণাঙ্গ ও সম্পূর্ণ করার জন্য সাবগ্রিডের অনুরোধ করে আসছিল। এটি এখন তিনটি প্রধান ইঞ্জিনেই উপলব্ধ।

আপনি যদি একটি সার্বিক ধারণা পেতে চান, তাহলে সাবগ্রিড সম্পর্কে এখানে আরও জানুন ।

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

CSS পদ্ধতিতে নেস্ট করুন

২০২৩ সালে সমস্ত প্রধান ব্রাউজারে বিল্ট-ইন CSS নেস্টিং উপলব্ধ হয়। আমি এমনকি আমার ওয়েবসাইট আপডেট করে সেই বিল্ড প্রসেসটি সরিয়ে দিয়েছি যা নেস্টিং কম্পাইল করে বাদ দিয়ে দিত, এবং এখন আমি একটি ছোট স্টাইলশিট সরবরাহ করি! হ্যাঁ, নেস্টিং সহ স্টাইলশিটগুলো এখন আকারে ছোট এবং সমস্ত ব্রাউজার ডেভটুল এটি উপস্থাপন করার জন্য প্রস্তুত।

সমস্ত বিস্তারিত তথ্যের জন্য, আপনি এখানে CSS নেস্টিং সিনট্যাক্সের একটি সংক্ষিপ্ত বিবরণ পেতে পারেন। নিম্নলিখিত কোড উদাহরণটি একটি সিনট্যাক্স উদাহরণ প্রদর্শন করে।

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

ব্রাউজারকে শিরোনামগুলির ভারসাম্য বজায় রাখতে দিন

text-wrap: balance ছাড়া, ডেভেলপার এবং কপিরাইটারদের <wbr> ` এলিমেন্ট বা ­ এর মতো লাইন ব্রেক হিন্ট ব্যবহার করতে হয়। এটি বেশিরভাগ ক্ষেত্রেই একটি ব্যর্থ প্রচেষ্টা, কারণ কন্টেন্টটি অনুবাদ, জুম বা কোনোভাবে পরিবর্তন করার সাথে সাথেই এই র‍্যাপিং হিন্টগুলো কন্টেন্টের নতুন উপস্থাপনার জন্য সঠিক জায়গায় থাকবে কিনা তার কোনো নিশ্চয়তা থাকে না।

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

কন্টেইনার কোয়েরি ইউনিট ব্যবহার করুন

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

ছয়টি নতুন কন্টেইনার অনুসন্ধান ইউনিট রয়েছে:

1. একটি ইনলাইন ভ্যারিয়েন্ট cqi .
2. একটি প্রস্থের রূপভেদ cqw ।
3. একটি ব্লক ভ্যারিয়েন্ট cqb ।
4. একটি উচ্চতার রূপভেদ cqh ।
5. যে দৈর্ঘ্যটি cqmin চেয়ে ছোট, তার জন্য একটি বিকল্প।
6. যে দৈর্ঘ্যটি cqmax চেয়ে বড়, তার জন্য একটি বিকল্প।

একটি কন্টেইনারের জন্য রিলেটিভ এবং ইন্ট্রিনসিক অ্যানিমেশনের একটি পরিস্থিতি বিবেচনা করুন। একটি চাইল্ড এলিমেন্ট যা 100cqi ব্যবহার করে তার কন্টেইনার থেকে সম্পূর্ণরূপে স্লাইড করে বেরিয়ে আসে—যা কন্টেইনারের ইনলাইন আকারের ১০০%।

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

এখানে কন্টেইনার রেসপন্সিভ টাইপোগ্রাফি সহ একটি কার্ড এবং এমন একটি ছবি রয়েছে যা কন্টেইনারের ওরিয়েন্টেশনের সাথে খাপ খাইয়ে নেয়; ওরিয়েন্টেশন ল্যান্ডস্কেপ হলে এর আকার অর্ধেক হয়ে যায়।

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

এই ইউনিটগুলো যদি আপনার কাছে নতুন হয় , তবে ২০২৪ সালে আপনার জন্য উপলব্ধ সমস্ত ইউনিট পর্যালোচনা করে নেওয়া সম্ভবত একটি ভালো ধারণা হবে।