মিশেল বার্কার আমার প্রিয় বাছাই করা ব্লগ পোস্টের সাথে: সংক্ষিপ্ত, ব্যবহারিক, এবং আপনাকে আপনার সময়ের জন্য একটি মূল্যবান নগেট দিয়ে রেখেছে। এখানে, সে সিএসএস-এ লজিক্যাল প্রপার্টি শর্টহ্যান্ডে যায়, বিশেষ করে যেগুলি শুধুমাত্র একটি একক অক্ষের উপর দৈর্ঘ্য সেট করে, শুধুমাত্র ব্লক (উল্লম্ব) অক্ষ বা কেবল ইনলাইন (অনুভূমিক) অক্ষ বলে।
আমি বলি "ব্লক" এবং "ইনলাইন" কারণ, যতদূর যৌক্তিক বৈশিষ্ট্য সম্পর্কিত, x-অক্ষটি বর্তমানের উপর নির্ভর করে একটি উল্লম্ব অক্ষের মতো আচরণ করতে পারে writing-mode
.
সুতরাং, যেখানে আমরা সবসময় ছিল padding
, margin
, এবং border
শর্টহ্যান্ড যেগুলি একটি মাল্টি-ভ্যালু সিনট্যাক্স সমর্থন করতে পারে, সেগুলির কোনটিই আমাদেরকে একটি নির্দিষ্ট অক্ষের দৈর্ঘ্য ঘোষণা করার অনুমতি দেয় না অন্য অক্ষের উপর একটি দৈর্ঘ্য সেট না করে।
উদাহরণ স্বরূপ:
/* This gives us margin on the inline axis */
margin: 0 3rem;
…কিন্তু সেখানে যাওয়ার জন্য আমাদের অন্য অক্ষ সেট করতে হয়েছিল। যৌক্তিক বৈশিষ্ট্য সহ, যাইহোক, আমাদের প্রতিটি অক্ষের জন্য অতিরিক্ত সংক্ষিপ্ত বিবরণ রয়েছে যার অর্থ আমরা কিউ আপ করতে পারি margin-inline
ইনলাইন অক্ষে বিশেষভাবে কাজ করার জন্য সংক্ষিপ্ত বিবরণ:
margin-inline: 3rem;
মিশেল পাস করার সময় আমার প্রিয় লজিক্যাল সম্পত্তি শর্টহ্যান্ড উল্লেখ করেছেন। আপনি কতবার এই ধরণের টিউনে কিছু অবস্থান করেন:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
আমরা সঙ্গে মধ্যে মধ্যে যারা চার লাইন পেতে পারেন inset: 0
. অথবা আমরা সরাসরি ব্লক এবং ইনলাইন অক্ষকে লক্ষ্য করতে পারি inset-block
এবং inset-inline
, যথাক্রমে।
আমরা শর্টহ্যান্ডের কথা বলার সময়, আমি সবসময় সতর্কতার কথা বলতে চাই "দুর্ঘটনাজনিত" CSS রিসেট. শুধুমাত্র একটি সাধারণ CSS ভুল আমি করি.