مفید شارٹ ہینڈز کے لیے منطقی خصوصیات

مشیل بارکر میری پسندیدہ بلاگ پوسٹ کے ساتھ: مختصر، عملی، اور آپ کو آپ کے وقت کے لیے ایک قیمتی نگیٹ کے ساتھ چھوڑتی ہے۔ یہاں، وہ CSS میں لاجیکل پراپرٹی شارٹ ہینڈز میں داخل ہو جاتی ہے۔خاص طور پر وہ جو صرف ایک محور پر لمبائی کا تعین کرتے ہیں، صرف بلاک (عمودی) محور یا صرف ان لائن (افقی) محور کہتے ہیں۔

میں "بلاک" اور "ان لائن" کہتا ہوں کیونکہ جہاں تک منطقی خصوصیات کا تعلق ہے، x-axis کرنٹ کے لحاظ سے عمودی محور کی طرح برتاؤ کر سکتا ہے۔ 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بالترتیب.

جب ہم شارٹ ہینڈز پر بات کر رہے ہیں، میں ہمیشہ اس بارے میں احتیاط کا ایک لفظ ڈالنا پسند کرتا ہوں۔ "حادثاتی" سی ایس ایس ری سیٹ کرتا ہے۔. میں سے صرف ایک عام سی ایس ایس غلطیاں جو میں کرتا ہوں۔.

براہ راست لنک →