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

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

Adam Argyle

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

এই পোস্টটি গত বছরের 6টি CSS স্নিপেটের ধারাবাহিকতা যা প্রতিটি ফ্রন্ট-এন্ড ডেভেলপারের 2023 সালে জানা উচিত ।

CSS: আছে(.potential-beyond-being-a-parent-selector)

:has() 2023 সালের শেষে সমস্ত প্রধান ব্রাউজার জুড়ে অবতরণ করেছে! এই নতুন নির্বাচকটিকে ছোট এবং নির্দোষ বলে মনে হচ্ছে কিন্তু আপনি এটি আনলক করতে পারে এমন সমস্ত ব্যবহারের ক্ষেত্রে বিস্মিত হবেন: গেমস, প্রতিক্রিয়াশীলতা, বিষয়বস্তু সচেতন লেআউট, স্মার্ট উপাদান এবং আরও অনেক কিছু যা এই নিবন্ধে 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;
}

এটি একটি প্রধান বিষয়বস্তু এলাকা স্লাইড করে দেয় যখন একটি sidenav-এর একটি ক্লাস থাকে .--is-open :

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

এখানে একটি মজার ডেমো রয়েছে যা ব্যবহার করে :has() একটি অভিভাবক নির্বাচক হিসাবে, :has() পরিমাণ প্রশ্ন সহ, এবং একটি গ্রিড লেআউট তৈরি করতে কন্টেইনার কোয়েরি যা প্রতিকৃতি বা ল্যান্ডস্কেপ অভিযোজনে 1-12টি উপাদান সুন্দরভাবে প্রদর্শন করতে সক্ষম:

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

বহু বছর ধরে ফ্রন্ট-এন্ড ওয়েব সম্প্রদায় ব্যাপকভাবে জনপ্রিয় এবং শক্তিশালী 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 ভাবে নেস্ট করুন

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

আপনি এখানে 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> উপাদান বা ­ . এটি বেশিরভাগই একটি হেরে যাওয়া যুদ্ধ কারণ যত তাড়াতাড়ি বিষয়বস্তু অনুবাদ করা হয়, জুম করা হয় বা যেকোন উপায়ে পরিবর্তন করা হয়, কোন গ্যারান্টি নেই যে সেই মোড়ানো ইঙ্গিতগুলি বিষয়বস্তুর নতুন উপস্থাপনার জন্য সঠিক জায়গায় থাকবে৷

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

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

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

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

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

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

@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;
    }
  }
}

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