6টি CSS স্নিপেট প্রতিটি ফ্রন্ট-এন্ড বিকাশকারীকে 2023 সালে জানা উচিত

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

Adam Argyle

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

1. একটি ধারক প্রশ্ন

সরাসরি 10 বছরের জন্য সর্বাধিক অনুরোধ করা CSS বৈশিষ্ট্য, এখন ব্রাউজার জুড়ে স্থিতিশীল এবং 2023 সালে প্রস্থের প্রশ্নগুলির জন্য ব্যবহার করার জন্য আপনার জন্য উপলব্ধ।

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

2. স্ক্রোল স্ন্যাপ

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

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

প্রায় 25টি ডেমোর এই বিশাল এবং অনুপ্রেরণামূলক কোডপেন সংগ্রহে এই CSS বৈশিষ্ট্যটির সম্ভাবনা সম্পর্কে আরও জানুন।

3. গ্রিড গাদা

একটি একক কক্ষ CSS গ্রিড সহ পরম অবস্থান এড়িয়ে চলুন। একবার তারা একে অপরের উপরে স্তূপ করা হয়ে গেলে , তাদের অবস্থানের জন্য জাস্টিফাই এবং সারিবদ্ধ বৈশিষ্ট্যগুলি ব্যবহার করুন।

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

4. দ্রুত বৃত্ত

CSS-এ চেনাশোনা তৈরি করার অনেক উপায় আছে, কিন্তু এটি অবশ্যই সবচেয়ে কম।

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

5. @layer-এর সাথে ভেরিয়েন্ট নিয়ন্ত্রণ করুন

ক্যাসকেড স্তরগুলি আবিষ্কৃত বা পরে তৈরি করা বৈকল্পিকগুলিকে মূল বৈকল্পিক সেট সহ ক্যাসকেডের সঠিক জায়গায় সন্নিবেশ করতে সাহায্য করতে পারে।

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

তারপরে, কিছু সম্পূর্ণ ভিন্ন ফাইলে, অন্য কোনো এলোমেলো সময়ে লোড করা, বোতাম স্তরে একটি নতুন বৈকল্পিক যুক্ত করুন যেন এই পুরো সময় বাকিদের সাথে ছিল।

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

6. কম মুখস্থ করুন এবং যৌক্তিক বৈশিষ্ট্য সহ আরও পৌঁছান

এই একটি নতুন বক্স মডেল মনে রাখুন এবং আবার আন্তর্জাতিক লেখার মোড এবং নথির দিকনির্দেশের জন্য বাম এবং ডান প্যাডিং বা মার্জিন পরিবর্তন করার বিষয়ে চিন্তা করতে হবে না । padding-inline , margin-inline , inset-inline মতো ভৌত বৈশিষ্ট্যগুলি থেকে আপনার শৈলীগুলিকে যৌক্তিকভাবে সামঞ্জস্য করুন এবং এখন ব্রাউজারটি সামঞ্জস্য করার কাজ করবে৷

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}