CSS শর্টহ্যান্ড প্রপার্টি: কম কোডে বেশি কাজ

CSS শর্টহ্যান্ড প্রপার্টি কীভাবে ব্যবহার করবেন তা শিখুন যাতে আপনার স্টাইলশিট কম জায়গা घেরে।

CSS শর্টহ্যান্ড প্রপার্টি কী?

CSS শর্টহ্যান্ড প্রপার্টি আপনাকে একাধিক স্টাইল ডিক্লেরেশন একসাথে লিখতে দেয়, ফলে কোড সংক্ষিপ্ত এবং পঠনযোগ্য হয়।

উদাহরণ: ফন্ট শর্টহ্যান্ড

ধরুন, আপনি একটি h1 এলিমেন্টে জর্জিয়া ফন্ট, ৪২পিক্সেল ফন্ট সাইজ এবং ১.২৫ লাইন-হাইট দিতে চান।

সাধারণ পদ্ধতি

h1 { 
  font-family: "Georgia", "serif"; 
  font-size: 42px; 
  line-height: 1.25; 
}

শর্টহ্যান্ড পদ্ধতি

h1 { 
  font: 42px/1.25 "Georgia", "serif"; 
}

তিন লাইন কোড এখন মাত্র এক লাইনে!

একটি আরো উদাহরণ: প্যাডিং শর্টহ্যান্ড

একটি বাটনে টপ-বটম ১২পিক্সেল এবং লেফ্ট-রাইট ২০পিক্সেল প্যাডিং দিতে হলে:

সাধারণ পদ্ধতি (৪ লাইন)

button { 
  padding-top: 12px; 
  padding-right: 20px; 
  padding-bottom: 12px; 
  padding-left: 20px; 
}

শর্টহ্যান্ড পদ্ধতি (১ লাইন)

button { 
  padding: 12px 20px; /* top-bottom, left-right */ 
}

শর্টহ্যান্ড মানগুলো কীভাবে কাজ করে

• প্রথম মান 12px → padding-top এবং padding-bottom
• দ্বিতীয় মান 20px → padding-left এবং padding-right

প্রচলিত CSS শর্টহ্যান্ড প্রপার্টির তালিকা

all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, gap, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, mask, offset, outline, overflow, padding, place-content, place-items, place-self, scroll-margin, scroll-padding, text-decoration, text-emphasis, transition।

সব শর্টহ্যান্ড মনে রাখার প্রয়োজন নেই। সবচেয়ে বেশি ব্যবহৃত হয়: font, padding, margin, background, border, animation, transition, border-radius।

টিপস

শুরুতে শর্টহ্যান্ড কোড পড়া কঠিন লাগতে পারে, কিন্তু একবার অভ্যাস হলে এটি সেকেন্ড নেচার হয়ে যায়। Mozilla-এর অফিসিয়াল ডকুমেন্টেশন থেকে বিস্তারিত জানতে পারেন।