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

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

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

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

১. একটি কন্টেইনার কোয়েরি

টানা ১০ বছর ধরে সবচেয়ে বেশি অনুরোধ করা CSS ফিচারটি এখন সব ব্রাউজারে স্থিতিশীল এবং ২০২৩ সাল থেকে width কোয়েরির জন্য আপনি এটি ব্যবহার করতে পারবেন।

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

.card {
  padding: 1rem;
}

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

Browser Support

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

Source

container

Browser Support

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

Source

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

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

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

প্রায় ২৫টি ডেমো সম্বলিত এই বিশাল ও অনুপ্রেরণাদায়ক কোডপেন সংগ্রহে এই CSS ফিচারটির সম্ভাবনা সম্পর্কে আরও জানুন।

scroll-snap-type

Browser Support

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

Source

scroll-snap-align

Browser Support

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

Source

scroll-snap-stop

Browser Support

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

Source

overscroll-behavior

Browser Support

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

Source

৩. গ্রিড পাইল

একক সেলের CSS গ্রিডে `position absolute` ব্যবহার করা থেকে বিরত থাকুন। সেলগুলো একটির উপর আরেকটি সাজিয়ে ফেলার পর, সেগুলোকে সঠিক অবস্থানে রাখার জন্য `justify` এবং `align` প্রপার্টি ব্যবহার করুন।

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

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

Browser Support

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

Source

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

CSS-এ বৃত্ত তৈরি করার অনেক উপায় আছে, কিন্তু এটাই নিঃসন্দেহে সবচেয়ে সংক্ষিপ্ত পদ্ধতি।

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

Browser Support

  • ক্রোম: ৮৮।
  • প্রান্ত: ৮৮।
  • ফায়ারফক্স: ৮৯।
  • সাফারি: ১৫।

Source

৫. @layer ব্যবহার করে ভ্যারিয়েন্টগুলো নিয়ন্ত্রণ করুন

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

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

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

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

Browser Support

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

Source

৬. যৌক্তিক বৈশিষ্ট্যের সাহায্যে কম মুখস্থ করে বেশি সাফল্য অর্জন করুন।

এই একটি নতুন বক্স মডেল মুখস্থ করে নিন এবং আন্তর্জাতিক লেখার ধরণ ও ডকুমেন্টের দিকনির্দেশনার জন্য বাম ও ডান প্যাডিং বা মার্জিন পরিবর্তন করার বিষয়ে আর কখনও চিন্তা করতে হবে না । আপনার স্টাইলগুলোকে ফিজিক্যাল প্রপার্টি থেকে 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;
}
padding-inline

Browser Support

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

Source

margin-block

Browser Support

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

Source

inset-inline

Browser Support

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

Source