ویژگی های منطقی برای کوتاه های مفید

میشل بارکر با پست وبلاگ مورد علاقه من: کوتاه، کاربردی، و شما را با یک قطعه ارزشمند برای وقت خود می گذارد. اینجا، او وارد خلاصه‌نویسی ویژگی‌های منطقی در CSS می‌شود، به ویژه آنهایی که طول ها را فقط روی یک محور تعیین می کنند، فقط محور بلوک (عمودی) یا فقط محور درون خطی (افقی) را تعیین می کنند.

من می‌گویم "block" و "inline" زیرا تا آنجا که به ویژگی‌های منطقی مربوط می‌شود، محور 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 که من مرتکب می شوم.

لینک مستقیم →