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

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

অ্যাডাম আরগাইল

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

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

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

:has()

Browser Support

  • ক্রোম: ১০৫।
  • প্রান্ত: ১০৫।
  • ফায়ারফক্স: ১২১।
  • সাফারি: ১৫.৪।

Source

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

৪টি প্যানেল দেখানো হয়েছে, প্রতিটিতে একটি ছবি এবং ক্যাপশন রয়েছে। প্রতিটি ছবিতে একটি মস্তিষ্ক ক্রমশ মস্তিষ্কের শক্তি সক্রিয় করছে। প্রথম প্যানেলটি বলছে :has()। দ্বিতীয় প্যানেলটি বলছে figure:has(caption) প্যারেন্ট সিলেক্টর হিসেবে। তৃতীয় প্যানেলটি বলছে .layout:has(> :nth-child(5)) পরিমাণ সিলেক্টর হিসেবে। চতুর্থ প্যানেলটি বলছে html:has(#checked) .new-subject শর্তসাপেক্ষ বিষয় পরিবর্তনকারী সিলেক্টর হিসেবে।

এখানে প্যারেন্ট সিলেক্টর হিসেবে :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() কোয়ান্টিটি কোয়ারি সহ এবং কন্টেইনার কোয়ারি ব্যবহার করে একটি গ্রিড লেআউট তৈরি করে যা পোর্ট্রেট বা ল্যান্ডস্কেপ ওরিয়েন্টেশনে ১-১২টি এলিমেন্টকে সুন্দরভাবে প্রদর্শন করতে সক্ষম:

কোডপেন ব্যবহার করে দেখুন

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

subgrid

Browser Support

  • ক্রোম: ১১৭।
  • প্রান্ত: ১১৭।
  • ফায়ারফক্স: ৭১।
  • সাফারি: ১৬টি।

Source

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

nesting

Browser Support

  • ক্রোম: ১২০।
  • প্রান্ত: ১২০।
  • ফায়ারফক্স: ১১৭।
  • সাফারি: ১৭.২।

Source

২০২৩ সালে সকল প্রধান ব্রাউজারে বিল্ট-ইন 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;
  }
}

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

balance

Browser Support

  • ক্রোম: ১১৪।
  • প্রান্ত: ১১৪।
  • ফায়ারফক্স: ১২১।
  • সাফারি: ১৭.৫।

Source

pretty

Browser Support

  • ক্রোম: ১১৭।
  • প্রান্ত: ১১৭।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: ২৬।

Source

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

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

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

cqw

Browser Support

  • ক্রোম: ১০৫।
  • প্রান্ত: ১০৫।
  • ফায়ারফক্স: ১১০।
  • সাফারি: ১৬টি।

Source

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

ছয়টি নতুন কনটেইনার কিউরি ইউনিট রয়েছে:

  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 সালে আপনার কাছে উপলব্ধ সমস্ত ইউনিট পর্যালোচনা করা সম্ভবত একটি ভাল ধারণা।